From e93f40bf03c4ea943ff9561c2dd032125a05ffc1 Mon Sep 17 00:00:00 2001
From: Javier Delgado <javier.delgado@toptal.com>
Date: Tue, 3 Mar 2026 15:19:36 -0300
Subject: [PATCH] [CPS-2606] Migrate to Tailwind 4

---
 .changeset/sharp-cases-cry.md                 |  52 +++
 .nvmrc                                        |   1 +
 .storybook/main.js                            |   5 +-
 .storybook/styles.css                         |   7 +-
 cypress.config.mjs                            |   5 +-
 cypress/assets/tailwind.css                   |   7 +-
 package.json                                  |   5 +-
 packages/base-tailwind/package.json           |   4 +-
 packages/base-tailwind/src/index.js           |   8 +-
 .../Accordion/src/Accordion/Accordion.tsx     |   4 +-
 .../src/Accordion/__snapshots__/test.tsx.snap |  25 +-
 .../AccountSelect/__snapshots__/test.tsx.snap |  14 +-
 .../src/Alert/__snapshots__/test.tsx.snap     |   4 +-
 .../Autocomplete/__snapshots__/test.tsx.snap  |  50 +--
 .../AvatarEditContainer.tsx                   |   2 +-
 .../AvatarDropzoneSvg/AvatarDropzoneSvg.tsx   |   3 +-
 .../src/AvatarUpload/AvatarUpload.tsx         |   2 +-
 .../AvatarUpload/__snapshots__/test.tsx.snap  |   2 +-
 packages/base/Backdrop/package.json           |   3 +-
 .../base/Backdrop/src/Backdrop/Backdrop.tsx   |   4 +-
 packages/base/Backdrop/src/Backdrop/test.tsx  |   4 +-
 packages/base/Badge/src/Badge/Badge.tsx       |   2 +-
 .../src/Badge/__snapshots__/test.tsx.snap     |   4 +-
 .../src/Button/__snapshots__/test.tsx.snap    |   4 +-
 .../ButtonBase/__snapshots__/test.tsx.snap    |  22 +-
 packages/base/Button/src/ButtonBase/styles.ts |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../ButtonGroup/__snapshots__/test.tsx.snap   |   6 +-
 .../ButtonRadio/__snapshots__/test.tsx.snap   |   2 +-
 .../ButtonSplit/__snapshots__/test.tsx.snap   |   4 +-
 .../src/Calendar/__snapshots__/test.tsx.snap  |  88 ++--
 .../Calendar/src/CalendarDay/CalendarDay.tsx  |   2 +-
 packages/base/Collapse/package.json           |   3 +-
 .../DatePicker/src/DatePicker/DatePicker.tsx  |   2 +-
 .../DatePicker/__snapshots__/test.tsx.snap    |   2 +-
 .../MonthSelect/__snapshots__/test.tsx.snap   |   2 +-
 .../YearSelect/__snapshots__/test.tsx.snap    |  14 +-
 .../src/Dropdown/__snapshots__/test.tsx.snap  |  16 +-
 packages/base/Fade/package.json               |   3 +-
 .../src/FileInput/__snapshots__/test.tsx.snap |   4 +-
 .../src/FileList/__snapshots__/test.tsx.snap  |   2 +-
 .../src/FileListItem/FileListItem.tsx         |   1 +
 .../FileListItem/__snapshots__/test.tsx.snap  |   4 +-
 .../src/FormError/__snapshots__/test.tsx.snap |   2 +-
 .../FormWarning/__snapshots__/test.tsx.snap   |   2 +-
 .../src/Helpbox/__snapshots__/test.tsx.snap   |   2 +-
 .../src/Input/__snapshots__/test.tsx.snap     |  20 +-
 .../src/InputAdornment/InputAdornment.tsx     |   5 +-
 packages/base/Link/src/Link/Link.tsx          |   6 +-
 .../Link/src/Link/__snapshots__/test.tsx.snap |   8 +-
 packages/base/Link/src/Link/test.tsx          |   4 +-
 packages/base/Menu/src/Menu/Menu.tsx          |   2 +-
 .../Menu/src/Menu/__snapshots__/test.tsx.snap |   6 +-
 packages/base/Menu/src/MenuItem/MenuItem.tsx  |   2 +-
 .../src/MenuItem/__snapshots__/test.tsx.snap  |  12 +-
 .../src/Modal/__snapshots__/test.tsx.snap     |  32 +-
 .../base/Modal/src/ModalPaper/ModalPaper.tsx  |   2 +-
 .../__snapshots__/test.tsx.snap               |  24 +-
 .../NumberInput/__snapshots__/test.tsx.snap   |   4 +-
 .../src/OutlinedInput/stylesInput.ts          |   2 +-
 .../src/OverviewBlock/OverviewBlock.tsx       |   4 +-
 .../__snapshots__/test.tsx.snap               |   6 +-
 .../base/Page/src/PageFooter/PageFooter.tsx   |   2 +-
 packages/base/Page/src/PageFooter/styles.ts   |   4 +-
 .../PageSidebar/__snapshots__/test.tsx.snap   |   6 +-
 .../PageTopBar/__snapshots__/test.tsx.snap    |   2 +-
 .../src/PageTopBarMenu/PageTopBarMenu.tsx     |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../SidebarItem/__snapshots__/test.tsx.snap   | 143 +++---
 .../base/Page/src/SidebarLogo/SidebarLogo.tsx |   2 +-
 .../SidebarLogo/__snapshots__/test.tsx.snap   |   2 +-
 .../base/Page/src/SidebarMenu/SidebarMenu.tsx |   2 +-
 .../SidebarMenu/__snapshots__/test.tsx.snap   |   4 +-
 .../base/Page/src/TopBarItem/TopBarItem.tsx   |   2 +-
 .../Pagination/src/Pagination/Pagination.tsx  |   6 +-
 .../Pagination/__snapshots__/test.tsx.snap    |  44 +-
 packages/base/Paper/package.json              |   3 +-
 .../PromptModal/__snapshots__/test.tsx.snap   |  24 +-
 .../src/Section/__snapshots__/test.tsx.snap   |   4 +-
 .../NativeSelect/__snapshots__/test.tsx.snap  |   4 +-
 .../__snapshots__/test.tsx.snap               |  18 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../__snapshots__/test.tsx.snap               |   4 +-
 .../__snapshots__/test.tsx.snap               |  28 +-
 .../ScrollMenu/__snapshots__/test.tsx.snap    |   8 +-
 .../src/ShowMore/__snapshots__/test.tsx.snap  |  12 +-
 packages/base/Slide/package.json              |   3 +-
 packages/base/Step/package.json               |   1 -
 .../TableExpandableRow/TableExpandableRow.tsx |   5 +-
 .../__snapshots__/test.tsx.snap               |   4 +-
 packages/base/Tabs/src/Tab/Tab.tsx            |   4 +-
 .../Tabs/src/Tab/__snapshots__/test.tsx.snap  |   6 +-
 .../Tabs/src/Tabs/__snapshots__/test.tsx.snap |  24 +-
 .../Tag/src/Tag/__snapshots__/test.tsx.snap   |  10 +-
 .../src/TagGroup/__snapshots__/test.tsx.snap  |   8 +-
 .../__snapshots__/test.tsx.snap               |   2 +-
 .../TagSelector/__snapshots__/test.tsx.snap   |  16 +-
 .../src/TagSelectorInput/TagSelectorInput.tsx |   2 +-
 .../__snapshots__/test.tsx.snap               |   4 +-
 .../base/Test-Utils/src/test-utils/styles.css |   7 +-
 .../Timepicker/src/TimePicker/TimePicker.tsx  |   2 +-
 .../TimePicker/__snapshots__/test.tsx.snap    |   4 +-
 packages/base/Typography/package.json         |   3 +-
 .../Typography/src/Typography/Typography.tsx  |   4 +-
 .../utils/Modal/__snapshots__/test.tsx.snap   |  22 +-
 .../src/Form/__snapshots__/test.tsx.snap      |   8 +-
 .../RichTextEditorButton.tsx                  |   2 +-
 packages/picasso-tailwind/package.json        |   4 +-
 packages/picasso-tailwind/src/index.js        |   1 -
 packages/picasso/README.md                    |  18 +-
 tailwind.config.js                            |   3 -
 yarn.lock                                     | 419 +++++++++++-------
 113 files changed, 829 insertions(+), 636 deletions(-)
 create mode 100644 .changeset/sharp-cases-cry.md
 create mode 100644 .nvmrc

diff --git a/.changeset/sharp-cases-cry.md b/.changeset/sharp-cases-cry.md
new file mode 100644
index 0000000000..c72259b478
--- /dev/null
+++ b/.changeset/sharp-cases-cry.md
@@ -0,0 +1,52 @@
+---
+'@toptal/picasso-rich-text-editor': major
+'@toptal/picasso-input-adornment': major
+'@toptal/picasso-account-select': major
+'@toptal/picasso-outlined-input': major
+'@toptal/picasso-overview-block': major
+'@toptal/picasso-autocomplete': major
+'@toptal/picasso-avatar-upload': major
+'@toptal/picasso-notification': major
+'@toptal/picasso-number-input': major
+'@toptal/picasso-prompt-modal': major
+'@toptal/picasso-tagselector': major
+'@toptal/picasso-tailwind': major
+'@toptal/picasso-date-picker': major
+'@toptal/picasso-date-select': major
+'@toptal/picasso-pagination': major
+'@toptal/picasso-test-utils': major
+'@toptal/picasso-timepicker': major
+'@toptal/picasso-typography': major
+'@toptal/picasso-accordion': major
+'@toptal/picasso-file-input': major
+'@toptal/base-tailwind': major
+'@toptal/picasso-backdrop': major
+'@toptal/picasso-calendar': major
+'@toptal/picasso-dropdown': major
+'@toptal/picasso-show-more': major
+'@toptal/picasso-forms': major
+'@toptal/picasso-helpbox': major
+'@toptal/picasso-section': major
+'@toptal/picasso-avatar': major
+'@toptal/picasso-button': major
+'@toptal/picasso-select': major
+'@toptal/picasso-slider': major
+'@toptal/picasso-alert': major
+'@toptal/picasso-badge': major
+'@toptal/picasso-input': major
+'@toptal/picasso-modal': major
+'@toptal/picasso-table': major
+'@toptal/picasso-utils': major
+'@toptal/picasso-form': major
+'@toptal/picasso-link': major
+'@toptal/picasso-menu': major
+'@toptal/picasso-page': major
+'@toptal/picasso-tabs': major
+'@toptal/picasso-tag': major
+---
+
+Upgraded Tailwind CSS from v3 to v4:
+
+- updated `tailwindcss` peer dependency from `^3.4.10` to `^4.2.1`
+- updated deprecated utility classes
+- min node version is 20 or higher
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000000..2edeafb09d
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
\ No newline at end of file
diff --git a/.storybook/main.js b/.storybook/main.js
index 34f626c3da..e3fea671e0 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -73,10 +73,7 @@ module.exports = {
         postcssOptions: {
           config: false,
           plugins: {
-            tailwindcss: {
-              config: require.resolve('../tailwind.config.js'),
-            },
-            autoprefixer: {},
+            '@tailwindcss/postcss': {},
           },
         },
       },
diff --git a/.storybook/styles.css b/.storybook/styles.css
index b5c61c9567..11e7ce9e76 100644
--- a/.storybook/styles.css
+++ b/.storybook/styles.css
@@ -1,3 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css';
+@config "../tailwind.config.js";
diff --git a/cypress.config.mjs b/cypress.config.mjs
index 32880f7255..85e86972ca 100644
--- a/cypress.config.mjs
+++ b/cypress.config.mjs
@@ -65,10 +65,7 @@ export default defineConfig({
                   postcssOptions: {
                     config: false,
                     plugins: {
-                      tailwindcss: {
-                        config: './tailwind.config.js',
-                      },
-                      autoprefixer: {},
+                      '@tailwindcss/postcss': {},
                     },
                   },
                 },
diff --git a/cypress/assets/tailwind.css b/cypress/assets/tailwind.css
index b5c61c9567..7a56098bf1 100644
--- a/cypress/assets/tailwind.css
+++ b/cypress/assets/tailwind.css
@@ -1,3 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css';
+@config "../../tailwind.config.js";
diff --git a/package.json b/package.json
index 6664530444..838789fae0 100644
--- a/package.json
+++ b/package.json
@@ -191,7 +191,8 @@
     "react-test-renderer": "^19.2.0",
     "remark-gfm": "^4.0.0",
     "syncpack": "^13.0.2",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.1",
     "thread-loader": "^4.0.2",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
@@ -205,7 +206,7 @@
     "@nx/js": "21.5.1"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "files": [
     "src"
diff --git a/packages/base-tailwind/package.json b/packages/base-tailwind/package.json
index 96a7274eb7..38c54f51fb 100644
--- a/packages/base-tailwind/package.json
+++ b/packages/base-tailwind/package.json
@@ -24,10 +24,10 @@
     "prepublishOnly": "yarn build:package"
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.10"
+    "tailwindcss": "^4.2.1"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.4.10"
+    "tailwindcss": "^4.2.1"
   },
   "sideEffects": false,
   "files": [
diff --git a/packages/base-tailwind/src/index.js b/packages/base-tailwind/src/index.js
index 71a8f2c911..3a707f60c9 100644
--- a/packages/base-tailwind/src/index.js
+++ b/packages/base-tailwind/src/index.js
@@ -1,4 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  theme: {},
+  theme: {
+    extend: {
+      lineHeight: {
+        5: '1.25rem',
+      },
+    },
+  },
 }
diff --git a/packages/base/Accordion/src/Accordion/Accordion.tsx b/packages/base/Accordion/src/Accordion/Accordion.tsx
index 5dc151e139..7e44bfa7e6 100644
--- a/packages/base/Accordion/src/Accordion/Accordion.tsx
+++ b/packages/base/Accordion/src/Accordion/Accordion.tsx
@@ -145,7 +145,9 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
         >
           {children}
           {expandIcon ? (
-            decorateWithExpandIconClasses(expandIcon, expandIconClass)
+            <ButtonAction
+              icon={decorateWithExpandIconClasses(expandIcon, expandIconClass)}
+            />
           ) : (
             <div className={classes.expandIconAlignTop}>
               <ButtonAction
diff --git a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
index efbc96b2c8..ddd6fb4d5d 100644
--- a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
+++ b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
@@ -29,7 +29,7 @@ exports[`Accordion renders collapsed by default 1`] = `
           >
             <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-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+              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 border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
               data-component-type="button"
               role="button"
               tabindex="0"
@@ -108,10 +108,23 @@ exports[`Accordion renders custom icon when passed 1`] = `
           >
             What is a dog?
           </div>
-          <span
-            class="PicassoAccordion-expandIcon"
-            data-testid="custom-expand-icon"
-          />
+          <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 border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+            data-component-type="button"
+            role="button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="items-center inline-flex font-semibold text-blue text-md"
+            >
+              <span
+                class="text-[1.2em] flex-1 w-4 h-4 text-graphite PicassoAccordion-expandIcon"
+                data-testid="custom-expand-icon"
+              />
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -175,7 +188,7 @@ exports[`Accordion renders disabled 1`] = `
           >
             <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-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+              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 border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
               data-component-type="button"
               role="button"
               tabindex="0"
diff --git a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
index be721cdb54..f5b752538b 100644
--- a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
@@ -6,13 +6,13 @@ exports[`AccountSelect renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="relative list-none outline-none shadow-1 m-0 rounded-sm p-0"
+      class="relative list-none outline-hidden shadow-1 m-0 rounded-sm p-0"
       role="menu"
       tabindex="-1"
     >
       <li
         aria-disabled="false"
-        class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 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-none appearance-none leading-4 h-auto [&+&]:border-t border-0 border-solid border-gray"
+        class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 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 h-auto [&+&]:border-t border-0 border-solid border-gray"
         role="menuitem"
         tabindex="0"
       >
@@ -26,7 +26,7 @@ exports[`AccountSelect renders 1`] = `
               class="flex items-center"
             >
               <a
-                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline cursor-pointer flex-1"
+                class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline no-underline! cursor-pointer flex-1"
               >
                 <div
                   class="p-6 items-center justify-between flex"
@@ -89,7 +89,7 @@ exports[`AccountSelect renders 1`] = `
       </li>
       <li
         aria-disabled="false"
-        class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 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-none appearance-none leading-4 h-auto [&+&]:border-t border-0 border-solid border-gray"
+        class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 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 h-auto [&+&]:border-t border-0 border-solid border-gray"
         role="menuitem"
         tabindex="-1"
       >
@@ -103,7 +103,7 @@ exports[`AccountSelect renders 1`] = `
               class="flex items-center"
             >
               <a
-                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline cursor-pointer flex-1"
+                class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline no-underline! cursor-pointer flex-1"
                 href="#"
               >
                 <div
@@ -167,7 +167,7 @@ exports[`AccountSelect renders 1`] = `
       </li>
       <li
         aria-disabled="false"
-        class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 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-none appearance-none leading-4 h-auto [&+&]:border-t border-0 border-solid border-gray"
+        class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 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 h-auto [&+&]:border-t border-0 border-solid border-gray"
         role="menuitem"
         tabindex="-1"
       >
@@ -181,7 +181,7 @@ exports[`AccountSelect renders 1`] = `
               class="flex items-center"
             >
               <a
-                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline cursor-pointer flex-1"
+                class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline no-underline! cursor-pointer flex-1"
                 href="#"
               >
                 <div
diff --git a/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap b/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
index cd81c3c89d..29ef72b626 100644
--- a/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
+++ b/packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
@@ -42,7 +42,7 @@ exports[`Alert renders 1`] = `
           >
             <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-none [[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-6 py-0 px-3"
+              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-6 py-0 px-3"
               data-component-type="button"
               data-testid="action-button"
               role="button"
@@ -61,7 +61,7 @@ exports[`Alert renders 1`] = `
           >
             <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-none [[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-6 py-0 px-3"
+              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-6 py-0 px-3"
               data-component-type="button"
               data-testid="action-button"
               role="button"
diff --git a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
index f9c47885a8..49c62eedd2 100644
--- a/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Autocomplete/src/Autocomplete/__snapshots__/test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Autocomplete dynamic behavior on focus 1`] = `
 <ul
-  class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+  class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
   data-testid="scroll-menu"
   role="menu"
   tabindex="-1"
@@ -16,7 +16,7 @@ exports[`Autocomplete dynamic behavior on focus 1`] = `
       <li
         aria-disabled="false"
         aria-selected="true"
-        class="text-black bg-blue 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-none appearance-none leading-4"
+        class="text-black bg-blue 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"
         data-testid="menu-item-0"
         role="option"
         tabindex="-1"
@@ -42,7 +42,7 @@ exports[`Autocomplete dynamic behavior on focus 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-1"
         role="option"
         tabindex="-1"
@@ -68,7 +68,7 @@ exports[`Autocomplete dynamic behavior on focus 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-2"
         role="option"
         tabindex="-1"
@@ -94,7 +94,7 @@ exports[`Autocomplete dynamic behavior on focus 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-3"
         role="option"
         tabindex="-1"
@@ -120,7 +120,7 @@ exports[`Autocomplete dynamic behavior on focus 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-4"
         role="option"
         tabindex="-1"
@@ -160,7 +160,7 @@ exports[`Autocomplete dynamic behavior renders custom other options text and cal
 <li
   aria-disabled="false"
   aria-selected="false"
-  class="text-black bg-transparent hover:bg-blue focus:bg-blue 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-none appearance-none leading-4 px-4 border-gray border-solid border-0 border-t"
+  class="text-black bg-transparent hover:bg-blue focus:bg-blue 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 px-4 border-gray border-solid border-0 border-t"
   data-testid="other-option"
   role="option"
   tabindex="-1"
@@ -194,7 +194,7 @@ exports[`Autocomplete dynamic behavior renders other option with default text 1`
 <li
   aria-disabled="false"
   aria-selected="false"
-  class="text-black bg-transparent hover:bg-blue focus:bg-blue 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-none appearance-none leading-4 px-4 border-gray border-solid border-0 border-t"
+  class="text-black bg-transparent hover:bg-blue focus:bg-blue 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 px-4 border-gray border-solid border-0 border-t"
   data-testid="other-option"
   role="option"
   tabindex="-1"
@@ -245,18 +245,18 @@ exports[`Autocomplete static behavior renders 1`] = `
             aria-autocomplete="list"
             aria-invalid="false"
             autocomplete="off"
-            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             data-testid="autocomplete"
             type="text"
             value=""
           />
           <div
-            class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto invisible"
+            class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto grow-0 shrink-0 basis-auto invisible"
             data-testid="reset-adornment"
           >
             <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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
+              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 rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
               data-component-type="button"
               role="reset"
               tabindex="-1"
@@ -289,7 +289,7 @@ exports[`Autocomplete static behavior renders 1`] = `
 
 exports[`Autocomplete static behavior renders a loading indicator 1`] = `
 <div
-  class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto pointer-events"
+  class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto grow-0 shrink-0 basis-auto pointer-events"
   data-testid="loading-adornment"
 >
   <div
@@ -324,7 +324,7 @@ exports[`Autocomplete static behavior renders a loading indicator 1`] = `
 
 exports[`Autocomplete static behavior renders custom display value 1`] = `
 <ul
-  class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+  class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
   data-testid="scroll-menu"
   role="menu"
   tabindex="-1"
@@ -338,7 +338,7 @@ exports[`Autocomplete static behavior renders custom display value 1`] = `
       <li
         aria-disabled="false"
         aria-selected="true"
-        class="text-black bg-blue 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-none appearance-none leading-4"
+        class="text-black bg-blue 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"
         data-testid="menu-item-0"
         role="option"
         tabindex="-1"
@@ -364,7 +364,7 @@ exports[`Autocomplete static behavior renders custom display value 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-1"
         role="option"
         tabindex="-1"
@@ -390,7 +390,7 @@ exports[`Autocomplete static behavior renders custom display value 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-2"
         role="option"
         tabindex="-1"
@@ -416,7 +416,7 @@ exports[`Autocomplete static behavior renders custom display value 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-3"
         role="option"
         tabindex="-1"
@@ -442,7 +442,7 @@ exports[`Autocomplete static behavior renders custom display value 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-4"
         role="option"
         tabindex="-1"
@@ -472,7 +472,7 @@ exports[`Autocomplete static behavior renders custom display value 1`] = `
 
 exports[`Autocomplete static behavior renders custom options with custom keys 1`] = `
 <ul
-  class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+  class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
   data-testid="scroll-menu"
   role="menu"
   tabindex="-1"
@@ -486,7 +486,7 @@ exports[`Autocomplete static behavior renders custom options with custom keys 1`
       <li
         aria-disabled="false"
         aria-selected="true"
-        class="text-black bg-blue 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-none appearance-none leading-4"
+        class="text-black bg-blue 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"
         data-testid="menu-item-0"
         role="option"
         tabindex="-1"
@@ -512,7 +512,7 @@ exports[`Autocomplete static behavior renders custom options with custom keys 1`
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-1"
         role="option"
         tabindex="-1"
@@ -538,7 +538,7 @@ exports[`Autocomplete static behavior renders custom options with custom keys 1`
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-2"
         role="option"
         tabindex="-1"
@@ -564,7 +564,7 @@ exports[`Autocomplete static behavior renders custom options with custom keys 1`
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-3"
         role="option"
         tabindex="-1"
@@ -590,7 +590,7 @@ exports[`Autocomplete static behavior renders custom options with custom keys 1`
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-testid="menu-item-4"
         role="option"
         tabindex="-1"
@@ -623,7 +623,7 @@ exports[`Autocomplete static behavior uses a custom popper container 1`] = `
   aria-autocomplete="list"
   aria-invalid="false"
   autocomplete="off"
-  class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+  class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
   data-testid="autocomplete"
   type="text"
   value=""
diff --git a/packages/base/Avatar/src/Avatar/AvatarEditContainer/AvatarEditContainer.tsx b/packages/base/Avatar/src/Avatar/AvatarEditContainer/AvatarEditContainer.tsx
index 144da50cfc..acfd076eda 100644
--- a/packages/base/Avatar/src/Avatar/AvatarEditContainer/AvatarEditContainer.tsx
+++ b/packages/base/Avatar/src/Avatar/AvatarEditContainer/AvatarEditContainer.tsx
@@ -36,7 +36,7 @@ export const AvatarEditContainer = ({ size = 'small', ...props }: Props) => {
     <button
       className={twJoin(
         'border-none cursor-pointer absolute left-0 top-0 flex justify-center',
-        'items-center outline-none bg-transparent',
+        'items-center outline-hidden bg-transparent',
         rootClassBySize[size]
       )}
       data-testid={dataTestId}
diff --git a/packages/base/Avatar/src/AvatarDropzoneSvg/AvatarDropzoneSvg.tsx b/packages/base/Avatar/src/AvatarDropzoneSvg/AvatarDropzoneSvg.tsx
index b4199b12ef..8594e9c5fd 100644
--- a/packages/base/Avatar/src/AvatarDropzoneSvg/AvatarDropzoneSvg.tsx
+++ b/packages/base/Avatar/src/AvatarDropzoneSvg/AvatarDropzoneSvg.tsx
@@ -95,8 +95,7 @@ export const DropzoneSvg = ({ size = 'small', ...props }: Props) => {
         />
         <path
           className={twJoin(
-            'hidden',
-            focused && !isDragActive && '[display:initial]',
+            focused && !isDragActive ? '[display:initial]' : 'hidden',
             error ? 'stroke-red-500' : 'stroke-blue-500'
           )}
           fillRule='evenodd'
diff --git a/packages/base/AvatarUpload/src/AvatarUpload/AvatarUpload.tsx b/packages/base/AvatarUpload/src/AvatarUpload/AvatarUpload.tsx
index e6a2473e62..50c8718dd3 100644
--- a/packages/base/AvatarUpload/src/AvatarUpload/AvatarUpload.tsx
+++ b/packages/base/AvatarUpload/src/AvatarUpload/AvatarUpload.tsx
@@ -170,7 +170,7 @@ export const AvatarUpload = forwardRef<HTMLElement, Props>(
         style={style}
         {...getRootProps({
           className: twJoin(
-            'relative flex justify-center items-center text-blue-500 outline-none cursor-pointer',
+            'relative flex justify-center items-center text-blue-500 outline-hidden cursor-pointer',
             rootClassBySize[size],
             disabled && 'cursor-no-drop',
             showAvatar && 'cursor-default'
diff --git a/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap b/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
index 180d226cf7..0d596b99c8 100644
--- a/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
+++ b/packages/base/AvatarUpload/src/AvatarUpload/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`AvatarUpload renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="relative flex justify-center items-center text-blue outline-none cursor-pointer w-[5rem] h-[5rem]"
+      class="relative flex justify-center items-center text-blue outline-hidden cursor-pointer w-[5rem] h-[5rem]"
       role="presentation"
       tabindex="0"
     >
diff --git a/packages/base/Backdrop/package.json b/packages/base/Backdrop/package.json
index 6c2bc4bf0d..cfdfbf3c24 100644
--- a/packages/base/Backdrop/package.json
+++ b/packages/base/Backdrop/package.json
@@ -30,8 +30,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@toptal/picasso-tailwind": ">2.1.0",
-    "react": ">=16.12.0 < 19.0.0",
-    "tailwindcss": ">=3"
+    "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
diff --git a/packages/base/Backdrop/src/Backdrop/Backdrop.tsx b/packages/base/Backdrop/src/Backdrop/Backdrop.tsx
index 5511c134ef..49ee3b9e3d 100644
--- a/packages/base/Backdrop/src/Backdrop/Backdrop.tsx
+++ b/packages/base/Backdrop/src/Backdrop/Backdrop.tsx
@@ -33,8 +33,8 @@ export const Backdrop = React.forwardRef<HTMLDivElement, Props>(
           className={cx(
             'fixed -z-[1] inset-0 bg-black ',
             '-webkit-tap-highlight-color-transparent',
-            { 'bg-opacity-0': invisible },
-            { 'bg-opacity-50': !invisible }
+            { 'bg-black/0': invisible },
+            { 'bg-black/50': !invisible }
           )}
           ref={ref}
           {...rest}
diff --git a/packages/base/Backdrop/src/Backdrop/test.tsx b/packages/base/Backdrop/src/Backdrop/test.tsx
index 7c84bbcf81..b57e29c61e 100644
--- a/packages/base/Backdrop/src/Backdrop/test.tsx
+++ b/packages/base/Backdrop/src/Backdrop/test.tsx
@@ -16,7 +16,7 @@ describe('Backdrop component', () => {
         <Backdrop data-testid='backdrop' open={true} invisible={true} />
       )
 
-      expect(getByTestId('backdrop')).toHaveClass('bg-opacity-0')
+      expect(getByTestId('backdrop')).toHaveClass('bg-black/0')
     })
   })
 
@@ -26,7 +26,7 @@ describe('Backdrop component', () => {
         <Backdrop data-testid='backdrop' open={true} />
       )
 
-      expect(getByTestId('backdrop')).toHaveClass('bg-opacity-50')
+      expect(getByTestId('backdrop')).toHaveClass('bg-black/50')
     })
   })
 
diff --git a/packages/base/Badge/src/Badge/Badge.tsx b/packages/base/Badge/src/Badge/Badge.tsx
index fbd18737de..95653bca93 100644
--- a/packages/base/Badge/src/Badge/Badge.tsx
+++ b/packages/base/Badge/src/Badge/Badge.tsx
@@ -53,7 +53,7 @@ export const Badge = forwardRef<HTMLDivElement, Props>(function Badge(
       slotProps={{
         root: {
           className: twMerge(
-            `inline-flex flex-shrink-0 content-middle flex-nowrap justify-normal 
+            `inline-flex shrink-0 content-middle flex-nowrap justify-normal
             text-[10px] font-semibold leading-3 align-middle text-graphite-700`,
             hasChildren ? 'relative' : 'static',
             className
diff --git a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
index c7a4434872..095cf0ec50 100644
--- a/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
+++ b/packages/base/Badge/src/Badge/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Badge renders 1`] = `
     class="Picasso-root"
   >
     <span
-      class="base-Badge inline-flex flex-shrink content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
+      class="base-Badge inline-flex shrink-0 content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
     >
       <span
         class="base-Badge border-solid items-center content-center inline-flex flex-nowrap justify-center z-[1] border rounded-full bg-white text-graphite border-gray static px-[3px] h-[1.25rem] min-w"
@@ -24,7 +24,7 @@ exports[`Badge renders in red variant 1`] = `
     class="Picasso-root"
   >
     <span
-      class="base-Badge inline-flex flex-shrink content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
+      class="base-Badge inline-flex shrink-0 content-middle flex-nowrap justify-normal text-[10px] font-semibold leading-3 align-middle text-graphite static"
     >
       <span
         class="base-Badge border-solid items-center content-center inline-flex flex-nowrap justify-center z-[1] border rounded-full text-white bg-red border-red static px-[3px] h-[1.25rem] min-w"
diff --git a/packages/base/Button/src/Button/__snapshots__/test.tsx.snap b/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
index a9dece1850..666e832b5d 100644
--- a/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/Button/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ 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-hidden 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-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"
       data-component-type="button"
       href="URL"
       role="button"
@@ -31,7 +31,7 @@ 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 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-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"
       data-component-type="button"
       disabled=""
       role="button"
diff --git a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
index fed0ad7108..9322d3ac0e 100644
--- a/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
   >
     <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-none [[data-component-type="button"]+&]:ml cursor-pointer"
+      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"
       data-component-type="button"
       href="/"
       role="button"
@@ -31,7 +31,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
   >
     <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-none [[data-component-type="button"]+&]:ml cursor-pointer"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -55,7 +55,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   >
     <a
       aria-disabled="false"
-      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-pointer"
+      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"
       data-component-type="button"
       href="URL"
       role="button"
@@ -79,7 +79,7 @@ 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-hidden 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-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events"
       data-component-type="button"
       href="URL"
       role="button"
@@ -103,7 +103,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   >
     <a
       aria-disabled="false"
-      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-pointer"
+      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"
       data-component-type="button"
       href=""
       role="button"
@@ -127,7 +127,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "a" renders B
   >
     <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-none [[data-component-type="button"]+&]:ml cursor-pointer"
+      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"
       data-component-type="button"
       href="/"
       role="button"
@@ -151,7 +151,7 @@ exports[`ButtonBase when "disabled" prop is false renders Button and does not tr
   >
     <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-none [[data-component-type="button"]+&]:ml cursor-pointer"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -174,7 +174,7 @@ 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 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-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events"
       data-component-type="button"
       disabled=""
       role="button"
@@ -198,7 +198,7 @@ exports[`ButtonBase when "loading" prop is true renders Button with loading stat
   >
     <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-none [[data-component-type="button"]+&]:ml cursor-pointer"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -248,7 +248,7 @@ exports[`ButtonBase when "role" prop is passed renders Button with a custom role
   >
     <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-none [[data-component-type="button"]+&]:ml cursor-pointer"
+      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"
       data-component-type="button"
       role="custom"
       tabindex="0"
@@ -271,7 +271,7 @@ exports[`ButtonBase when "titleCase" prop is true renders Button with transforme
   >
     <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-none [[data-component-type="button"]+&]:ml cursor-pointer"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
diff --git a/packages/base/Button/src/ButtonBase/styles.ts b/packages/base/Button/src/ButtonBase/styles.ts
index 2191e87843..4e26da8106 100644
--- a/packages/base/Button/src/ButtonBase/styles.ts
+++ b/packages/base/Button/src/ButtonBase/styles.ts
@@ -21,7 +21,7 @@ export const createCoreClassNames = ({
     'duration-350',
     'ease-out',
     'shrink-0',
-    'outline-none',
+    'outline-hidden',
     '[[data-component-type="button"]+&]:ml-4',
   ]
 
diff --git a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
index 8820bb31cf..e55957a1cb 100644
--- a/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonCheckbox/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`ButtonCheckbox renders 1`] = `
   >
     <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-none [[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"
+      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"
       role="button"
       tabindex="0"
diff --git a/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
index df65786d8d..ef599dcdf8 100644
--- a/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonGroup/__snapshots__/test.tsx.snap
@@ -11,7 +11,7 @@ exports[`ButtonGroup render 1`] = `
     >
       <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 duration-350 ease-out shrink-0 outline-none [[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 bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle 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 bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -25,7 +25,7 @@ exports[`ButtonGroup render 1`] = `
       </button>
       <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 duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm 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 min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black bg-graphite border-graphite text-white shadow-none"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm 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 min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black bg-graphite border-graphite text-white shadow-none"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -39,7 +39,7 @@ exports[`ButtonGroup render 1`] = `
       </button>
       <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 duration-350 ease-out shrink-0 outline-none [[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 bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle 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 bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
         data-component-type="button"
         role="button"
         tabindex="0"
diff --git a/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
index 711814242e..e53640098e 100644
--- a/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonRadio/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`ButtonRadio renders 1`] = `
   >
     <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-none [[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"
+      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"
       role="button"
       tabindex="0"
diff --git a/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap b/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
index 35b9d08491..b081a9f8f9 100644
--- a/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
+++ b/packages/base/Button/src/ButtonSplit/__snapshots__/test.tsx.snap
@@ -23,7 +23,7 @@ exports[`ButtonSplit default render 1`] = `
     >
       <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 duration-350 ease-out shrink-0 outline-none [[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)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4 active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] transition-[color,background] border-r border-l border-y border-solid border-blue"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle 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)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4 active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] transition-[color,background] border-r border-l border-y border-solid border-blue"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -43,7 +43,7 @@ exports[`ButtonSplit default render 1`] = `
         >
           <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 duration-350 ease-out shrink-0 outline-none [[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)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue h-8 py-0 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] min-w px-[0.5em] border-l border-r border-y border-solid border-blue"
+            class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle 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)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue h-8 py-0 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] min-w px-[0.5em] border-l border-r border-y border-solid border-blue"
             data-component-type="button"
             role="button"
             tabindex="0"
diff --git a/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
index d22d9b66ec..9385c264e9 100644
--- a/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
+++ b/packages/base/Calendar/src/Calendar/__snapshots__/test.tsx.snap
@@ -24,7 +24,7 @@ exports[`Calendar renders 1`] = `
                 <button
                   aria-disabled="false"
                   aria-label="Previous month"
-                  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-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
+                  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 rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
                   data-component-type="button"
                   role="button"
                   tabindex="0"
@@ -55,7 +55,7 @@ exports[`Calendar renders 1`] = `
                 <button
                   aria-disabled="false"
                   aria-label="Next month"
-                  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-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
+                  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 rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
                   data-component-type="button"
                   role="button"
                   tabindex="0"
@@ -150,7 +150,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-11-25"
                         data-testid="day-button-25"
                         type="button"
@@ -164,7 +164,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-11-26"
                         data-testid="day-button-26"
                         type="button"
@@ -178,7 +178,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-11-27"
                         data-testid="day-button-27"
                         type="button"
@@ -192,7 +192,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-11-28"
                         data-testid="day-button-28"
                         type="button"
@@ -206,7 +206,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-11-29"
                         data-testid="day-button-29"
                         type="button"
@@ -220,7 +220,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-11-30"
                         data-testid="day-button-30"
                         type="button"
@@ -234,7 +234,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-01"
                         data-testid="day-button-1"
                         type="button"
@@ -252,7 +252,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-02"
                         data-testid="day-button-2"
                         type="button"
@@ -266,7 +266,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-03"
                         data-testid="day-button-3"
                         type="button"
@@ -280,7 +280,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-04"
                         data-testid="day-button-4"
                         type="button"
@@ -294,7 +294,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-05"
                         data-testid="day-button-5"
                         type="button"
@@ -308,7 +308,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-06"
                         data-testid="day-button-6"
                         type="button"
@@ -322,7 +322,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-07"
                         data-testid="day-button-7"
                         type="button"
@@ -336,7 +336,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-08"
                         data-testid="day-button-8"
                         type="button"
@@ -354,7 +354,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-09"
                         data-testid="day-button-9"
                         type="button"
@@ -368,7 +368,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-10"
                         data-testid="day-button-10"
                         type="button"
@@ -382,7 +382,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-11"
                         data-testid="day-button-11"
                         type="button"
@@ -396,7 +396,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-white bg-blue border-none rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-white bg-blue border-none rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-12"
                         data-testid="day-button-selected"
                         type="button"
@@ -410,7 +410,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-13"
                         data-testid="day-button-13"
                         type="button"
@@ -424,7 +424,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-14"
                         data-testid="day-button-14"
                         type="button"
@@ -438,7 +438,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-15"
                         data-testid="day-button-15"
                         type="button"
@@ -456,7 +456,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-16"
                         data-testid="day-button-16"
                         type="button"
@@ -470,7 +470,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-17"
                         data-testid="day-button-17"
                         type="button"
@@ -484,7 +484,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-18"
                         data-testid="day-button-18"
                         type="button"
@@ -498,7 +498,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-19"
                         data-testid="day-button-19"
                         type="button"
@@ -512,7 +512,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-20"
                         data-testid="day-button-20"
                         type="button"
@@ -526,7 +526,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-21"
                         data-testid="day-button-21"
                         type="button"
@@ -540,7 +540,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-22"
                         data-testid="day-button-22"
                         type="button"
@@ -558,7 +558,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-23"
                         data-testid="day-button-23"
                         type="button"
@@ -572,7 +572,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-24"
                         data-testid="day-button-24"
                         type="button"
@@ -586,7 +586,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-25"
                         data-testid="day-button-25"
                         type="button"
@@ -600,7 +600,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-26"
                         data-testid="day-button-26"
                         type="button"
@@ -614,7 +614,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-27"
                         data-testid="day-button-27"
                         type="button"
@@ -628,7 +628,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-28"
                         data-testid="day-button-28"
                         type="button"
@@ -642,7 +642,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-29"
                         data-testid="day-button-29"
                         type="button"
@@ -660,7 +660,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-30"
                         data-testid="day-button-30"
                         type="button"
@@ -674,7 +674,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2019-12-31"
                         data-testid="day-button-31"
                         type="button"
@@ -688,7 +688,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2020-01-01"
                         data-testid="day-button-1"
                         type="button"
@@ -702,7 +702,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2020-01-02"
                         data-testid="day-button-2"
                         type="button"
@@ -716,7 +716,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2020-01-03"
                         data-testid="day-button-3"
                         type="button"
@@ -730,7 +730,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2020-01-04"
                         data-testid="day-button-4"
                         type="button"
@@ -744,7 +744,7 @@ exports[`Calendar renders 1`] = `
                       role="presentation"
                     >
                       <button
-                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
+                        class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-hidden text-gray bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
                         data-calendar-day="2020-01-05"
                         data-testid="day-button-5"
                         type="button"
diff --git a/packages/base/Calendar/src/CalendarDay/CalendarDay.tsx b/packages/base/Calendar/src/CalendarDay/CalendarDay.tsx
index ba22cf875a..7edcec6ccf 100644
--- a/packages/base/Calendar/src/CalendarDay/CalendarDay.tsx
+++ b/packages/base/Calendar/src/CalendarDay/CalendarDay.tsx
@@ -109,7 +109,7 @@ const CalendarDay = (dayProps: DayProps): JSX.Element => {
         'text-[0.75rem]',
         'flex items-center justify-center vertical-align-middle relative',
         'user-select-none',
-        'outline-none',
+        'outline-hidden',
         stateDependentClasses
       )}
       onClick={isDisabled ? undefined : event => buttonProps?.onClick?.(event)}
diff --git a/packages/base/Collapse/package.json b/packages/base/Collapse/package.json
index ee0fe51aa3..7c13b99fcc 100644
--- a/packages/base/Collapse/package.json
+++ b/packages/base/Collapse/package.json
@@ -29,8 +29,7 @@
   "peerDependencies": {
     "@toptal/picasso-tailwind": ">=2.1.0",
     "@toptal/picasso-tailwind-merge": "^2.0.0",
-    "react": ">=16.12.0 < 19.0.0",
-    "tailwindcss": ">=3"
+    "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
diff --git a/packages/base/DatePicker/src/DatePicker/DatePicker.tsx b/packages/base/DatePicker/src/DatePicker/DatePicker.tsx
index a80952190c..94ef34da37 100644
--- a/packages/base/DatePicker/src/DatePicker/DatePicker.tsx
+++ b/packages/base/DatePicker/src/DatePicker/DatePicker.tsx
@@ -446,7 +446,7 @@ export const DatePicker = ({
                 indicatedIntervals={indicatedIntervals}
                 renderDay={renderDay}
                 onChange={handleCalendarChange}
-                className='outline-none'
+                className='outline-hidden'
                 hasFooter={Boolean(footer)}
                 weekStartsOn={weekStartsOn}
                 numberOfMonths={numberOfMonths}
diff --git a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
index 929e0ac325..637f2bcda1 100644
--- a/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/DatePicker/src/DatePicker/__snapshots__/test.tsx.snap
@@ -27,7 +27,7 @@ exports[`DatePicker renders 1`] = `
         <input
           aria-invalid="false"
           autocomplete="off"
-          class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+          class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
           type="text"
           value="Dec 12, 2019"
         />
diff --git a/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap b/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
index 6d838e7b7f..6dae5ccbf4 100644
--- a/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/MonthSelect/__snapshots__/test.tsx.snap
@@ -18,7 +18,7 @@ exports[`MonthSelect renders 1`] = `
           <input
             aria-invalid="false"
             autocomplete="off"
-            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             readonly=""
             size="1"
             type="text"
diff --git a/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap b/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
index 351cf03486..92279bfbc6 100644
--- a/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/DateSelect/src/YearSelect/__snapshots__/test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`YearSelect render in descending order 1`] = `
 <ul
-  class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+  class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
   role="listbox"
   tabindex="-1"
 >
@@ -15,7 +15,7 @@ exports[`YearSelect render in descending order 1`] = `
       <li
         aria-disabled="false"
         aria-selected="false"
-        class="text-black bg-blue 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-none appearance-none leading-4"
+        class="text-black bg-blue 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"
         data-highlighted="true"
         role="option"
         tabindex="-1"
@@ -45,7 +45,7 @@ exports[`YearSelect render in descending order 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-highlighted="false"
         role="option"
         tabindex="-1"
@@ -75,7 +75,7 @@ exports[`YearSelect render in descending order 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-highlighted="false"
         role="option"
         tabindex="-1"
@@ -105,7 +105,7 @@ exports[`YearSelect render in descending order 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-highlighted="false"
         role="option"
         tabindex="-1"
@@ -135,7 +135,7 @@ exports[`YearSelect render in descending order 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-highlighted="false"
         role="option"
         tabindex="-1"
@@ -185,7 +185,7 @@ exports[`YearSelect renders 1`] = `
           <input
             aria-invalid="false"
             autocomplete="off"
-            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             readonly=""
             size="1"
             type="text"
diff --git a/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap b/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
index 3124763d59..7b779125c7 100644
--- a/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
+++ b/packages/base/Dropdown/src/Dropdown/__snapshots__/test.tsx.snap
@@ -70,13 +70,13 @@ exports[`Dropdown should render menu 1`] = `
           >
             <div>
               <ul
-                class="relative list-none outline-none shadow-1 py-2 px-0 m-0 rounded-sm"
+                class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm"
                 role="menu"
                 tabindex="-1"
               >
                 <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-none appearance-none leading-4"
+                  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"
                   role="menuitem"
                   tabindex="0"
                 >
@@ -100,7 +100,7 @@ exports[`Dropdown should render menu 1`] = `
                 </li>
                 <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-none appearance-none leading-4"
+                  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"
                   role="menuitem"
                   tabindex="-1"
                 >
@@ -124,7 +124,7 @@ exports[`Dropdown should render menu 1`] = `
                 </li>
                 <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-none appearance-none leading-4"
+                  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"
                   role="menuitem"
                   tabindex="-1"
                 >
@@ -200,13 +200,13 @@ exports[`Dropdown should render menu with focus 1`] = `
           >
             <div>
               <ul
-                class="relative list-none outline-none shadow-1 py-2 px-0 m-0 rounded-sm"
+                class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm"
                 role="menu"
                 tabindex="-1"
               >
                 <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-none appearance-none leading-4"
+                  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"
                   role="menuitem"
                   tabindex="0"
                 >
@@ -230,7 +230,7 @@ exports[`Dropdown should render menu with focus 1`] = `
                 </li>
                 <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-none appearance-none leading-4"
+                  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"
                   role="menuitem"
                   tabindex="-1"
                 >
@@ -254,7 +254,7 @@ exports[`Dropdown should render menu with focus 1`] = `
                 </li>
                 <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-none appearance-none leading-4"
+                  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"
                   role="menuitem"
                   tabindex="-1"
                 >
diff --git a/packages/base/Fade/package.json b/packages/base/Fade/package.json
index 94de13cfc3..b2ac134638 100644
--- a/packages/base/Fade/package.json
+++ b/packages/base/Fade/package.json
@@ -28,8 +28,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@toptal/picasso-tailwind": ">=2.1.0",
-    "react": ">=16.12.0 < 19.0.0",
-    "tailwindcss": ">=3"
+    "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
diff --git a/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
index dfdcc62ad3..559e3e3f12 100644
--- a/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileInput/__snapshots__/test.tsx.snap
@@ -10,7 +10,7 @@ exports[`FileInput can change label 1`] = `
     >
       <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-none [[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-6 py-0 px-3"
+        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-6 py-0 px-3"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -41,7 +41,7 @@ exports[`FileInput renders 1`] = `
     >
       <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-none [[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-6 py-0 px-3"
+        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-6 py-0 px-3"
         data-component-type="button"
         role="button"
         tabindex="0"
diff --git a/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
index 455f6db8a2..a14f82c0ed 100644
--- a/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileList/__snapshots__/test.tsx.snap
@@ -32,7 +32,7 @@ exports[`FileList renders 1`] = `
               </svg>
             </div>
             <p
-              class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
+              class="m-0 text-md text-black font-regular whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
             >
               user-profile-picture.png
             </p>
diff --git a/packages/base/FileInput/src/FileListItem/FileListItem.tsx b/packages/base/FileInput/src/FileListItem/FileListItem.tsx
index c4de287595..b0d53ba107 100644
--- a/packages/base/FileInput/src/FileListItem/FileListItem.tsx
+++ b/packages/base/FileInput/src/FileListItem/FileListItem.tsx
@@ -98,6 +98,7 @@ const FileListItem = ({ file, index, disabled, onRemove, testIds }: Props) => {
           content={error ? 'Dismiss' : 'Remove File'}
         >
           <ButtonCircular
+            className='shrink-0'
             variant='flat'
             onClick={handleRemove}
             disabled={disabled}
diff --git a/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap b/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
index e69272d061..163620caf3 100644
--- a/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
+++ b/packages/base/FileInput/src/FileListItem/__snapshots__/test.tsx.snap
@@ -29,7 +29,7 @@ exports[`FileListItem renders 1`] = `
             </svg>
           </div>
           <p
-            class="m-0 text-md text-black font-regular whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
+            class="m-0 text-md text-black font-regular whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
           >
             user-profile-picture.png
           </p>
@@ -40,7 +40,7 @@ exports[`FileListItem renders 1`] = `
       </div>
       <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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
+        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 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent shrink-0"
         data-component-type="button"
         role="button"
         tabindex="0"
diff --git a/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap b/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
index dccba40f3d..1e447a0b97 100644
--- a/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormError/__snapshots__/test.tsx.snap
@@ -27,7 +27,7 @@ exports[`FormError renders 1`] = `
           <input
             aria-invalid="false"
             autocomplete="none"
-            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             type="text"
             value=""
           />
diff --git a/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap b/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
index ce9086a220..657cd2281d 100644
--- a/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
+++ b/packages/base/Form/src/FormWarning/__snapshots__/test.tsx.snap
@@ -27,7 +27,7 @@ exports[`FormWarning renders 1`] = `
           <input
             aria-invalid="false"
             autocomplete="none"
-            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             type="text"
             value=""
           />
diff --git a/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap b/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
index 82afb3006a..5d6a93823e 100644
--- a/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
+++ b/packages/base/Helpbox/src/Helpbox/__snapshots__/test.tsx.snap
@@ -27,7 +27,7 @@ exports[`Helpbox renders 1`] = `
       >
         <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-none [[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"
+          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"
           data-component-type="button"
           role="button"
           tabindex="0"
diff --git a/packages/base/Input/src/Input/__snapshots__/test.tsx.snap b/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
index 3cb7770e3c..c922949e9c 100644
--- a/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
+++ b/packages/base/Input/src/Input/__snapshots__/test.tsx.snap
@@ -24,7 +24,7 @@ exports[`Input renders icon in the beginning 1`] = `
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         type="text"
         value=""
       />
@@ -57,7 +57,7 @@ exports[`Input renders icon in the end 1`] = `
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         type="text"
         value=""
       />
@@ -77,7 +77,7 @@ exports[`Input should show manual resize handler 1`] = `
       <textarea
         aria-invalid="false"
         autocomplete="none"
-        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 resize-y"
+        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 resize-y"
         style="height: 0px; overflow: hidden;"
         type="text"
       >
@@ -85,7 +85,7 @@ exports[`Input should show manual resize handler 1`] = `
       </textarea>
       <textarea
         aria-hidden="true"
-        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 resize-y"
+        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 resize-y"
         readonly=""
         style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px;"
         tabindex="-1"
@@ -106,17 +106,17 @@ exports[`Input should show reset button 1`] = `
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         type="text"
         value="Some value"
       />
       <div
-        class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto invisible peer-focus:visible peer-active:visible group-hover:visible"
+        class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto grow-0 shrink-0 basis-auto invisible peer-focus:visible peer-active:visible group-hover:visible"
         data-testid="reset-adornment"
       >
         <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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
+          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 rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
           data-component-type="button"
           role="reset"
           tabindex="-1"
@@ -153,13 +153,13 @@ exports[`Input shows counter for multiline input 1`] = `
       <textarea
         aria-invalid="false"
         autocomplete="none"
-        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         style="height: 0px; overflow: hidden;"
         type="text"
       />
       <textarea
         aria-hidden="true"
-        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+        class="base-Input base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         readonly=""
         style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px;"
         tabindex="-1"
@@ -183,7 +183,7 @@ exports[`Input shows counter for regular input 1`] = `
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         type="text"
         value=""
       />
diff --git a/packages/base/InputAdornment/src/InputAdornment/InputAdornment.tsx b/packages/base/InputAdornment/src/InputAdornment/InputAdornment.tsx
index 33ae624b54..61fab510c0 100644
--- a/packages/base/InputAdornment/src/InputAdornment/InputAdornment.tsx
+++ b/packages/base/InputAdornment/src/InputAdornment/InputAdornment.tsx
@@ -45,9 +45,8 @@ const InputAdornment = (props: Props) => {
       {...rest}
       className={twMerge(
         'text-graphite-700 h-auto flex items-center whitespace-nowrap max-h-[2em]',
-        disabled && 'text-opacity-[0.48]',
-        position === 'end' &&
-          'justify-end ml-auto flex-grow-0 flex-shrink-0 basis-auto',
+        disabled && 'text-graphite-700/48',
+        position === 'end' && 'justify-end ml-auto grow-0 shrink-0 basis-auto',
         disablePointerEvents && 'pointer-events-none',
         className
       )}
diff --git a/packages/base/Link/src/Link/Link.tsx b/packages/base/Link/src/Link/Link.tsx
index 43707bf045..6527e39c6a 100644
--- a/packages/base/Link/src/Link/Link.tsx
+++ b/packages/base/Link/src/Link/Link.tsx
@@ -30,7 +30,7 @@ const COLOR_DISABLED_MAP: Record<
 > = {
   blue: {
     action: {
-      disabled: 'text-blue-500 no-underline opacity-50 hover:!no-underline',
+      disabled: 'text-blue-500 no-underline opacity-50 hover:no-underline!',
       normal: 'text-blue-500 visited:text-purple-500 no-underline',
     },
     anchor: {
@@ -128,10 +128,10 @@ export const calculateViewModel = (props: Props): ViewModel => {
 
   return {
     className: twMerge(
-      'focus:outline-none hover:underline leading-[inherit]',
+      'focus:outline-hidden hover:underline leading-[inherit]',
       COLOR_DISABLED_MAP[color][variant][disabled ? 'disabled' : 'normal'],
       disabled ? 'cursor-not-allowed' : '',
-      noUnderline ? '!no-underline' : '',
+      noUnderline ? 'no-underline!' : '',
       visited
         ? color === 'blue'
           ? 'visited text-purple-500'
diff --git a/packages/base/Link/src/Link/__snapshots__/test.tsx.snap b/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
index 91a863ea36..68720a948e 100644
--- a/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
+++ b/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Link renders 1`] = `
     class="Picasso-root"
   >
     <a
-      class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
+      class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
     >
       Please verify your email
     </a>
@@ -21,7 +21,7 @@ exports[`Link when disabled renders disabled link 1`] = `
   >
     <a
       aria-disabled="true"
-      class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-gray underline cursor-pointer"
+      class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-gray underline cursor-pointer"
       download="filename"
       rel="noopener"
     >
@@ -37,7 +37,7 @@ exports[`Link when native attributes are provided renders native attributes 1`]
     class="Picasso-root"
   >
     <a
-      class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline cursor-pointer"
+      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"
       href="https://toptal.com/filename.txt"
       rel="noopener"
@@ -56,7 +56,7 @@ exports[`Link when using react-router Link renders a Link from react-router 1`]
   >
     <div>
       <a
-        class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
+        class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
         href="/"
       >
         Please verify your email
diff --git a/packages/base/Link/src/Link/test.tsx b/packages/base/Link/src/Link/test.tsx
index 713aa55090..36bbdf6205 100644
--- a/packages/base/Link/src/Link/test.tsx
+++ b/packages/base/Link/src/Link/test.tsx
@@ -186,7 +186,7 @@ describe('calculateViewModel', () => {
       const whiteResult = calculateViewModel(whiteProps)
 
       expect(blueResult.className).toContain(
-        'focus:outline-none hover:underline leading-[inherit] text-gray-600 underline cursor-not-allowed'
+        'focus:outline-hidden hover:underline leading-[inherit] text-gray-600 underline cursor-not-allowed'
       )
       expect(whiteResult.className).toContain('text-gray-600')
     })
@@ -222,7 +222,7 @@ describe('calculateViewModel', () => {
       }
       const result = calculateViewModel(props)
 
-      expect(result.className).toContain('!no-underline')
+      expect(result.className).toContain('no-underline!')
     })
   })
 
diff --git a/packages/base/Menu/src/Menu/Menu.tsx b/packages/base/Menu/src/Menu/Menu.tsx
index 358f292f6e..7545713756 100644
--- a/packages/base/Menu/src/Menu/Menu.tsx
+++ b/packages/base/Menu/src/Menu/Menu.tsx
@@ -84,7 +84,7 @@ export const Menu = forwardRef<HTMLUListElement, Props>(function Menu(
           ref={ref}
           className={twMerge(
             'relative list-none',
-            'outline-none shadow-1',
+            'outline-hidden shadow-1',
             'py-2 px-0 m-0',
             'rounded-sm',
             className
diff --git a/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap b/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
index 0f6e6fb202..a1967b4f44 100644
--- a/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
+++ b/packages/base/Menu/src/Menu/__snapshots__/test.tsx.snap
@@ -6,13 +6,13 @@ exports[`Menu renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="relative list-none outline-none shadow-1 py-2 px-0 m-0 rounded-sm"
+      class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm"
       role="menu"
       tabindex="-1"
     >
       <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-none appearance-none leading-4"
+        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"
         role="menuitem"
         tabindex="0"
       >
@@ -36,7 +36,7 @@ exports[`Menu renders 1`] = `
       </li>
       <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-none appearance-none leading-4"
+        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"
         role="menuitem"
         tabindex="-1"
       >
diff --git a/packages/base/Menu/src/MenuItem/MenuItem.tsx b/packages/base/Menu/src/MenuItem/MenuItem.tsx
index f081505332..c3c9e5c8ab 100644
--- a/packages/base/Menu/src/MenuItem/MenuItem.tsx
+++ b/packages/base/Menu/src/MenuItem/MenuItem.tsx
@@ -177,7 +177,7 @@ export const MenuItem: OverridableComponent<Props> = forwardRef<
           'transition-colors duration-150 ease-in-out',
           'overflow-hidden whitespace-normal text-left no-underline',
           'flex items-center justify-start',
-          'outline-none appearance-none leading-4',
+          'outline-hidden appearance-none leading-4',
           className,
           disabled && 'text-gray-600 opacity-100 pointer-events-none'
         )}
diff --git a/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap b/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
index df33aa760b..ccb144a479 100644
--- a/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Menu/src/MenuItem/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`MenuItem renders 1`] = `
   >
     <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-none appearance-none leading-4"
+      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"
       role="menuitem"
       tabindex="-1"
     >
@@ -40,7 +40,7 @@ exports[`MenuItem renders checkmarked 1`] = `
   >
     <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-none appearance-none leading-4"
+      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"
       role="menuitem"
       tabindex="-1"
     >
@@ -89,7 +89,7 @@ exports[`MenuItem renders in title case with global prop 1`] = `
     >
       <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-none appearance-none leading-4"
+        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"
         role="menuitem"
         tabindex="-1"
       >
@@ -123,7 +123,7 @@ exports[`MenuItem renders in title case with local prop 1`] = `
   >
     <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-none appearance-none leading-4"
+      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"
       role="menuitem"
       tabindex="-1"
     >
@@ -156,7 +156,7 @@ exports[`MenuItem renders with a sub menu arrow 1`] = `
   >
     <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-none appearance-none leading-4"
+      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"
       role="menuitem"
       tabindex="-1"
     >
@@ -202,7 +202,7 @@ exports[`MenuItem renders with description 1`] = `
   >
     <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-none appearance-none leading-4"
+      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"
       role="menuitem"
       tabindex="-1"
     >
diff --git a/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap b/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
index d23a8483f0..fae033aa0c 100644
--- a/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
+++ b/packages/base/Modal/src/Modal/__snapshots__/test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Modal renders 1`] = `
   >
     <div
       aria-hidden="true"
-      class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+      class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
       style="transition-duration: 300ms; opacity: 1;"
     />
     <div
@@ -22,7 +22,7 @@ exports[`Modal renders 1`] = `
       tabindex="0"
     />
     <div
-      class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+      class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
       role="dialog"
       style="transition-duration: 300ms; opacity: 1;"
       tabindex="-1"
@@ -50,7 +50,7 @@ exports[`Modal renders 1`] = `
       >
         <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-none [[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 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-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 py-0 px-4"
           data-component-type="button"
           role="button"
           tabindex="0"
@@ -64,7 +64,7 @@ exports[`Modal renders 1`] = `
         </button>
         <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-none [[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-[#27D496] active:bg-[#00A96C] bg-green 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-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-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
           data-component-type="button"
           role="button"
           tabindex="0"
@@ -80,7 +80,7 @@ exports[`Modal renders 1`] = `
       <button
         aria-disabled="false"
         aria-label="Close"
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent absolute top-8 right-8"
+        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent absolute top-8 right-8"
         data-component-type="button"
         data-testid="close-modal"
         role="button"
@@ -119,7 +119,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
       <button
         aria-disabled="false"
         aria-hidden="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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -137,7 +137,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
       >
         <div
           aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
           style="transition-duration: 300ms; opacity: 1;"
         />
         <div
@@ -145,7 +145,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
           role="dialog"
           style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
@@ -155,7 +155,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
           </p>
           <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-none [[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"
+            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"
             data-component-type="button"
             role="button"
             tabindex="0"
@@ -186,7 +186,7 @@ exports[`Modal useModal opens and closes modal 2`] = `
     >
       <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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -212,7 +212,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
       <button
         aria-disabled="false"
         aria-hidden="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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -227,7 +227,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
       <button
         aria-disabled="false"
         aria-hidden="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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -246,7 +246,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
       >
         <div
           aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
           style="transition-duration: 300ms; opacity: 1;"
         />
         <div
@@ -254,7 +254,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
           role="dialog"
           style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
@@ -274,7 +274,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
       >
         <div
           aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
           style="transition-duration: 300ms; opacity: 1;"
         />
         <div
@@ -282,7 +282,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
           role="dialog"
           style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
diff --git a/packages/base/Modal/src/ModalPaper/ModalPaper.tsx b/packages/base/Modal/src/ModalPaper/ModalPaper.tsx
index bea07faa0b..0f1a6ed0d1 100644
--- a/packages/base/Modal/src/ModalPaper/ModalPaper.tsx
+++ b/packages/base/Modal/src/ModalPaper/ModalPaper.tsx
@@ -53,7 +53,7 @@ export const ModalPaper = React.forwardRef<HTMLDivElement, Props>(
         elevation={2}
         className={twMerge(
           className,
-          'outline-none overflow-y-auto',
+          'outline-hidden overflow-y-auto',
           'flex flex-col',
           sizeBasedClasses[size],
           alignBasedClasses[align],
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 59183d7ad4..e8440cbfad 100644
--- a/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap
+++ b/packages/base/Notification/src/use-notification/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`useNotifications error notification render 1`] = `
   >
     <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-none [[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"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -21,7 +21,7 @@ exports[`useNotifications error notification render 1`] = `
     </button>
     <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-none [[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"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -35,7 +35,7 @@ exports[`useNotifications error notification render 1`] = `
     </button>
     <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-none [[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"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -89,7 +89,7 @@ exports[`useNotifications error notification render 1`] = `
                 </div>
                 <button
                   aria-disabled="false"
-                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
+                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
                   data-component-type="button"
                   role="button"
                   tabindex="0"
@@ -126,7 +126,7 @@ exports[`useNotifications info notification render 1`] = `
   >
     <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-none [[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"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -140,7 +140,7 @@ exports[`useNotifications info notification render 1`] = `
     </button>
     <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-none [[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"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -154,7 +154,7 @@ exports[`useNotifications info notification render 1`] = `
     </button>
     <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-none [[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"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -211,7 +211,7 @@ exports[`useNotifications info notification render 1`] = `
                 </div>
                 <button
                   aria-disabled="false"
-                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
+                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
                   data-component-type="button"
                   role="button"
                   tabindex="0"
@@ -248,7 +248,7 @@ exports[`useNotifications success notification render 1`] = `
   >
     <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-none [[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"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -262,7 +262,7 @@ exports[`useNotifications success notification render 1`] = `
     </button>
     <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-none [[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"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -276,7 +276,7 @@ exports[`useNotifications success notification render 1`] = `
     </button>
     <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-none [[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"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -330,7 +330,7 @@ exports[`useNotifications success notification render 1`] = `
                 </div>
                 <button
                   aria-disabled="false"
-                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
+                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer rounded-full w-[1.5em] text-white visited:text-white focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] absolute right-[0.5em] top-[0.75em] bg-transparent border-none p-0 h-[1em] hover:bg-transparent active:bg-transparent"
                   data-component-type="button"
                   role="button"
                   tabindex="0"
diff --git a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
index a8d2b47d01..d0aba782fc 100644
--- a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
+++ b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
@@ -9,13 +9,13 @@ exports[`NumberInput renders 1`] = `
   >
     <input
       aria-invalid="false"
-      class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 [&::-webkit-outer-spin-button]:appearance [&::-webkit-outer-spin-button]:m [&::-webkit-inner-spin-button]:appearance [&::-webkit-inner-spin-button]:m [-moz"
+      class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 [&::-webkit-outer-spin-button]:appearance [&::-webkit-outer-spin-button]:m [&::-webkit-inner-spin-button]:appearance [&::-webkit-inner-spin-button]:m [-moz"
       step="5"
       type="number"
       value="10"
     />
     <div
-      class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto"
+      class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto grow-0 shrink-0 basis-auto"
     >
       <span
         class="inline-flex flex-col"
diff --git a/packages/base/OutlinedInput/src/OutlinedInput/stylesInput.ts b/packages/base/OutlinedInput/src/OutlinedInput/stylesInput.ts
index e4ce2fa270..6b64192314 100644
--- a/packages/base/OutlinedInput/src/OutlinedInput/stylesInput.ts
+++ b/packages/base/OutlinedInput/src/OutlinedInput/stylesInput.ts
@@ -57,7 +57,7 @@ export const inputClasses = [
   'box-border',
   'cursor-[inherit]',
   'h-full',
-  'outline-none',
+  'outline-hidden',
   'p-0',
   'peer',
   'resize-none',
diff --git a/packages/base/OverviewBlock/src/OverviewBlock/OverviewBlock.tsx b/packages/base/OverviewBlock/src/OverviewBlock/OverviewBlock.tsx
index 580c6f0620..1b386eace3 100644
--- a/packages/base/OverviewBlock/src/OverviewBlock/OverviewBlock.tsx
+++ b/packages/base/OverviewBlock/src/OverviewBlock/OverviewBlock.tsx
@@ -102,8 +102,8 @@ export const OverviewBlock: OverridableComponent<Props> = forwardRef<
       ref={ref}
       className={twMerge(
         isClickable
-          ? 'cursor-pointer outline-none hover:bg-blue-100'
-          : 'outline-none',
+          ? 'cursor-pointer outline-hidden hover:bg-blue-100'
+          : 'outline-hidden',
         getAlignmentClassnames(align),
         getBlockWidthClassnames(blockWidth),
         'flex flex-col bg-white m-0 min-w-[9.375rem] border-none no-underline',
diff --git a/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
index 84abe70531..b42ad0d349 100644
--- a/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageAutocomplete/__snapshots__/test.tsx.snap
@@ -21,19 +21,19 @@ exports[`PageAutocomplete renders 1`] = `
             aria-autocomplete="list"
             aria-invalid="false"
             autocomplete="off"
-            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-white [&::placeholder]:text-white [&::placeholder]:opacity-[0.64]"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-white [&::placeholder]:text-white [&::placeholder]:opacity-[0.64]"
             data-testid="autocomplete"
             type="text"
             value=""
             variant="dark"
           />
           <div
-            class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto invisible"
+            class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto grow-0 shrink-0 basis-auto invisible"
             data-testid="reset-adornment"
           >
             <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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
+              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 rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
               data-component-type="button"
               role="reset"
               tabindex="-1"
diff --git a/packages/base/Page/src/PageFooter/PageFooter.tsx b/packages/base/Page/src/PageFooter/PageFooter.tsx
index 08781b24c0..1c6c69b212 100644
--- a/packages/base/Page/src/PageFooter/PageFooter.tsx
+++ b/packages/base/Page/src/PageFooter/PageFooter.tsx
@@ -30,7 +30,7 @@ export const PageFooter = forwardRef<HTMLElement, Props>(function PageFooter(
     'box-border',
     'flex justify-between xs:max-lg:flex-col',
     'text-white text-md leading-[1em]',
-    'mx-auto pt-2 pb-6 px-[--content-padding-horizontal]'
+    'mx-auto pt-2 pb-6 px-[var(--content-padding-horizontal)]'
   )
 
   return (
diff --git a/packages/base/Page/src/PageFooter/styles.ts b/packages/base/Page/src/PageFooter/styles.ts
index 6655cd1cab..f07510dab6 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-[--content-width-wide]'
+    return 'max-w-[var(--content-width-wide)]'
   }
 
-  return 'max-w-[--content-width]'
+  return 'max-w-[var(--content-width)]'
 }
diff --git a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
index 7f9fa3ceb5..3cf9f7b9c1 100644
--- a/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageSidebar/__snapshots__/test.tsx.snap
@@ -42,7 +42,7 @@ exports[`PageSidebar with menu 1`] = `
             class="order-[50] flex-1 h-full"
           />
           <ul
-            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
+            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"
             tabindex="-1"
           />
@@ -71,12 +71,12 @@ exports[`PageSidebar with one normal and one bottom menu 1`] = `
             class="order-[50] flex-1 h-full"
           />
           <ul
-            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
+            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"
             tabindex="-1"
           />
           <ul
-            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 [&_&]:flex-1 flex-grow flex-shrink max-w order-[99]"
+            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"
             tabindex="-1"
           />
diff --git a/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
index 61e9846443..77e3d08bd3 100644
--- a/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
@@ -216,7 +216,7 @@ exports[`PageTopBar renders with link 1`] = `
               class="flex items-center gap-4"
             >
               <a
-                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline cursor-pointer"
+                class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline cursor-pointer"
                 href="https://www.toptal.com"
               >
                 <svg
diff --git a/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx b/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx
index ac8f2a3966..8f4da2e68c 100644
--- a/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx
+++ b/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx
@@ -12,7 +12,7 @@ import { twJoin } from '@toptal/picasso-tailwind-merge'
 import { PageTopBarContext } from '../PageTopBar'
 
 const truncateTextClasses =
-  'max-w-[11.5rem] whitespace-nowrap overflow-hidden overflow-ellipsis'
+  'max-w-[11.5rem] whitespace-nowrap overflow-hidden text-ellipsis'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** User full name to display */
diff --git a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
index 81cf0a2983..090086396e 100644
--- a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
@@ -36,7 +36,7 @@ exports[`PageTopBarMenu renders 1`] = `
               class="items-center flex"
             >
               <h4
-                class="m-0 text-md text-white inline font-[400] max-w whitespace-nowrap overflow-hidden overflow-ellipsis"
+                class="m-0 text-md text-white inline font-[400] max-w whitespace-nowrap overflow-hidden text-ellipsis"
               >
                 Jacqueline Roque
               </h4>
diff --git a/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap b/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
index d74c6ede36..40a777d7d5 100644
--- a/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarItem/__snapshots__/test.tsx.snap
@@ -18,7 +18,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
             class="order-[50] flex-1 h-full"
           />
           <ul
-            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
+            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"
             tabindex="-1"
           >
@@ -37,7 +37,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                 >
                   <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-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
+                    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-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
                     role="menuitem"
                     tabindex="0"
                   >
@@ -57,7 +57,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                               class="items-center flex flex-1 min-w"
                             >
                               <p
-                                class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                                class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                               >
                                 Test item
                               </p>
@@ -67,15 +67,28 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                       </div>
                     </div>
                   </li>
-                  <svg
-                    class="fill-current inline-block h-[1em] align-[-.125em] text-base text-graphite PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
-                    style="min-width: 16px; min-height: 16px;"
-                    viewBox="0 0 16 16"
+                  <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 border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+                    data-component-type="button"
+                    role="button"
+                    tabindex="0"
+                    type="button"
                   >
-                    <path
-                      d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
-                    />
-                  </svg>
+                    <span
+                      class="items-center inline-flex font-semibold text-blue text-md"
+                    >
+                      <svg
+                        class="fill-current inline-block align-[-.125em] flex-1 w-4 h-4 text-base text-graphite PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
+                        style="min-width: 16px; min-height: 16px;"
+                        viewBox="0 0 16 16"
+                      >
+                        <path
+                          d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
                 </div>
               </div>
               <div
@@ -95,13 +108,13 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                         class="flex p-0"
                       >
                         <ul
-                          class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
+                          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"
                           tabindex="-1"
                         >
                           <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-none 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-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+                            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-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
                             role="menuitem"
                             tabindex="0"
                           >
@@ -121,7 +134,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                                       class="items-center flex flex-1 min-w"
                                     >
                                       <p
-                                        class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                                        class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                                       >
                                         Menu item
                                       </p>
@@ -164,7 +177,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
             class="order-[50] flex-1 h-full"
           />
           <ul
-            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
+            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"
             tabindex="-1"
           >
@@ -183,7 +196,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                 >
                   <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-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
+                    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-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
                     role="menuitem"
                     tabindex="0"
                   >
@@ -203,7 +216,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                               class="items-center flex flex-1 min-w"
                             >
                               <p
-                                class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                                class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                               >
                                 Test item
                               </p>
@@ -213,15 +226,28 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                       </div>
                     </div>
                   </li>
-                  <svg
-                    class="fill-current inline-block h-[1em] align-[-.125em] text-base text-graphite PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
-                    style="min-width: 16px; min-height: 16px;"
-                    viewBox="0 0 16 16"
+                  <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 border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+                    data-component-type="button"
+                    role="button"
+                    tabindex="0"
+                    type="button"
                   >
-                    <path
-                      d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
-                    />
-                  </svg>
+                    <span
+                      class="items-center inline-flex font-semibold text-blue text-md"
+                    >
+                      <svg
+                        class="fill-current inline-block align-[-.125em] flex-1 w-4 h-4 text-base text-graphite PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
+                        style="min-width: 16px; min-height: 16px;"
+                        viewBox="0 0 16 16"
+                      >
+                        <path
+                          d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
                 </div>
               </div>
               <div
@@ -241,13 +267,13 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                         class="flex p-0"
                       >
                         <ul
-                          class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
+                          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"
                           tabindex="-1"
                         >
                           <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-none 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-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+                            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-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
                             role="menuitem"
                             tabindex="0"
                           >
@@ -267,7 +293,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                                       class="items-center flex flex-1 min-w"
                                     >
                                       <p
-                                        class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                                        class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                                       >
                                         Menu item
                                       </p>
@@ -299,7 +325,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
   >
     <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-none 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"
+      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"
       role="menuitem"
       tabindex="-1"
     >
@@ -328,7 +354,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
                 class="items-center flex flex-1 min-w ml-[.375rem]"
               >
                 <p
-                  class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                  class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                 >
                   Test item
                 </p>
@@ -340,13 +366,13 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
     </li>
     <div>
       <ul
-        class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
+        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"
         tabindex="-1"
       >
         <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-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+          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-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
           role="menuitem"
           tabindex="0"
         >
@@ -366,7 +392,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
                     class="items-center flex flex-1 min-w"
                   >
                     <p
-                      class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                      class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                     >
                       Menu item
                     </p>
@@ -389,7 +415,7 @@ exports[`SidebarItem is selected 1`] = `
   >
     <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-none 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"
+      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"
       role="menuitem"
       tabindex="-1"
     >
@@ -418,7 +444,7 @@ exports[`SidebarItem is selected 1`] = `
                 class="items-center flex flex-1 min-w ml-[.375rem]"
               >
                 <p
-                  class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                  class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                 >
                   Test item
                 </p>
@@ -439,7 +465,7 @@ exports[`SidebarItem renders 1`] = `
   >
     <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-none 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"
+      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"
       role="menuitem"
       tabindex="-1"
     >
@@ -459,7 +485,7 @@ exports[`SidebarItem renders 1`] = `
                 class="items-center flex flex-1 min-w"
               >
                 <p
-                  class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                  class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                 >
                   Test item
                 </p>
@@ -493,7 +519,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
         >
           <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-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
+            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-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
             role="menuitem"
             tabindex="-1"
           >
@@ -522,7 +548,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
                       class="items-center flex flex-1 min-w ml-[.375rem]"
                     >
                       <p
-                        class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                        class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                       >
                         Test item
                       </p>
@@ -532,15 +558,28 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
               </div>
             </div>
           </li>
-          <svg
-            class="fill-current inline-block h-[1em] align-[-.125em] text-base text-graphite PicassoAccordion-expandIcon"
-            style="min-width: 16px; min-height: 16px;"
-            viewBox="0 0 16 16"
+          <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 border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+            data-component-type="button"
+            role="button"
+            tabindex="0"
+            type="button"
           >
-            <path
-              d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
-            />
-          </svg>
+            <span
+              class="items-center inline-flex font-semibold text-blue text-md"
+            >
+              <svg
+                class="fill-current inline-block align-[-.125em] flex-1 w-4 h-4 text-base text-graphite PicassoAccordion-expandIcon"
+                style="min-width: 16px; min-height: 16px;"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
+                />
+              </svg>
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -560,13 +599,13 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
                 class="flex p-0"
               >
                 <ul
-                  class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
+                  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"
                   tabindex="-1"
                 >
                   <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-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+                    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-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
                     role="menuitem"
                     tabindex="0"
                   >
@@ -586,7 +625,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
                               class="items-center flex flex-1 min-w"
                             >
                               <p
-                                class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                                class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                               >
                                 Menu item
                               </p>
@@ -614,7 +653,7 @@ exports[`SidebarItem with icon 1`] = `
   >
     <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-none 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"
+      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"
       role="menuitem"
       tabindex="-1"
     >
@@ -643,7 +682,7 @@ exports[`SidebarItem with icon 1`] = `
                 class="items-center flex flex-1 min-w ml-[.375rem]"
               >
                 <p
-                  class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
+                  class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                 >
                   Test item
                 </p>
diff --git a/packages/base/Page/src/SidebarLogo/SidebarLogo.tsx b/packages/base/Page/src/SidebarLogo/SidebarLogo.tsx
index 71df5e641f..5564deac63 100644
--- a/packages/base/Page/src/SidebarLogo/SidebarLogo.tsx
+++ b/packages/base/Page/src/SidebarLogo/SidebarLogo.tsx
@@ -28,7 +28,7 @@ export const SidebarLogo = forwardRef<HTMLDivElement, Props>(
     return (
       <Container
         {...rest}
-        className={twMerge('flex-shrink-0 block overflow-hidden', className)}
+        className={twMerge('shrink-0 block overflow-hidden', className)}
         ref={ref}
         bottom='xsmall'
         left='large'
diff --git a/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap b/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
index e822d68c24..9970acd6b5 100644
--- a/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`SidebarLogo renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="mb-2 ml-8 flex-shrink block overflow-hidden"
+      class="mb-2 ml-8 shrink-0 block overflow-hidden"
     >
       <svg
         class="fill-current inline-block h-[1em] text-[1.875rem] align-baseline text-blue [--logo-text [--logo-emblem"
diff --git a/packages/base/Page/src/SidebarMenu/SidebarMenu.tsx b/packages/base/Page/src/SidebarMenu/SidebarMenu.tsx
index fbc759cfbe..33d43021c9 100644
--- a/packages/base/Page/src/SidebarMenu/SidebarMenu.tsx
+++ b/packages/base/Page/src/SidebarMenu/SidebarMenu.tsx
@@ -72,7 +72,7 @@ export const SidebarMenu = forwardRef<HTMLUListElement, Props>(
         ref={ref}
         style={style}
         className={twMerge(
-          'shadow-0 order-1 [&_&]:flex-1 flex-grow-0 flex-shrink-1 max-w-full',
+          'shadow-0 order-1 [&_&]:flex-1 grow-0 shrink-1 max-w-full',
           bottom && 'order-[99]',
           parentMenu?.compact && 'p-2',
           className
diff --git a/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
index 295e193fba..d33ae878b4 100644
--- a/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Page/src/SidebarMenu/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`SidebarMenu renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
+      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"
       tabindex="-1"
     />
@@ -20,7 +20,7 @@ exports[`SidebarMenu with bottom 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 [&_&]:flex-1 flex-grow flex-shrink max-w order-[99]"
+      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"
       tabindex="-1"
     />
diff --git a/packages/base/Page/src/TopBarItem/TopBarItem.tsx b/packages/base/Page/src/TopBarItem/TopBarItem.tsx
index 63bd86f32e..2e618bd54d 100644
--- a/packages/base/Page/src/TopBarItem/TopBarItem.tsx
+++ b/packages/base/Page/src/TopBarItem/TopBarItem.tsx
@@ -30,7 +30,7 @@ const rootClasses = [
   'min-[1280px]:[&_p]:text-sm',
 ]
 const separatorClasses = [
-  'min-[1280px]:before:[&:not(:first-child)]:content-[""]',
+  'min-[1280px]:first:before:hidden min-[1280px]:before:content-[""]',
   'min-[1280px]:before:bg-gray-600 min-[1280px]:before:inline-block',
   'min-[1280px]:before:h-2 min-[1280px]:before:mx-2 min-[1280px]:before:w-[1px]',
 ]
diff --git a/packages/base/Pagination/src/Pagination/Pagination.tsx b/packages/base/Pagination/src/Pagination/Pagination.tsx
index 53d3c8aa07..ba458f9824 100644
--- a/packages/base/Pagination/src/Pagination/Pagination.tsx
+++ b/packages/base/Pagination/src/Pagination/Pagination.tsx
@@ -78,7 +78,7 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
     return (
       <PaginationButton
         key={index}
-        className='[&+&]:!ml-2'
+        className='[&+&]:ml-2!'
         page={Number(page)}
         activePage={activePage}
         disabled={disabled}
@@ -90,7 +90,7 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
   return (
     <Container {...rest} ref={ref} flex inline alignItems='center'>
       <Button
-        className='[&+&]:!ml-2'
+        className='[&+&]:ml-2!'
         disabled={isFirstActive || disabled}
         onClick={handlePrevClick}
         variant='secondary'
@@ -102,7 +102,7 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
       {variant === 'compact' ? null : pageButtons}
 
       <Button
-        className='[&+&]:!ml-2'
+        className='[&+&]:ml-2!'
         disabled={isLastActive || disabled || nextDisabled}
         onClick={handleNextClick}
         variant='secondary'
diff --git a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
index 74fcf13681..fbbe2411b2 100644
--- a/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
+++ b/packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Pagination renders 1`] = `
     >
       <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-none [[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-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-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-6 py-0 px-3 [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -25,7 +25,7 @@ exports[`Pagination renders 1`] = `
       <button
         aria-current="false"
         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-none [[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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled: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-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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -49,7 +49,7 @@ exports[`Pagination renders 1`] = `
       <button
         aria-current="false"
         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-none [[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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled: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-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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -64,7 +64,7 @@ exports[`Pagination renders 1`] = `
       <button
         aria-current="false"
         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-none [[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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled: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-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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -79,7 +79,7 @@ exports[`Pagination renders 1`] = `
       <button
         aria-current="true"
         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-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm 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)] shadow-none z-[1] border border-solid hover:border-black visited:text-black h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite text-white disabled: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-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm 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)] shadow-none z-[1] border border-solid hover:border-black visited:text-black h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite text-white disabled:text-gray [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -94,7 +94,7 @@ exports[`Pagination renders 1`] = `
       <button
         aria-current="false"
         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-none [[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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled: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-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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -109,7 +109,7 @@ exports[`Pagination renders 1`] = `
       <button
         aria-current="false"
         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-none [[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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled: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-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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -133,7 +133,7 @@ exports[`Pagination renders 1`] = `
       <button
         aria-current="false"
         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-none [[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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled: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-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 bg-white border-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -147,7 +147,7 @@ exports[`Pagination renders 1`] = `
       </button>
       <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-none [[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-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-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-6 py-0 px-3 [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -174,7 +174,7 @@ exports[`Pagination renders compact without totalPages 1`] = `
     >
       <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-none [[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-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-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-6 py-0 px-3 [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -188,7 +188,7 @@ exports[`Pagination renders compact without totalPages 1`] = `
       </button>
       <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-none [[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-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-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-6 py-0 px-3 [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -215,7 +215,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
@@ -231,7 +231,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
@@ -256,7 +256,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
@@ -272,7 +272,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
@@ -288,7 +288,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
@@ -304,7 +304,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
@@ -320,7 +320,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
@@ -345,7 +345,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
@@ -360,7 +360,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
@@ -404,7 +404,7 @@ exports[`Pagination renders with next disabled 1`] = `
     >
       <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-none [[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-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-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-6 py-0 px-3 [&+&]:ml-2!"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -418,7 +418,7 @@ 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 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-hidden [[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"
         disabled=""
         role="button"
diff --git a/packages/base/Paper/package.json b/packages/base/Paper/package.json
index 1802fce449..8bd15c060d 100644
--- a/packages/base/Paper/package.json
+++ b/packages/base/Paper/package.json
@@ -29,8 +29,7 @@
     "@toptal/picasso-tailwind-merge": "^2.0.0",
     "@toptal/picasso-provider": "*",
     "@toptal/picasso-tailwind": ">=2.0.1",
-    "react": ">=16.12.0 < 19.0.0",
-    "tailwindcss": ">=3"
+    "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
diff --git a/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap b/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
index 80dfa6de63..3916813479 100644
--- a/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
+++ b/packages/base/PromptModal/src/PromptModal/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`PromptModal renders 1`] = `
   >
     <div
       aria-hidden="true"
-      class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+      class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
       style="transition-duration: 300ms; opacity: 1;"
     />
     <div
@@ -23,7 +23,7 @@ exports[`PromptModal renders 1`] = `
       tabindex="0"
     />
     <div
-      class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[32.5rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+      class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[32.5rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
       role="dialog"
       style="transition-duration: 300ms; opacity: 1;"
       tabindex="-1"
@@ -55,7 +55,7 @@ exports[`PromptModal renders 1`] = `
       >
         <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-none [[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 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-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 py-0 px-4"
           data-component-type="button"
           role="button"
           tabindex="0"
@@ -69,7 +69,7 @@ exports[`PromptModal renders 1`] = `
         </button>
         <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-none [[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-[#27D496] active:bg-[#00A96C] bg-green 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-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-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
           data-component-type="button"
           role="button"
           tabindex="0"
@@ -99,7 +99,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 1`] = `
     >
       <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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -125,7 +125,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 2`] = `
       <button
         aria-disabled="false"
         aria-hidden="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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -143,7 +143,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 2`] = `
       >
         <div
           aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
           style="transition-duration: 300ms; opacity: 1;"
         />
         <div
@@ -151,7 +151,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 2`] = `
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[32.5rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[32.5rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
           role="dialog"
           style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
@@ -183,7 +183,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 2`] = `
           >
             <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-none [[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 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-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 py-0 px-4"
               data-component-type="button"
               role="button"
               tabindex="0"
@@ -197,7 +197,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 2`] = `
             </button>
             <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-none [[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-[#27D496] active:bg-[#00A96C] bg-green 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-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-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
               data-component-type="button"
               role="button"
               tabindex="0"
@@ -229,7 +229,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 3`] = `
     >
       <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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -254,7 +254,7 @@ exports[`PromptModal showPrompt with input returns result on Submit action 1`] =
     >
       <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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
diff --git a/packages/base/Section/src/Section/__snapshots__/test.tsx.snap b/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
index db113c6879..dc3ff41806 100644
--- a/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
+++ b/packages/base/Section/src/Section/__snapshots__/test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Section renders collapsible initially collapsed 1`] = `
         >
           <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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
+            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 rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
             data-component-type="button"
             data-testid="collapse"
             role="button"
@@ -64,7 +64,7 @@ exports[`Section renders collapsible initially expanded 1`] = `
         >
           <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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
+            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 rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
             data-component-type="button"
             data-testid="collapse"
             role="button"
diff --git a/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap b/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
index 7e01f7b484..a5088e0329 100644
--- a/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NativeSelect/__snapshots__/test.tsx.snap
@@ -13,7 +13,7 @@ exports[`NativeSelect renders native select 1`] = `
       >
         <select
           aria-invalid="false"
-          class="appearance-none select-none rounded-none min-w focus:rounded-none [&_option]:bg-white [&_optgroup]:bg-white base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none peer resize-none text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 w-full p-2 focus:bg-inheritColor pr-6"
+          class="appearance-none select-none rounded-none min-w focus:rounded-none [&_option]:bg-white [&_optgroup]:bg-white base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden peer resize-none text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 w-full p-2 focus:bg-inheritColor pr-6"
           type="text"
         >
           <option
@@ -69,7 +69,7 @@ exports[`NativeSelect renders native select with the empty option enabled when e
       >
         <select
           aria-invalid="false"
-          class="appearance-none select-none rounded-none min-w focus:rounded-none [&_option]:bg-white [&_optgroup]:bg-white base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none peer resize-none text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 w-full p-2 focus:bg-inheritColor pr-6"
+          class="appearance-none select-none rounded-none min-w focus:rounded-none [&_option]:bg-white [&_optgroup]:bg-white base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden peer resize-none text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 w-full p-2 focus:bg-inheritColor pr-6"
           type="text"
         >
           <option
diff --git a/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
index 270f87b71b..f46d2fa225 100644
--- a/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelect/__snapshots__/test.tsx.snap
@@ -18,7 +18,7 @@ exports[`NonNativeSelect renders 1`] = `
           <input
             aria-invalid="false"
             autocomplete="off"
-            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             readonly=""
             size="1"
             type="text"
@@ -42,7 +42,7 @@ exports[`NonNativeSelect renders 1`] = `
 
 exports[`NonNativeSelect renders custom options 1`] = `
 <ul
-  class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+  class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
   role="listbox"
   tabindex="-1"
 >
@@ -55,7 +55,7 @@ exports[`NonNativeSelect renders custom options 1`] = `
       <li
         aria-disabled="false"
         aria-selected="false"
-        class="text-black bg-blue 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-none appearance-none leading-4"
+        class="text-black bg-blue 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"
         data-highlighted="true"
         role="option"
         tabindex="-1"
@@ -85,7 +85,7 @@ exports[`NonNativeSelect renders custom options 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-highlighted="false"
         role="option"
         tabindex="-1"
@@ -115,7 +115,7 @@ exports[`NonNativeSelect renders custom options 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-highlighted="false"
         role="option"
         tabindex="-1"
@@ -149,7 +149,7 @@ exports[`NonNativeSelect renders custom options 1`] = `
 
 exports[`NonNativeSelect renders description 1`] = `
 <ul
-  class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+  class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
   role="listbox"
   tabindex="-1"
 >
@@ -162,7 +162,7 @@ exports[`NonNativeSelect renders description 1`] = `
       <li
         aria-disabled="false"
         aria-selected="false"
-        class="text-black bg-blue 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-none appearance-none leading-4"
+        class="text-black bg-blue 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"
         data-highlighted="true"
         role="option"
         tabindex="-1"
@@ -197,7 +197,7 @@ exports[`NonNativeSelect renders description 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-highlighted="false"
         role="option"
         tabindex="-1"
@@ -232,7 +232,7 @@ exports[`NonNativeSelect renders description 1`] = `
       <li
         aria-disabled="false"
         aria-selected="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-none appearance-none leading-4"
+        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"
         data-highlighted="false"
         role="option"
         tabindex="-1"
diff --git a/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
index f193b8ac16..264ade7466 100644
--- a/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectLimitFooter/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`NonNativeSelectLimitFooter renders footer when overflow 1`] = `
   >
     <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-none appearance-none py-3 px-4 border border-solid border-gray text-[0.6875rem] text-gray opacity-100 pointer-events"
+      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"
       disabled=""
       role="menuitem"
     >
diff --git a/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
index caef6e0e0c..5fee50379d 100644
--- a/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectLoader/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`NonNativeSelectLoader renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+      class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="menu"
       tabindex="-1"
     >
diff --git a/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
index 9d9fb2e1b4..de9271be28 100644
--- a/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectOption/__snapshots__/test.tsx.snap
@@ -8,7 +8,7 @@ exports[`NonNativeSelectOption renders 1`] = `
     <li
       aria-disabled="false"
       aria-selected="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-none appearance-none leading-4"
+      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"
       data-highlighted="false"
       role="option"
       tabindex="-1"
@@ -52,7 +52,7 @@ exports[`NonNativeSelectOption sets attributes correctly 1`] = `
     <li
       aria-disabled="false"
       aria-selected="true"
-      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-none appearance-none leading-4"
+      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"
       data-highlighted="false"
       role="option"
       tabindex="-1"
diff --git a/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap b/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
index ac80136c4e..8e0239c3e6 100644
--- a/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/NonNativeSelectOptions/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`NonNativeSelectOptions renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+      class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
       tabindex="-1"
     >
@@ -18,7 +18,7 @@ exports[`NonNativeSelectOptions renders 1`] = `
         >
           <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-none appearance-none leading-4"
+            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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
@@ -38,7 +38,7 @@ exports[`NonNativeSelectOptions renders 1`] = `
           </li>
           <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-none appearance-none leading-4"
+            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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
@@ -58,7 +58,7 @@ exports[`NonNativeSelectOptions renders 1`] = `
           </li>
           <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-none appearance-none leading-4"
+            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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
@@ -89,7 +89,7 @@ exports[`NonNativeSelectOptions renders no option 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+      class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       data-testid="no-options"
       role="listbox"
       tabindex="-1"
@@ -102,7 +102,7 @@ exports[`NonNativeSelectOptions renders no option 1`] = `
         >
           <li
             aria-disabled="true"
-            class="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-none appearance-none leading-4 text-gray opacity-100 pointer-events"
+            class="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 text-gray opacity-100 pointer-events"
             disabled=""
             role="menuitem"
           >
@@ -131,7 +131,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="relative list-none outline-none py-2 px-0 m-0 rounded-sm bg-white shadow-5"
+      class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm bg-white shadow-5"
       role="listbox"
       tabindex="-1"
     >
@@ -143,7 +143,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
         >
           <li
             aria-disabled="false"
-            class="text-black bg-transparent 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-none appearance-none leading-4 pt-4 px-4 pb-[10px]"
+            class="text-black bg-transparent 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 pt-4 px-4 pb-[10px]"
             role="option"
             tabindex="-1"
           >
@@ -167,7 +167,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <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-none appearance-none leading-4"
+            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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
@@ -187,7 +187,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <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-none appearance-none leading-4"
+            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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
@@ -207,7 +207,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <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-none appearance-none leading-4"
+            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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
@@ -227,7 +227,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <li
             aria-disabled="false"
-            class="text-black bg-transparent 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-none appearance-none leading-4 pt-4 px-4 pb-[10px]"
+            class="text-black bg-transparent 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 pt-4 px-4 pb-[10px]"
             role="option"
             tabindex="-1"
           >
@@ -251,7 +251,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <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-none appearance-none leading-4"
+            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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
@@ -271,7 +271,7 @@ exports[`NonNativeSelectOptions renders option groups 1`] = `
           </li>
           <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-none appearance-none leading-4"
+            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"
             data-highlighted="false"
             role="option"
             tabindex="-1"
diff --git a/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap b/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
index d65a390bc7..ed68f6b5ab 100644
--- a/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
+++ b/packages/base/Select/src/ScrollMenu/__snapshots__/test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ScrollMenu renders 1`] = `
     class="Picasso-root"
   >
     <ul
-      class="relative list-none outline-none shadow-1 py-2 px-0 m-0 rounded-sm bg-white"
+      class="relative list-none outline-hidden shadow-1 py-2 px-0 m-0 rounded-sm bg-white"
       role="menu"
       tabindex="-1"
     >
@@ -18,7 +18,7 @@ exports[`ScrollMenu renders 1`] = `
         >
           <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-none appearance-none leading-4"
+            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"
             role="menuitem"
             tabindex="-1"
           >
@@ -42,7 +42,7 @@ exports[`ScrollMenu renders 1`] = `
           </li>
           <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-none appearance-none leading-4"
+            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"
             role="menuitem"
             tabindex="-1"
           >
@@ -66,7 +66,7 @@ exports[`ScrollMenu renders 1`] = `
           </li>
           <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-none appearance-none leading-4"
+            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"
             role="menuitem"
             tabindex="-1"
           >
diff --git a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
index 59a8b6e2e9..9ab98f160c 100644
--- a/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
+++ b/packages/base/ShowMore/src/ShowMore/__snapshots__/test.tsx.snap
@@ -24,7 +24,7 @@ exports[`ShowMore renders 1`] = `
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -77,7 +77,7 @@ exports[`ShowMore when custom lessText text is specified should render with cust
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -130,7 +130,7 @@ exports[`ShowMore when custom showMore text is specified should render with cust
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -197,7 +197,7 @@ exports[`ShowMore when initialExpanded prop is true should render expanded versi
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -250,7 +250,7 @@ exports[`ShowMore when initialExpanded prop is true when show less link is click
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
@@ -291,7 +291,7 @@ exports[`ShowMore when show more link is clicked should render expanded version
     </p>
     <button
       aria-disabled="false"
-      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
+      class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm inline-flex items-center transition-none"
       data-component-type="button"
       role="button"
       tabindex="0"
diff --git a/packages/base/Slide/package.json b/packages/base/Slide/package.json
index 3440419869..569553863b 100644
--- a/packages/base/Slide/package.json
+++ b/packages/base/Slide/package.json
@@ -28,8 +28,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@toptal/picasso-tailwind": ">2.1.0",
-    "react": ">=16.12.0 < 19.0.0",
-    "tailwindcss": ">=3"
+    "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
diff --git a/packages/base/Step/package.json b/packages/base/Step/package.json
index b961c2efe4..f976bc018f 100644
--- a/packages/base/Step/package.json
+++ b/packages/base/Step/package.json
@@ -37,7 +37,6 @@
   "peerDependencies": {
     "@toptal/picasso-tailwind-merge": "^2.0.0",
     "@toptal/picasso-provider": "*",
-    "tailwindcss": ">=3",
     "react": ">=16.12.0 < 19.0.0"
   },
   "devDependencies": {
diff --git a/packages/base/Table/src/TableExpandableRow/TableExpandableRow.tsx b/packages/base/Table/src/TableExpandableRow/TableExpandableRow.tsx
index 6729fa1cdf..eb6a63addc 100644
--- a/packages/base/Table/src/TableExpandableRow/TableExpandableRow.tsx
+++ b/packages/base/Table/src/TableExpandableRow/TableExpandableRow.tsx
@@ -56,10 +56,7 @@ export const TableExpandableRow = forwardRef<HTMLTableRowElement, Props>(
         {row}
         {expanded && (
           <TableRow
-            className={twJoin(
-              className,
-              stripeEven && 'bg-gray-200 bg-opacity-[32]'
-            )}
+            className={twJoin(className, stripeEven && 'bg-gray-200/[0.32]')}
             style={style}
           >
             <TableCell className='p-0 last:pr-0' colSpan={MAX_COL_SPAN}>
diff --git a/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap b/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
index c447dbab9b..61743eea72 100644
--- a/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
+++ b/packages/base/Table/src/TableSortableCell/__snapshots__/test.tsx.snap
@@ -21,7 +21,7 @@ exports[`TableCell sort direction is asc renders with a sort button in the right
               </div>
               <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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent ml-2 invisible group-hover:visible"
+                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 rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent ml-2 invisible group-hover:visible"
                 data-component-type="button"
                 role="button"
                 tabindex="0"
@@ -69,7 +69,7 @@ exports[`TableCell sort direction is desc renders with a sort button in the righ
               />
               <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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent ml-2 invisible group-hover:visible"
+                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 rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent ml-2 invisible group-hover:visible"
                 data-component-type="button"
                 role="button"
                 tabindex="0"
diff --git a/packages/base/Tabs/src/Tab/Tab.tsx b/packages/base/Tabs/src/Tab/Tab.tsx
index fdeb2126b2..69b7f91732 100644
--- a/packages/base/Tabs/src/Tab/Tab.tsx
+++ b/packages/base/Tabs/src/Tab/Tab.tsx
@@ -93,7 +93,7 @@ const rootClassesByOrientation = (selected: boolean) => ({
 
 const classesByVariant = {
   scrollable: 'shrink-0 max-w-[264px]',
-  fullWidth: 'shrink flex-grow basis-0',
+  fullWidth: 'shrink grow basis-0',
 }
 
 export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
@@ -153,7 +153,7 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
               ownerState.disabled && 'pointer-events-none',
               icon && isHorizontal && 'min-h-0 pr-6',
               'min-w-0 sm:min-w-[160px] md:min-w-[auto]',
-              'border-0 cursor-pointer inline-flex outline-none',
+              'border-0 cursor-pointer inline-flex outline-hidden',
               'items-center select-none align-middle appearance-none',
               'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
               'normal-case whitespace-normal leading-4',
diff --git a/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
index 83763bcc45..dfabf6c12c 100644
--- a/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
+++ b/packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap
@@ -19,7 +19,7 @@ exports[`Tab Tab disabled tab 1`] = `
           <button
             aria-disabled="true"
             aria-selected="false"
-            class="base-Tab base- opacity-50 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none shrink-0 max-w text-gray pointer-events min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab base- opacity-50 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none shrink-0 max-w text-gray pointer-events min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             id=":r1:"
             role="tab"
             tabindex="0"
@@ -61,7 +61,7 @@ exports[`Tab Tab renders 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             id=":r0:"
             role="tab"
             tabindex="0"
@@ -103,7 +103,7 @@ exports[`Tab Tab tab with icon 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-h pr-6 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-h pr-6 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             id=":r2:"
             role="tab"
             tabindex="0"
diff --git a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
index eb09463ba3..6dfb9fdaeb 100644
--- a/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
+++ b/packages/base/Tabs/src/Tabs/__snapshots__/test.tsx.snap
@@ -19,7 +19,7 @@ exports[`Tabs renders 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             id=":r0:"
             role="tab"
@@ -39,7 +39,7 @@ exports[`Tabs renders 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             id=":r1:"
             role="tab"
@@ -82,7 +82,7 @@ exports[`Tabs renders in full width 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink flex-grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             id=":re:"
             role="tab"
@@ -102,7 +102,7 @@ exports[`Tabs renders in full width 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink flex-grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             id=":rf:"
             role="tab"
@@ -146,7 +146,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             id=":r2:"
             role="tab"
@@ -157,7 +157,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
               class="w-full block"
             >
               <div
-                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
+                class="m-0 text-md text-inherit font-semibold whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
               >
                 Tab 1
               </div>
@@ -166,7 +166,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             id=":r3:"
             role="tab"
@@ -177,7 +177,7 @@ exports[`Tabs renders in vertical orientation 1`] = `
               class="w-full block"
             >
               <div
-                class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
+                class="m-0 text-md text-inherit font-semibold whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
               >
                 Tab 2
               </div>
@@ -209,7 +209,7 @@ exports[`Tabs renders with a pre-selected option 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             id=":r4:"
             role="tab"
@@ -229,7 +229,7 @@ exports[`Tabs renders with a pre-selected option 1`] = `
           <button
             aria-disabled="false"
             aria-selected="true"
-            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             id=":r5:"
             role="tab"
@@ -279,7 +279,7 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
           <button
             aria-disabled="false"
             aria-selected="true"
-            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             id=":r6:"
             role="tab"
@@ -299,7 +299,7 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
           <button
             aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 p-0 pb-[0.4375rem] text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-hidden items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             id=":r7:"
             role="tab"
diff --git a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
index 77fc611ba9..1076c2d886 100644
--- a/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/Tag/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Tag dismissable label should render dismissable label 1`] = `
         class="flex gap-2 px-3 overflow-hidden items-center"
       >
         <span
-          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
         >
           Tag
         </span>
@@ -53,7 +53,7 @@ exports[`Tag renders \`blue\` variant 1`] = `
         class="flex gap-2 px-3 overflow-hidden items-center"
       >
         <span
-          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
         >
           Tag
         </span>
@@ -76,7 +76,7 @@ exports[`Tag renders \`light-grey\` variant 1`] = `
         class="flex gap-2 px-3 overflow-hidden items-center"
       >
         <span
-          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
         >
           Tag
         </span>
@@ -99,7 +99,7 @@ exports[`Tag renders with adornment 1`] = `
         class="flex gap-2 px-3 overflow-hidden items-center"
       >
         <span
-          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
         >
           foobar
         </span>
@@ -145,7 +145,7 @@ exports[`Tag renders with connection and icon 1`] = `
         class="flex gap-2 px-3 overflow-hidden items-center"
       >
         <span
-          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+          class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
         >
           foobar
         </span>
diff --git a/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap b/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
index 599c084ccb..f1c80cd22c 100644
--- a/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/TagGroup/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`TagGroup should render label group with 4 labels 1`] = `
           class="flex gap-2 px-3 overflow-hidden items-center"
         >
           <span
-            class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+            class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
           >
             Angular JS
           </span>
@@ -28,7 +28,7 @@ exports[`TagGroup should render label group with 4 labels 1`] = `
           class="flex gap-2 px-3 overflow-hidden items-center"
         >
           <span
-            class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+            class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
           >
             React JS
           </span>
@@ -41,7 +41,7 @@ exports[`TagGroup should render label group with 4 labels 1`] = `
           class="flex gap-2 px-3 overflow-hidden items-center"
         >
           <span
-            class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+            class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
           >
             Ember JS
           </span>
@@ -54,7 +54,7 @@ exports[`TagGroup should render label group with 4 labels 1`] = `
           class="flex gap-2 px-3 overflow-hidden items-center"
         >
           <span
-            class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+            class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
           >
             Vue JS
           </span>
diff --git a/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap b/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
index 798c22d6a2..027f7db415 100644
--- a/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
+++ b/packages/base/Tag/src/TagRectangular/__snapshots__/test.tsx.snap
@@ -9,7 +9,7 @@ exports[`TagRectangular renders rectangular Tag 1`] = `
       class="text-lg transition-none rounded-sm font-semibold h-4 inline-flex content-center justify-center align-middle bg-gray"
     >
       <span
-        class="m-0 text-2xs font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden mx-1 w-max text-graphite"
+        class="m-0 text-2xs font-semibold whitespace-nowrap text-ellipsis overflow-hidden mx-1 w-max text-graphite"
       >
         Reactangular Tag
       </span>
diff --git a/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap b/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
index 3f5e40eeaf..93f8fbbe4d 100644
--- a/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelector/__snapshots__/test.tsx.snap
@@ -15,7 +15,7 @@ exports[`TagSelector disabled render 1`] = `
         class="flex"
       >
         <div
-          class="base-Input base- base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 w-[18.75rem] bg-gray 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 after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue text-gray flex flex-wrap h-auto cursor-pointer [&>input]:min-w [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0 py-1 pl-1"
+          class="base-Input base- base-Input relative gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap p-2 w-[18.75rem] bg-gray 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 after:border [&:has(:focus)]:after:shadow-[0_0_0_3px] [&:has(:focus)]:after:shadow-blue text-gray 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"
         >
           <div
             aria-disabled="true"
@@ -27,7 +27,7 @@ exports[`TagSelector disabled render 1`] = `
               class="flex gap-2 px-3 overflow-hidden items-center"
             >
               <span
-                class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+                class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
               >
                 Afghanistan
               </span>
@@ -52,7 +52,7 @@ exports[`TagSelector disabled render 1`] = `
             aria-autocomplete="list"
             aria-invalid="false"
             autocomplete="off"
-            class="base-Input base- [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-gray [&::-webkit-text-fill-color]:text-gray [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+            class="base-Input base- [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-gray [&::-webkit-text-fill-color]:text-gray [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             disabled=""
             type="text"
             value=""
@@ -83,7 +83,7 @@ exports[`TagSelector preselected value 1`] = `
           class="flex"
         >
           <div
-            class="base-Input base-Input 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]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0 py-1 pl-1"
+            class="base-Input base-Input 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"
           >
             <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"
@@ -94,7 +94,7 @@ exports[`TagSelector preselected value 1`] = `
                 class="flex gap-2 px-3 overflow-hidden items-center"
               >
                 <span
-                  class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap overflow-ellipsis overflow-hidden leading-[inherit]"
+                  class="m-0 text-xxs text-inherit font-semibold whitespace-nowrap text-ellipsis overflow-hidden leading-[inherit]"
                 >
                   Afghanistan
                 </span>
@@ -119,7 +119,7 @@ exports[`TagSelector preselected value 1`] = `
               aria-autocomplete="list"
               aria-invalid="false"
               autocomplete="off"
-              class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+              class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
               type="text"
               value=""
             />
@@ -149,13 +149,13 @@ exports[`TagSelector renders 1`] = `
         class="flex"
       >
         <div
-          class="base-Input base-Input 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]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0 py-1 pl-1"
+          class="base-Input base-Input 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"
         >
           <input
             aria-autocomplete="list"
             aria-invalid="false"
             autocomplete="off"
-            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
             placeholder="Please select..."
             type="text"
             value=""
diff --git a/packages/base/Tagselector/src/TagSelectorInput/TagSelectorInput.tsx b/packages/base/Tagselector/src/TagSelectorInput/TagSelectorInput.tsx
index 7d74494408..44bec6f70b 100644
--- a/packages/base/Tagselector/src/TagSelectorInput/TagSelectorInput.tsx
+++ b/packages/base/Tagselector/src/TagSelectorInput/TagSelectorInput.tsx
@@ -55,7 +55,7 @@ export const TagSelectorInput = forwardRef<HTMLInputElement, InputProps>(
         style={style}
         className={cx(
           `flex flex-wrap h-auto cursor-pointer
-          [&>input]:min-w-[3em] [&>input]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0`,
+          [&>input]:min-w-[3em] [&>input]:grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0`,
           {
             'pr-[2.25em]': Boolean(endAdornment),
             'py-1 pl-1': size === 'medium',
diff --git a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
index 0983eed570..ccb60ba5b7 100644
--- a/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
+++ b/packages/base/Tagselector/src/TagSelectorInput/__snapshots__/test.tsx.snap
@@ -6,11 +6,11 @@ exports[`TagSelectorInput renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Input 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]:flex-grow [&>input]:w-0 [&>input]:h-6 [&>input]:pl-1 [&>input]:pr-0 [&>input]:mb-0 py-1 pl-1"
+      class="base-Input 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"
     >
       <input
         aria-invalid="false"
-        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+        class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
         data-testid="data-testid"
         placeholder="placeholder"
         type="text"
diff --git a/packages/base/Test-Utils/src/test-utils/styles.css b/packages/base/Test-Utils/src/test-utils/styles.css
index f5d9004693..e0a1e73afa 100644
--- a/packages/base/Test-Utils/src/test-utils/styles.css
+++ b/packages/base/Test-Utils/src/test-utils/styles.css
@@ -1,5 +1,6 @@
 /* we can't apply reset.css here as it would override current styles */
-/* @tailwind base; */
 
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css';
+@config "../../../../../tailwind.config.js";
diff --git a/packages/base/Timepicker/src/TimePicker/TimePicker.tsx b/packages/base/Timepicker/src/TimePicker/TimePicker.tsx
index cbcd6396d2..bedee332fe 100644
--- a/packages/base/Timepicker/src/TimePicker/TimePicker.tsx
+++ b/packages/base/Timepicker/src/TimePicker/TimePicker.tsx
@@ -126,7 +126,7 @@ export const TimePicker = ({ status = 'default', ...props }: Props) => {
             maskPlaceholder='-'
             value={value}
             onChange={onChange}
-            className={'text-sm border-none p-0 m-0 outline-none'}
+            className={'text-sm border-none p-0 m-0 outline-hidden'}
           />
         }
       />
diff --git a/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap b/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
index b8fc0aaf88..5058021f73 100644
--- a/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
+++ b/packages/base/Timepicker/src/TimePicker/__snapshots__/test.tsx.snap
@@ -11,13 +11,13 @@ exports[`TimePicker renders 1`] = `
       <input
         aria-invalid="false"
         autocomplete="none"
-        class="base-Input bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 -mr [&::-webkit-calendar-picker [&::-webkit-calendar-picker-indicator]:right [&::-webkit-calendar-picker-indicator]:cursor [&::-webkit-calendar-picker-indicator]:bg"
+        class="base-Input bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 -mr [&::-webkit-calendar-picker [&::-webkit-calendar-picker-indicator]:right [&::-webkit-calendar-picker-indicator]:cursor [&::-webkit-calendar-picker-indicator]:bg"
         step="60"
         type="time"
         value="21:00"
       />
       <div
-        class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto pointer-events"
+        class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto grow-0 shrink-0 basis-auto pointer-events"
       >
         <svg
           class="fill-current inline-block text-inherit h-[1em] align-[-.125em] bg-white absolute right-[0.625rem] pointer-events m-0 select-none grow shrink basis-0"
diff --git a/packages/base/Typography/package.json b/packages/base/Typography/package.json
index bd659338bf..d8d4e7a244 100644
--- a/packages/base/Typography/package.json
+++ b/packages/base/Typography/package.json
@@ -33,8 +33,7 @@
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
     "@toptal/picasso-tailwind-merge": "^2.0.0",
-    "react": ">=16.12.0 < 19.0.0",
-    "tailwindcss": ">=3"
+    "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
diff --git a/packages/base/Typography/src/Typography/Typography.tsx b/packages/base/Typography/src/Typography/Typography.tsx
index ba9a7c0a60..2a465b6178 100644
--- a/packages/base/Typography/src/Typography/Typography.tsx
+++ b/packages/base/Typography/src/Typography/Typography.tsx
@@ -200,9 +200,7 @@ export const Typography = forwardRef<HTMLElement, Props>(function Typography(
         weight ? WEIGHTS[weight] : VARIANT_WEIGHT[variant][size],
         align ? ALIGN[align] : undefined,
         underline ? UNDERLINE[underline] : undefined,
-        noWrap
-          ? 'whitespace-nowrap overflow-ellipsis overflow-hidden'
-          : undefined,
+        noWrap ? 'whitespace-nowrap text-ellipsis overflow-hidden' : undefined,
         lineThrough ? 'line-through' : undefined,
         inline ? 'inline' : undefined,
         className
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 ca17034eb9..85404be98f 100644
--- a/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
+++ b/packages/base/Utils/src/utils/Modal/__snapshots__/test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
       <button
         aria-disabled="false"
         aria-hidden="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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -30,7 +30,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
       >
         <div
           aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
           style="transition-duration: 300ms; opacity: 1;"
         />
         <div
@@ -38,7 +38,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
           role="dialog"
           style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
@@ -48,7 +48,7 @@ exports[`Modal useModal opens and closes modal 1`] = `
           </p>
           <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-none [[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"
+            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"
             data-component-type="button"
             role="button"
             tabindex="0"
@@ -82,7 +82,7 @@ exports[`Modal useModal opens and closes modal 2`] = `
     >
       <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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -111,7 +111,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
       <button
         aria-disabled="false"
         aria-hidden="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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -126,7 +126,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
       <button
         aria-disabled="false"
         aria-hidden="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-none [[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"
+        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"
         data-component-type="button"
         role="button"
         tabindex="0"
@@ -145,7 +145,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
       >
         <div
           aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
           style="transition-duration: 300ms; opacity: 1;"
         />
         <div
@@ -153,7 +153,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
           role="dialog"
           style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
@@ -173,7 +173,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
       >
         <div
           aria-hidden="true"
-          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-black/50"
           style="transition-duration: 300ms; opacity: 1;"
         />
         <div
@@ -181,7 +181,7 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
           tabindex="0"
         />
         <div
-          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-hidden overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
           role="dialog"
           style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
diff --git a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
index b9e562e782..9258be3354 100644
--- a/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
+++ b/packages/picasso-forms/src/Form/__snapshots__/test.tsx.snap
@@ -22,7 +22,7 @@ exports[`Form renders 1`] = `
             <input
               aria-invalid="false"
               autocomplete="none"
-              class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+              class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
               id="test"
               name="test"
               placeholder="test input"
@@ -33,7 +33,7 @@ exports[`Form renders 1`] = `
         </div>
         <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-none [[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"
+          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"
           data-component-type="button"
           role="button"
           tabindex="0"
@@ -73,7 +73,7 @@ exports[`Form renders with an error 1`] = `
             <input
               aria-invalid="true"
               autocomplete="none"
-              class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
+              class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
               id="test"
               name="test"
               placeholder="test input"
@@ -97,7 +97,7 @@ exports[`Form renders with an error 1`] = `
         </div>
         <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-none [[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"
+          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"
           data-component-type="button"
           role="button"
           tabindex="0"
diff --git a/packages/picasso-rich-text-editor/src/RichTextEditorButton/RichTextEditorButton.tsx b/packages/picasso-rich-text-editor/src/RichTextEditorButton/RichTextEditorButton.tsx
index 6bf867d629..156918a8ec 100644
--- a/packages/picasso-rich-text-editor/src/RichTextEditorButton/RichTextEditorButton.tsx
+++ b/packages/picasso-rich-text-editor/src/RichTextEditorButton/RichTextEditorButton.tsx
@@ -23,7 +23,7 @@ const RichTextEditorButton = ({
     variant='flat'
     onClick={onClick}
     className={twMerge(
-      'rounded-sm [&+&]:!ml-2',
+      'rounded-sm [&+&]:ml-2!',
       active && 'bg-graphite-700 [&:not(:hover)_svg]:fill-white',
       className
     )}
diff --git a/packages/picasso-tailwind/package.json b/packages/picasso-tailwind/package.json
index 13ac0f0807..8c062d164d 100644
--- a/packages/picasso-tailwind/package.json
+++ b/packages/picasso-tailwind/package.json
@@ -24,10 +24,10 @@
     "prepublishOnly": "yarn build:package"
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.10"
+    "tailwindcss": "^4.2.1"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.4.10"
+    "tailwindcss": "^4.2.1"
   },
   "sideEffects": false,
   "files": [
diff --git a/packages/picasso-tailwind/src/index.js b/packages/picasso-tailwind/src/index.js
index 9098a8312d..8255446202 100644
--- a/packages/picasso-tailwind/src/index.js
+++ b/packages/picasso-tailwind/src/index.js
@@ -2,7 +2,6 @@ const plugin = require('tailwindcss/plugin')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  presets: [],
   plugins: [
     plugin(({ addUtilities }) => {
       addUtilities({
diff --git a/packages/picasso/README.md b/packages/picasso/README.md
index 79f4c658b9..58a8549009 100644
--- a/packages/picasso/README.md
+++ b/packages/picasso/README.md
@@ -9,8 +9,7 @@ Picasso is Toptal's component library, based on Toptal's design system - BASE. U
 ## Installation instructions
 
 ```js
-yarn add @toptal/picasso @toptal/picasso-provider @toptal/picasso-tailwind
- tailwindcss postcss autoprefixer
+yarn add @toptal/picasso @toptal/picasso-provider @toptal/picasso-tailwind tailwindcss @tailwindcss/postcss postcss autoprefixer
 ```
 
 ## Create `tailwind.config.js` in the root of the project
@@ -46,9 +45,10 @@ module.exports = {
 
 ```css
 /* index.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css';
+@config "./tailwind.config.js";
 ```
 
 ## Setup webpack to use PostCSS loader with tailwindcss plugin
@@ -72,13 +72,7 @@ module.exports = {
         postcssOptions: {
           config: false,
           plugins: {
-            tailwindcss: {
-              config: require.resolve(
-                // update with actual path to tailwind config
-                './tailwind.config.js'
-              ),
-            },
-            autoprefixer: {},
+            '@tailwindcss/postcss': {},
           },
         },
       },
diff --git a/tailwind.config.js b/tailwind.config.js
index 3f0d254707..17e89285b0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,4 @@ module.exports = {
     require('@toptal/base-tailwind'),
     require('@toptal/picasso-tailwind'),
   ],
-  corePlugins: {
-    preflight: false,
-  },
 }
diff --git a/yarn.lock b/yarn.lock
index af2d9e3f2b..5f88804f9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1846,25 +1846,25 @@
   dependencies:
     fast-check "^3.21.0"
 
-"@emnapi/core@^1.1.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.2.0.tgz#7b738e5033738132bf6af0b8fae7b05249bdcbd7"
-  integrity sha512-E7Vgw78I93we4ZWdYCb4DGAwRROGkMIXk7/y87UmANR+J6qsWusmC3gLt0H+O0KOt5e6O38U8oJamgbudrES/w==
+"@emnapi/core@^1.1.0", "@emnapi/core@^1.7.1", "@emnapi/core@^1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.8.1.tgz#fd9efe721a616288345ffee17a1f26ac5dd01349"
+  integrity sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==
   dependencies:
-    "@emnapi/wasi-threads" "1.0.1"
+    "@emnapi/wasi-threads" "1.1.0"
     tslib "^2.4.0"
 
-"@emnapi/runtime@^1.1.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.2.0.tgz#71d018546c3a91f3b51106530edbc056b9f2f2e3"
-  integrity sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==
+"@emnapi/runtime@^1.1.0", "@emnapi/runtime@^1.7.1", "@emnapi/runtime@^1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.8.1.tgz#550fa7e3c0d49c5fb175a116e8cd70614f9a22a5"
+  integrity sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==
   dependencies:
     tslib "^2.4.0"
 
-"@emnapi/wasi-threads@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.0.1.tgz#d7ae71fd2166b1c916c6cd2d0df2ef565a2e1a5b"
-  integrity sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==
+"@emnapi/wasi-threads@1.1.0", "@emnapi/wasi-threads@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz#60b2102fddc9ccb78607e4a3cf8403ea69be41bf"
+  integrity sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==
   dependencies:
     tslib "^2.4.0"
 
@@ -2477,7 +2477,7 @@
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
-"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
+"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz#6342a19f44347518c93e43b1ac69deb3c4656a1f"
   integrity sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==
@@ -2506,7 +2506,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0", "@jridgewell/sourcemap-codec@^1.5.5":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
   integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
@@ -2938,6 +2938,15 @@
     "@emnapi/runtime" "^1.1.0"
     "@tybys/wasm-util" "^0.9.0"
 
+"@napi-rs/wasm-runtime@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz#c3705ab549d176b8dc5172723d6156c3dc426af2"
+  integrity sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==
+  dependencies:
+    "@emnapi/core" "^1.7.1"
+    "@emnapi/runtime" "^1.7.1"
+    "@tybys/wasm-util" "^0.10.1"
+
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
@@ -5625,6 +5634,115 @@
   dependencies:
     defer-to-connect "^2.0.1"
 
+"@tailwindcss/node@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/node/-/node-4.2.1.tgz#e963ac242a885353a4660e7e3e9c695cde7d3fc9"
+  integrity sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==
+  dependencies:
+    "@jridgewell/remapping" "^2.3.5"
+    enhanced-resolve "^5.19.0"
+    jiti "^2.6.1"
+    lightningcss "1.31.1"
+    magic-string "^0.30.21"
+    source-map-js "^1.2.1"
+    tailwindcss "4.2.1"
+
+"@tailwindcss/oxide-android-arm64@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.1.tgz#a7c24919b607e7f884e6ab97799d12c7fb5b47bd"
+  integrity sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==
+
+"@tailwindcss/oxide-darwin-arm64@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.1.tgz#6f6e91ff0e1b5476cc0dad0da1ea8474f4563212"
+  integrity sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==
+
+"@tailwindcss/oxide-darwin-x64@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.1.tgz#1e59ef0665f6cb9e658bf0ebcb3cb50f21b2c175"
+  integrity sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==
+
+"@tailwindcss/oxide-freebsd-x64@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.1.tgz#6b0c75e9dac7f1a241cb9a5eaa89f0d9664835b6"
+  integrity sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.1.tgz#717044d8fe746b1f0760485946c0c9a900174f7b"
+  integrity sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==
+
+"@tailwindcss/oxide-linux-arm64-gnu@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.1.tgz#f544b0faf166d80791347911b2dd4372a893129d"
+  integrity sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==
+
+"@tailwindcss/oxide-linux-arm64-musl@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.1.tgz#9fbaf8dc00b858a2b955526abb15d88f5678d1ef"
+  integrity sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==
+
+"@tailwindcss/oxide-linux-x64-gnu@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.1.tgz#6ab4e6b8d308d037a1155b8443df5941dbfa6aa1"
+  integrity sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==
+
+"@tailwindcss/oxide-linux-x64-musl@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.1.tgz#52c55593394dff85f1fa88172f69f8fdcde182b6"
+  integrity sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==
+
+"@tailwindcss/oxide-wasm32-wasi@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.1.tgz#7401e35f881d3654b6180badd1243d75a2702ea5"
+  integrity sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==
+  dependencies:
+    "@emnapi/core" "^1.8.1"
+    "@emnapi/runtime" "^1.8.1"
+    "@emnapi/wasi-threads" "^1.1.0"
+    "@napi-rs/wasm-runtime" "^1.1.1"
+    "@tybys/wasm-util" "^0.10.1"
+    tslib "^2.8.1"
+
+"@tailwindcss/oxide-win32-arm64-msvc@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.1.tgz#63a502e7b696dcd976aa356b94ce0f4f8f832c44"
+  integrity sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==
+
+"@tailwindcss/oxide-win32-x64-msvc@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.1.tgz#8cc59b28ebc4dc866c0c14d7057f07f0ed04c4a8"
+  integrity sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==
+
+"@tailwindcss/oxide@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide/-/oxide-4.2.1.tgz#43ae4217268a7e8b4736f1c056d0ef6f393c79d3"
+  integrity sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==
+  optionalDependencies:
+    "@tailwindcss/oxide-android-arm64" "4.2.1"
+    "@tailwindcss/oxide-darwin-arm64" "4.2.1"
+    "@tailwindcss/oxide-darwin-x64" "4.2.1"
+    "@tailwindcss/oxide-freebsd-x64" "4.2.1"
+    "@tailwindcss/oxide-linux-arm-gnueabihf" "4.2.1"
+    "@tailwindcss/oxide-linux-arm64-gnu" "4.2.1"
+    "@tailwindcss/oxide-linux-arm64-musl" "4.2.1"
+    "@tailwindcss/oxide-linux-x64-gnu" "4.2.1"
+    "@tailwindcss/oxide-linux-x64-musl" "4.2.1"
+    "@tailwindcss/oxide-wasm32-wasi" "4.2.1"
+    "@tailwindcss/oxide-win32-arm64-msvc" "4.2.1"
+    "@tailwindcss/oxide-win32-x64-msvc" "4.2.1"
+
+"@tailwindcss/postcss@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/postcss/-/postcss-4.2.1.tgz#efce3b23608b23324ed4848ff1aae657adfe0c5f"
+  integrity sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    "@tailwindcss/node" "4.2.1"
+    "@tailwindcss/oxide" "4.2.1"
+    postcss "^8.5.6"
+    tailwindcss "4.2.1"
+
 "@testing-library/dom@^9.0.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.0.tgz#ed8ce10aa5e05eb6eaf0635b5b8975d889f66075"
@@ -5992,6 +6110,13 @@
     "@tufjs/canonical-json" "2.0.0"
     minimatch "^9.0.5"
 
+"@tybys/wasm-util@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz#ecddd3205cf1e2d5274649ff0eedd2991ed7f414"
+  integrity sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==
+  dependencies:
+    tslib "^2.4.0"
+
 "@tybys/wasm-util@^0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.9.0.tgz#3e75eb00604c8d6db470bf18c37b7d984a0e3355"
@@ -7651,11 +7776,6 @@ arg@^4.1.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
-arg@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
-  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
@@ -8845,7 +8965,7 @@ camel-case@^4.1.1, camel-case@^4.1.2:
     pascal-case "^3.1.2"
     tslib "^2.0.3"
 
-camelcase-css@2.0.1, camelcase-css@^2.0.1:
+camelcase-css@2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
@@ -9441,7 +9561,7 @@ commander@^2.15.1, commander@^2.16.0, commander@^2.18.0, commander@^2.19.0, comm
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^4.0.0, commander@^4.0.1, commander@^4.1.1:
+commander@^4.0.1, commander@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
@@ -10835,6 +10955,11 @@ detect-indent@^6.0.0:
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz"
   integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
 
+detect-libc@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
+  integrity sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz"
@@ -11025,11 +11150,6 @@ devlop@^1.0.0, devlop@^1.1.0:
   dependencies:
     dequal "^2.0.0"
 
-didyoumean@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
-  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
-
 diff-match-patch@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
@@ -11074,11 +11194,6 @@ dir-glob@^3.0.0, dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-dlv@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
-  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
-
 dnd-core@^16.0.1:
   version "16.0.1"
   resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-16.0.1.tgz#a1c213ed08961f6bd1959a28bb76f1a868360d19"
@@ -11408,13 +11523,13 @@ endent@^2.0.1:
     fast-json-parse "^1.0.3"
     objectorarray "^1.0.5"
 
-enhanced-resolve@^5.0.0, enhanced-resolve@^5.17.1, enhanced-resolve@^5.18.2, enhanced-resolve@^5.7.0, enhanced-resolve@^5.8.3:
-  version "5.18.3"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz#9b5f4c5c076b8787c78fe540392ce76a88855b44"
-  integrity sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.17.1, enhanced-resolve@^5.18.2, enhanced-resolve@^5.19.0, enhanced-resolve@^5.7.0, enhanced-resolve@^5.8.3:
+  version "5.20.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.20.0.tgz#323c2a70d2aa7fb4bdfd6d3c24dfc705c581295d"
+  integrity sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==
   dependencies:
     graceful-fs "^4.2.4"
-    tapable "^2.2.0"
+    tapable "^2.3.0"
 
 enquirer@2.4.1, enquirer@^2.3.6, enquirer@^2.4.1:
   version "2.4.1"
@@ -13246,18 +13361,6 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@7.1.6:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@^10.0.0, glob@^10.2.2, glob@^10.3.10, glob@^10.3.7, glob@^10.4.5:
   version "10.4.5"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
@@ -15857,11 +15960,16 @@ jest@^29.7.0:
     import-local "^3.0.2"
     jest-cli "^29.7.0"
 
-jiti@^1.18.2, jiti@^1.21.0:
+jiti@^1.18.2:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
 
+jiti@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.6.1.tgz#178ef2fc9a1a594248c20627cd820187a4d78d92"
+  integrity sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==
+
 jju@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/jju/-/jju-1.4.0.tgz#a3abe2718af241a2b2904f84a625970f389ae32a"
@@ -16592,7 +16700,81 @@ libnpmversion@^8.0.1:
     proc-log "^5.0.0"
     semver "^7.3.7"
 
-lilconfig@^2.0.5, lilconfig@^2.1.0:
+lightningcss-android-arm64@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz#609ff48332adff452a8157a7c2842fd692a8eac4"
+  integrity sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==
+
+lightningcss-darwin-arm64@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz#a13da040a7929582bab3ace9a67bdc146e99fc2d"
+  integrity sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==
+
+lightningcss-darwin-x64@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz#f7482c311273571ec0c2bd8277c1f5f6e90e03a4"
+  integrity sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==
+
+lightningcss-freebsd-x64@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz#91df1bb290f1cb7bb2af832d7d0d8809225e0124"
+  integrity sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==
+
+lightningcss-linux-arm-gnueabihf@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz#c3cad5ae8b70045f21600dc95295ab6166acf57e"
+  integrity sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==
+
+lightningcss-linux-arm64-gnu@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz#a5c4f6a5ac77447093f61b209c0bd7fef1f0a3e3"
+  integrity sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==
+
+lightningcss-linux-arm64-musl@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz#af26ab8f829b727ada0a200938a6c8796ff36900"
+  integrity sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==
+
+lightningcss-linux-x64-gnu@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz#a891d44e84b71c0d88959feb9a7522bbf61450ee"
+  integrity sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==
+
+lightningcss-linux-x64-musl@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz#8c8b21def851f4d477fa897b80cb3db2b650bc6e"
+  integrity sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==
+
+lightningcss-win32-arm64-msvc@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz#79000fb8c57e94a91b8fc643e74d5a54407d7080"
+  integrity sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==
+
+lightningcss-win32-x64-msvc@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz#7f025274c81c7d659829731e09c8b6f442209837"
+  integrity sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==
+
+lightningcss@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.31.1.tgz#1a19dd327b547a7eda1d5c296ebe1e72df5a184b"
+  integrity sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==
+  dependencies:
+    detect-libc "^2.0.3"
+  optionalDependencies:
+    lightningcss-android-arm64 "1.31.1"
+    lightningcss-darwin-arm64 "1.31.1"
+    lightningcss-darwin-x64 "1.31.1"
+    lightningcss-freebsd-x64 "1.31.1"
+    lightningcss-linux-arm-gnueabihf "1.31.1"
+    lightningcss-linux-arm64-gnu "1.31.1"
+    lightningcss-linux-arm64-musl "1.31.1"
+    lightningcss-linux-x64-gnu "1.31.1"
+    lightningcss-linux-x64-musl "1.31.1"
+    lightningcss-win32-arm64-msvc "1.31.1"
+    lightningcss-win32-x64-msvc "1.31.1"
+
+lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
@@ -17096,6 +17278,13 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+magic-string@^0.30.21:
+  version "0.30.21"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"
+  integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.5"
+
 make-dir@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e"
@@ -18285,7 +18474,7 @@ mylas@^2.1.9:
   resolved "https://registry.yarnpkg.com/mylas/-/mylas-2.1.13.tgz#1e23b37d58fdcc76e15d8a5ed23f9ae9fc0cbdf4"
   integrity sha512-+MrqnJRtxdF+xngFfUUkIMQrUUL0KsxbADUkn23Z/4ibGg192Q+z+CQyiYwvWTsYjJygmMR8+w3ZDa98Zh6ESg==
 
-mz@^2.4.0, mz@^2.7.0:
+mz@^2.4.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
@@ -19081,11 +19270,6 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
-object-hash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
-  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
-
 object-inspect@^1.12.3, object-inspect@^1.13.3:
   version "1.13.4"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.4.tgz#8375265e21bc20d0fa582c22e1b13485d6e00213"
@@ -20023,7 +20207,7 @@ pinpoint@^1.1.0:
   resolved "https://registry.yarnpkg.com/pinpoint/-/pinpoint-1.1.0.tgz#0cf7757a6977f1bf7f6a32207b709e377388e874"
   integrity sha512-+04FTD9x7Cls2rihLlo57QDCcHoLBGn5Dk51SwtFBWkUWLxZaBXyNVpCw1S+atvE7GmnFjeaRZ0WLq3UYuqAdg==
 
-pirates@^4.0.1, pirates@^4.0.4, pirates@^4.0.5:
+pirates@^4.0.4, pirates@^4.0.5:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
@@ -20122,30 +20306,6 @@ postcss-flexbugs-fixes@^4.2.1:
   dependencies:
     postcss "^7.0.26"
 
-postcss-import@^15.1.0:
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
-  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
-  dependencies:
-    postcss-value-parser "^4.0.0"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
-postcss-js@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
-  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
-  dependencies:
-    camelcase-css "^2.0.1"
-
-postcss-load-config@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
-  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
-  dependencies:
-    lilconfig "^2.0.5"
-    yaml "^2.1.1"
-
 postcss-loader@^4.2.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz"
@@ -20232,13 +20392,6 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
-postcss-nested@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
-  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
-  dependencies:
-    postcss-selector-parser "^6.0.11"
-
 postcss-resolve-nested-selector@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz"
@@ -20268,7 +20421,7 @@ postcss-syntax@^0.36.2:
   version "0.36.2"
   resolved "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz"
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -20291,7 +20444,7 @@ postcss-values-parser@^6.0.2:
     is-url-superb "^4.0.0"
     quote-unquote "^1.0.0"
 
-postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6, postcss@^8.1.7, postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.23, postcss@^8.4.31, postcss@^8.4.32:
+postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6, postcss@^8.1.7, postcss@^8.2.15, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.22, postcss@^8.4.31, postcss@^8.4.32, postcss@^8.5.6:
   version "8.4.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
   integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
@@ -21246,13 +21399,6 @@ react@^16.8.3, react@^16.8.6, react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
-  dependencies:
-    pify "^2.3.0"
-
 read-cmd-shim@4.0.0, read-cmd-shim@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz#640a08b473a49043e394ae0c7a34dd822c73b9bb"
@@ -21894,7 +22040,7 @@ resolve.exports@2.0.3, resolve.exports@^2.0.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.3.tgz#41955e6f1b4013b7586f873749a635dea07ebe3f"
   integrity sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.21.0, resolve@^1.22.1, resolve@^1.22.10, resolve@^1.22.2, resolve@^1.22.4, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.21.0, resolve@^1.22.1, resolve@^1.22.10, resolve@^1.22.4, resolve@^1.3.2:
   version "1.22.10"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
   integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
@@ -22727,10 +22873,10 @@ source-list-map@^2.0.0:
   resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.1, source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
 source-map-resolve@^0.6.0:
   version "0.6.0"
@@ -23425,19 +23571,6 @@ stylus-lookup@^3.0.1:
     commander "^2.8.1"
     debug "^4.1.0"
 
-sucrase@^3.32.0:
-  version "3.34.0"
-  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
-  integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
-  dependencies:
-    "@jridgewell/gen-mapping" "^0.3.2"
-    commander "^4.0.0"
-    glob "7.1.6"
-    lines-and-columns "^1.1.6"
-    mz "^2.7.0"
-    pirates "^4.0.1"
-    ts-interface-checker "^0.1.9"
-
 super-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/super-regex/-/super-regex-1.0.0.tgz#dd90d944a925a1083e7d8570919b21cb76e3d925"
@@ -23596,43 +23729,20 @@ tailwind-merge@^2.2.2:
   dependencies:
     "@babel/runtime" "^7.24.1"
 
-tailwindcss@^3.4.10:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.10.tgz#70442d9aeb78758d1f911af29af8255ecdb8ffef"
-  integrity sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==
-  dependencies:
-    "@alloc/quick-lru" "^5.2.0"
-    arg "^5.0.2"
-    chokidar "^3.5.3"
-    didyoumean "^1.2.2"
-    dlv "^1.1.3"
-    fast-glob "^3.3.0"
-    glob-parent "^6.0.2"
-    is-glob "^4.0.3"
-    jiti "^1.21.0"
-    lilconfig "^2.1.0"
-    micromatch "^4.0.5"
-    normalize-path "^3.0.0"
-    object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.4.23"
-    postcss-import "^15.1.0"
-    postcss-js "^4.0.1"
-    postcss-load-config "^4.0.1"
-    postcss-nested "^6.0.1"
-    postcss-selector-parser "^6.0.11"
-    resolve "^1.22.2"
-    sucrase "^3.32.0"
+tailwindcss@4.2.1, tailwindcss@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.2.1.tgz#018c4720b58baf98a6bf56b0a12aa797c6cfef1d"
+  integrity sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
-  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.1, tapable@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.3.0.tgz#7e3ea6d5ca31ba8e078b560f0d83ce9a14aa8be6"
+  integrity sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==
 
 tar-stream@^3.0.0:
   version "3.1.7"
@@ -24116,11 +24226,6 @@ ts-graphviz@^1.5.0:
   resolved "https://registry.yarnpkg.com/ts-graphviz/-/ts-graphviz-1.6.1.tgz#f44525c048cb8c8c188b7324d2a91015fd31ceaf"
   integrity sha512-9aZKR7hoQAHXlgb7HvUND3y5VhEI5PMNVv/BfelPXebcsxdwZhBYbM8XpnV4NfiHV9O0/sAI9sQVuce0gogzlA==
 
-ts-interface-checker@^0.1.9:
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
-  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
-
 ts-loader@^9.5.1:
   version "9.5.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.5.1.tgz#63d5912a86312f1fbe32cef0859fb8b2193d9b89"
@@ -24207,10 +24312,10 @@ tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.4.1, tslib@^2.5.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.4.1, tslib@^2.5.0, tslib@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
 tsutils@^3.21.0:
   version "3.21.0"
@@ -25790,7 +25895,7 @@ yallist@^5.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-5.0.0.tgz#00e2de443639ed0d78fd87de0d27469fbcffb533"
   integrity sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==
 
-yaml@2, yaml@^1.10.0, yaml@^1.7.2, yaml@^2.1.1, yaml@^2.6.0, yaml@^2.8.0, yaml@~2.5.0:
+yaml@2, yaml@^1.10.0, yaml@^1.7.2, yaml@^2.6.0, yaml@^2.8.0, yaml@~2.5.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.7.0.tgz#aef9bb617a64c937a9a748803786ad8d3ffe1e98"
   integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==