diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 02968b3001..d345bab4cc 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -29,27 +29,5 @@ jobs:
           token: ${{ steps.app-token.outputs.token }}
           fetch-depth: 0
 
-      - name: Install
-        uses: ./.github/actions/install
-
-      - name: Run lint check
-        run: pnpm run lint:check
-
-      - name: Run format check
-        run: pnpm run format:check
-
-      - name: Run tests
-        run: pnpm run test:unit
-
-      - name: Run e2e tests
-        timeout-minutes: 15
-        uses: ./.github/actions/run-e2e-tests
-
       - name: release
-        if:
-          ${{ github.ref_name == 'main' && github.actor != 'support-empathy' &&
-          !startsWith(github.event.head_commit.message, 'chore(release):') }}
-        uses: ./.github/actions/release-alpha
-        with:
-          npm_token: ${{ secrets.NPM_TOKEN_GRANULAR_ACCESS }}
-          github_token: ${{ steps.app-token.outputs.token }}
+        uses: ./.github/workflows/publish-release.yml
diff --git a/.github/workflows/publish-release.yml b/.github/workflows/publish-release.yml
index de90b7a562..64f47b1bfd 100644
--- a/.github/workflows/publish-release.yml
+++ b/.github/workflows/publish-release.yml
@@ -1,5 +1,8 @@
 name: Release a new version
-on: [workflow_dispatch]
+on:
+  push:
+    branches:
+      - feat/migrate-tailwind
 jobs:
   release:
     runs-on: ubuntu-latest
@@ -25,20 +28,6 @@ jobs:
       - name: Install
         uses: ./.github/actions/install
 
-      - name: lint packages
-        run: pnpm run lint:check
-
-      - name: Run format check
-        run: pnpm run format:check
-
-      - name: Run tests
-        run: pnpm run test:unit
-
-      - name: Run e2e tests
-        if: false # Temporarily disabled until the e2e are reviewed and updated so that it does not fail intermittently
-        timeout-minutes: 15
-        uses: ./.github/actions/run-e2e-tests
-
       - name: configure git user
         run: |
           git config --local user.email "x@empathy.co"
@@ -52,11 +41,4 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN_GRANULAR_ACCESS }}
 
       - name: publish the release
-        run: pnpm run publish-release
-
-      - name: push tags
-        uses: ad-m/github-push-action@master
-        with:
-          github_token: ${{ steps.app-token.outputs.token }}
-          branch: ${{ github.ref }}
-          tags: true
+        run: pnpm run publish-release
\ No newline at end of file
diff --git a/packages/x-components/.postcssrc.js b/packages/x-components/.postcssrc.js
deleted file mode 100644
index b5c4eba7df..0000000000
--- a/packages/x-components/.postcssrc.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('tailwindcss/nesting'),
-    require('autoprefixer'),
-    require('postcss-logical'),
-    require('postcss-dir-pseudo-class'),
-  ],
-}
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index 8b308584fb..45c0510f00 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -5753,7 +5753,7 @@ All notable changes to this project will be documented in this file. See
 - **design-system:** add option list tokens
 - **design-system:** add `x-grid` Design System tokens
 - **design-system:** add `x-result` Design System tokens
-- **design-system:** improve `x-icon` token
+- **design-system:** improve `xds:icon` token
 - **design-system:** add `x-row` and `x-row-item` tokens
 - **design-system:** add `x-picture` Design System tokens
 - **facets:** add `SortedFilters` component
@@ -5827,11 +5827,11 @@ All notable changes to this project will be documented in this file. See
 
 - **design-system:** add `input-group` variants
 - **design-system:** add `justified` variant to `x-filter` component
-- **design-system:** add `x-button` css class in the necessary elements
+- **design-system:** add `xds:button` css class in the necessary elements
 - **design-system:** add `x-filter` tokens and CSS
 - **design-system:** add `x-suggestion` design tokens
 - **design-system:** add `x-tag` variants tokens and CSS styles
-- **design-system:** add default `x-facet` tokens and CSS and `x-icon` variants
+- **design-system:** add default `x-facet` tokens and CSS and `xds:icon` variants
 - **design-system:** add dropdown design tokens
 - **design-system:** add input default tokens and CSS
 - **design-system:** add input variants tokens and CSS
diff --git a/packages/x-components/build/rollup.config.ts b/packages/x-components/build/rollup.config.ts
index e970999269..8fcd5be916 100644
--- a/packages/x-components/build/rollup.config.ts
+++ b/packages/x-components/build/rollup.config.ts
@@ -68,7 +68,13 @@ export const rollupConfig: RollupOptions = {
           declarationDir: typesOutputDir,
           target: 'es2020',
         },
-        exclude: ['node_modules', './src/main.ts', '**/__tests__/**', '**/__stubs__/**'],
+        exclude: [
+          'node_modules',
+          './src/main.ts',
+          '**/__tests__/**',
+          '**/__stubs__/**',
+          '**/src/tailwind/tailwind.config.ts',
+        ],
       },
     }),
     vue3({
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index b86caf018f..5676cd4fb8 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.188",
+  "version": "6.0.0-alpha.188-RC.MM.3",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -102,6 +102,8 @@
     "@empathyco/x-tailwindcss": "^2.0.0-alpha.21",
     "@microsoft/api-documenter": "7.28.2",
     "@microsoft/api-extractor": "7.55.2",
+    "@tailwindcss/postcss": "4.1.17",
+    "@tailwindcss/vite": "4.1.17",
     "@testing-library/jest-dom": "6.9.1",
     "@types/aria-query": "5.0.4",
     "@types/jest": "29.5.14",
@@ -109,16 +111,12 @@
     "@vitejs/plugin-vue": "5.2.4",
     "@vue/test-utils": "2.4.6",
     "@vue/vue3-jest": "29.2.6",
-    "autoprefixer": "10.4.23",
     "convert-source-map": "2.0.0",
     "cypress": "15.8.1",
     "esbuild": "0.27.2",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-scss-transform": "1.0.4",
-    "postcss": "8.5.6",
-    "postcss-dir-pseudo-class": "7.0.2",
-    "postcss-logical": "4.0.2",
     "rimraf": "3.0.2",
     "rollup": "4.54.0",
     "rollup-plugin-copy": "3.5.0",
@@ -128,7 +126,7 @@
     "rollup-plugin-vue": "6.0.0",
     "sass": "1.97.1",
     "start-server-and-test": "2.1.3",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.1.17",
     "ts-jest": "29.4.6",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",
diff --git a/packages/x-components/src/components/__tests__/base-switch.spec.ts b/packages/x-components/src/components/__tests__/base-switch.spec.ts
index 921a1a286a..1415bbdfb6 100644
--- a/packages/x-components/src/components/__tests__/base-switch.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-switch.spec.ts
@@ -30,12 +30,12 @@ describe('testing Switch component', () => {
     expect(wrapper.attributes('role')).toBe('switch')
     expect(wrapper.attributes('aria-checked')).toBeFalsy()
     expect(wrapper.classes('x-switch--is-selected')).toBe(false)
-    expect(wrapper.classes('x-selected')).toBe(false)
+    expect(wrapper.classes('xds:selected')).toBe(false)
 
     await wrapper.trigger('click')
     expect(wrapper.attributes('aria-checked')).toBe('true')
     expect(wrapper.classes('x-switch--is-selected')).toBe(true)
-    expect(wrapper.classes('x-selected')).toBe(true)
+    expect(wrapper.classes('xds:selected')).toBe(true)
   })
 
   it('supports v-model syntax', async () => {
@@ -46,12 +46,12 @@ describe('testing Switch component', () => {
     expect(wrapper.attributes('role')).toBe('switch')
     expect(wrapper.attributes('aria-checked')).toBeFalsy()
     expect(wrapper.classes('x-switch--is-selected')).toBe(false)
-    expect(wrapper.classes('x-selected')).toBe(false)
+    expect(wrapper.classes('xds:selected')).toBe(false)
 
     await wrapper.trigger('click')
     expect(wrapper.attributes('aria-checked')).toBe('true')
     expect(wrapper.classes('x-switch--is-selected')).toBe(true)
-    expect(wrapper.classes('x-selected')).toBe(true)
+    expect(wrapper.classes('xds:selected')).toBe(true)
   })
 })
 
diff --git a/packages/x-components/src/components/base-slider.vue b/packages/x-components/src/components/base-slider.vue
index 761efbba08..f772e3eb80 100644
--- a/packages/x-components/src/components/base-slider.vue
+++ b/packages/x-components/src/components/base-slider.vue
@@ -306,7 +306,7 @@ manually.
   <BaseSlider v-model="selectedRange" :threshold="threshold">
     <input
       @change="selectedRange.min = $event.target?.valueAsNumber || 0"
-      class="x-input"
+      class="xds:input"
       name="min"
       type="number"
       :value="selectedRange.min"
@@ -316,7 +316,7 @@ manually.
     <input
       @change="selectedRange.max = $event.target?.valueAsNumber || 1000000"
       style="display: block"
-      class="x-input"
+      class="xds:input"
       name="max"
       type="number"
       :value="selectedRange.max"
diff --git a/packages/x-components/src/components/base-switch.vue b/packages/x-components/src/components/base-switch.vue
index bc532ded6f..36c2c891db 100644
--- a/packages/x-components/src/components/base-switch.vue
+++ b/packages/x-components/src/components/base-switch.vue
@@ -45,7 +45,7 @@ export default defineComponent({
      * @internal
      */
     const cssClasses = computed<VueCSSClasses>(() => ({
-      'x-switch--is-selected x-selected': props.modelValue,
+      'x-switch--is-selected xds:selected': props.modelValue,
     }))
 
     /**
diff --git a/packages/x-components/src/components/column-picker/base-column-picker-list.vue b/packages/x-components/src/components/column-picker/base-column-picker-list.vue
index 4ecbbd1c02..d3be543c5e 100644
--- a/packages/x-components/src/components/column-picker/base-column-picker-list.vue
+++ b/packages/x-components/src/components/column-picker/base-column-picker-list.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="x-column-picker-list x-button-group" data-test="column-picker-list" role="list">
+  <div class="x-column-picker-list xds:button-group" data-test="column-picker-list" role="list">
     <template
       v-for="({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses"
       :key="column"
     >
       <BaseEventButton
-        class="x-column-picker-list__button x-button"
+        class="x-column-picker-list__button xds:button"
         :class="[buttonClass, cssClasses]"
         data-test="column-picker-button"
         :aria-pressed="isSelected.toString()"
@@ -127,7 +127,7 @@ export default defineComponent({
         column,
         cssClasses: [
           `x-column-picker-list__button--${column}-cols`,
-          { 'x-selected': selectedColumns.value === column },
+          { 'xds:selected': selectedColumns.value === column },
         ],
         isSelected: selectedColumns.value === column,
         events: {
diff --git a/packages/x-components/src/components/highlight.vue b/packages/x-components/src/components/highlight.vue
index fab3efdf25..1e385316cd 100644
--- a/packages/x-components/src/components/highlight.vue
+++ b/packages/x-components/src/components/highlight.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="x-highlight" :class="dynamicCSSClasses">
+  <span class="xds:highlight" :class="dynamicCSSClasses">
     <span
       v-if="matchParts.start"
       class="x-highlight__text"
diff --git a/packages/x-components/src/components/icons/arrow-down.vue b/packages/x-components/src/components/icons/arrow-down.vue
index 604b21791d..ebc46637b1 100644
--- a/packages/x-components/src/components/icons/arrow-down.vue
+++ b/packages/x-components/src/components/icons/arrow-down.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 1.5L4 6.24683"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/arrow-left.vue b/packages/x-components/src/components/icons/arrow-left.vue
index 7c82e1661f..babf7789d5 100644
--- a/packages/x-components/src/components/icons/arrow-left.vue
+++ b/packages/x-components/src/components/icons/arrow-left.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.5 4H1.75317"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/arrow-right.vue b/packages/x-components/src/components/icons/arrow-right.vue
index 27731b64e0..49fd40aa35 100644
--- a/packages/x-components/src/components/icons/arrow-right.vue
+++ b/packages/x-components/src/components/icons/arrow-right.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.5 4H6.24683"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/arrow-up.vue b/packages/x-components/src/components/icons/arrow-up.vue
index 76f4692fbf..e340386eae 100644
--- a/packages/x-components/src/components/icons/arrow-up.vue
+++ b/packages/x-components/src/components/icons/arrow-up.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 6.5L4 1.75317"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/bag.vue b/packages/x-components/src/components/icons/bag.vue
index 40d5a1fed1..4c1ae28d4e 100644
--- a/packages/x-components/src/components/icons/bag.vue
+++ b/packages/x-components/src/components/icons/bag.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.8 2.29995H6.29995M2.33333 1.19995L1.5 2.29995V6.42561C2.61092 6.42561 4.85446 6.42561 6.5 6.42561V2.29995L5.66667 1.19995H2.33333Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/bar-code.vue b/packages/x-components/src/components/icons/bar-code.vue
index a5506f6840..9c5754a445 100644
--- a/packages/x-components/src/components/icons/bar-code.vue
+++ b/packages/x-components/src/components/icons/bar-code.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2.75 2V6M3.8501 2V6M4.25 2V6M5.25 2V6M1 1H7V7H1V1Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/barcode-tiny.vue b/packages/x-components/src/components/icons/barcode-tiny.vue
index 7661864314..9f39bd9747 100644
--- a/packages/x-components/src/components/icons/barcode-tiny.vue
+++ b/packages/x-components/src/components/icons/barcode-tiny.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.16667 2.67202V5.33869M3.83334 2.67202V5.33869M4.16667 2.67202V5.33869M4.83334 2.67202V5.33869M2 2.00537H6V6.00537H2V2.00537Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/cart-filled.vue b/packages/x-components/src/components/icons/cart-filled.vue
index 4ea260a873..17bf9d7a28 100644
--- a/packages/x-components/src/components/icons/cart-filled.vue
+++ b/packages/x-components/src/components/icons/cart-filled.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.13059 6.84466C3.38158 6.84466 3.62037 6.6564 3.62037 6.38275C3.62037 6.10911 3.38158 5.92085 3.13059 5.92085C2.87961 5.92085 2.64082 6.10911 2.64082 6.38275C2.64082 6.6564 2.87961 6.84466 3.13059 6.84466ZM5.83506 6.84466C6.08605 6.84466 6.32483 6.6564 6.32483 6.38275C6.32483 6.10911 6.08605 5.92085 5.83506 5.92085C5.58407 5.92085 5.34529 6.10911 5.34529 6.38275C5.34529 6.6564 5.58407 6.84466 5.83506 6.84466Z"
       fill="currentColor"
diff --git a/packages/x-components/src/components/icons/cart.vue b/packages/x-components/src/components/icons/cart.vue
index d58deefe1e..f9b3bfecff 100644
--- a/packages/x-components/src/components/icons/cart.vue
+++ b/packages/x-components/src/components/icons/cart.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.13059 6.84466C3.38158 6.84466 3.62037 6.6564 3.62037 6.38275C3.62037 6.10911 3.38158 5.92085 3.13059 5.92085C2.87961 5.92085 2.64082 6.10911 2.64082 6.38275C2.64082 6.6564 2.87961 6.84466 3.13059 6.84466ZM5.83506 6.84466C6.08605 6.84466 6.32483 6.6564 6.32483 6.38275C6.32483 6.10911 6.08605 5.92085 5.83506 5.92085C5.58407 5.92085 5.34529 6.10911 5.34529 6.38275C5.34529 6.6564 5.58407 6.84466 5.83506 6.84466Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/check-tiny.vue b/packages/x-components/src/components/icons/check-tiny.vue
index 0edfef1440..8194169c2c 100644
--- a/packages/x-components/src/components/icons/check-tiny.vue
+++ b/packages/x-components/src/components/icons/check-tiny.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6 2.50537C5.08333 3.50537 4.16667 4.50537 3.25 5.50537L2 4.14173"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/check.vue b/packages/x-components/src/components/icons/check.vue
index 9f58561b98..304da18f06 100644
--- a/packages/x-components/src/components/icons/check.vue
+++ b/packages/x-components/src/components/icons/check.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 1.80005L2.875 6.30005L1 4.25459"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/checkbox-selected-filled.vue b/packages/x-components/src/components/icons/checkbox-selected-filled.vue
index e981975ccc..a3f433d8f4 100644
--- a/packages/x-components/src/components/icons/checkbox-selected-filled.vue
+++ b/packages/x-components/src/components/icons/checkbox-selected-filled.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"
diff --git a/packages/x-components/src/components/icons/checkbox-selected.vue b/packages/x-components/src/components/icons/checkbox-selected.vue
index e4e09d366d..8d47e06800 100644
--- a/packages/x-components/src/components/icons/checkbox-selected.vue
+++ b/packages/x-components/src/components/icons/checkbox-selected.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"
diff --git a/packages/x-components/src/components/icons/checkbox-unselected-filled.vue b/packages/x-components/src/components/icons/checkbox-unselected-filled.vue
index 9d2b8847ad..82552c9a23 100644
--- a/packages/x-components/src/components/icons/checkbox-unselected-filled.vue
+++ b/packages/x-components/src/components/icons/checkbox-unselected-filled.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"
diff --git a/packages/x-components/src/components/icons/checkbox-unselected.vue b/packages/x-components/src/components/icons/checkbox-unselected.vue
index 202a229a46..795f33d264 100644
--- a/packages/x-components/src/components/icons/checkbox-unselected.vue
+++ b/packages/x-components/src/components/icons/checkbox-unselected.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"
diff --git a/packages/x-components/src/components/icons/chevron-down.vue b/packages/x-components/src/components/icons/chevron-down.vue
index 9c225f843f..a8232f2f8d 100644
--- a/packages/x-components/src/components/icons/chevron-down.vue
+++ b/packages/x-components/src/components/icons/chevron-down.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.44995 2.75L3.94995 5.25L1.44995 2.75"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/chevron-left.vue b/packages/x-components/src/components/icons/chevron-left.vue
index ed413466dc..b167852675 100644
--- a/packages/x-components/src/components/icons/chevron-left.vue
+++ b/packages/x-components/src/components/icons/chevron-left.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.19995 6.5L2.69995 4L5.19995 1.5"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/chevron-right.vue b/packages/x-components/src/components/icons/chevron-right.vue
index ff021d1e41..41a99a0a79 100644
--- a/packages/x-components/src/components/icons/chevron-right.vue
+++ b/packages/x-components/src/components/icons/chevron-right.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2.69995 6.5L5.19995 4L2.69995 1.5"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/chevron-tiny-down.vue b/packages/x-components/src/components/icons/chevron-tiny-down.vue
index 27ffda0174..30abbab995 100644
--- a/packages/x-components/src/components/icons/chevron-tiny-down.vue
+++ b/packages/x-components/src/components/icons/chevron-tiny-down.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2 3L4 5L6 3"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/chevron-tiny-left.vue b/packages/x-components/src/components/icons/chevron-tiny-left.vue
index 805f8fb18b..155f89b270 100644
--- a/packages/x-components/src/components/icons/chevron-tiny-left.vue
+++ b/packages/x-components/src/components/icons/chevron-tiny-left.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5 2L3 4L5 6"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/chevron-tiny-right.vue b/packages/x-components/src/components/icons/chevron-tiny-right.vue
index 088af7497c..a65b4e052c 100644
--- a/packages/x-components/src/components/icons/chevron-tiny-right.vue
+++ b/packages/x-components/src/components/icons/chevron-tiny-right.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3 2L5 4L3 6"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/chevron-tiny-up.vue b/packages/x-components/src/components/icons/chevron-tiny-up.vue
index 2affd007b0..6bf583b8ba 100644
--- a/packages/x-components/src/components/icons/chevron-tiny-up.vue
+++ b/packages/x-components/src/components/icons/chevron-tiny-up.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6 5L4 3L2 5"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/chevron-up.vue b/packages/x-components/src/components/icons/chevron-up.vue
index 5e6af0a999..db7057a927 100644
--- a/packages/x-components/src/components/icons/chevron-up.vue
+++ b/packages/x-components/src/components/icons/chevron-up.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.44995 5.25L3.94995 2.75L6.44995 5.25"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/corner-arrow-left.vue b/packages/x-components/src/components/icons/corner-arrow-left.vue
index 6b272a1193..c0b949b2c6 100644
--- a/packages/x-components/src/components/icons/corner-arrow-left.vue
+++ b/packages/x-components/src/components/icons/corner-arrow-left.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2.875 3.18644L1 5.09322L2.875 7M7 1V5.09322H1.15234"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/corner-arrow-right.vue b/packages/x-components/src/components/icons/corner-arrow-right.vue
index 8feeb12eb4..3b387fe7a9 100644
--- a/packages/x-components/src/components/icons/corner-arrow-right.vue
+++ b/packages/x-components/src/components/icons/corner-arrow-right.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.125 3.18644L7 5.09322L5.125 7M1 1V5.09322H6.84766"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/cross-tiny.vue b/packages/x-components/src/components/icons/cross-tiny.vue
index b1f09e8e75..7c06e6c40f 100644
--- a/packages/x-components/src/components/icons/cross-tiny.vue
+++ b/packages/x-components/src/components/icons/cross-tiny.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6 2L2 6M2 2L6 6"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/cross.vue b/packages/x-components/src/components/icons/cross.vue
index 26e644b660..e2db75a8c6 100644
--- a/packages/x-components/src/components/icons/cross.vue
+++ b/packages/x-components/src/components/icons/cross.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 1L1 7M1 1L7 7"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/curated-check-filled.vue b/packages/x-components/src/components/icons/curated-check-filled.vue
index 0ebb0ed1e0..ef82a7d09f 100644
--- a/packages/x-components/src/components/icons/curated-check-filled.vue
+++ b/packages/x-components/src/components/icons/curated-check-filled.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/packages/x-components/src/components/icons/curated-check-tiny-filled.vue b/packages/x-components/src/components/icons/curated-check-tiny-filled.vue
index 2226b6ad64..1827d4fb6e 100644
--- a/packages/x-components/src/components/icons/curated-check-tiny-filled.vue
+++ b/packages/x-components/src/components/icons/curated-check-tiny-filled.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/packages/x-components/src/components/icons/curated-check-tiny.vue b/packages/x-components/src/components/icons/curated-check-tiny.vue
index 7cd6ee0243..6ba815c5e4 100644
--- a/packages/x-components/src/components/icons/curated-check-tiny.vue
+++ b/packages/x-components/src/components/icons/curated-check-tiny.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/packages/x-components/src/components/icons/curated-check.vue b/packages/x-components/src/components/icons/curated-check.vue
index 02aac12b5f..a4b94f99dd 100644
--- a/packages/x-components/src/components/icons/curated-check.vue
+++ b/packages/x-components/src/components/icons/curated-check.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/packages/x-components/src/components/icons/diagonal-arrow-left-down.vue b/packages/x-components/src/components/icons/diagonal-arrow-left-down.vue
index f59d505d0e..2ffd693b67 100644
--- a/packages/x-components/src/components/icons/diagonal-arrow-left-down.vue
+++ b/packages/x-components/src/components/icons/diagonal-arrow-left-down.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.5 1.5L1.74683 6.25317M1.49997 2.5027L1.49997 6.5L5.50006 6.5"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/diagonal-arrow-left-top.vue b/packages/x-components/src/components/icons/diagonal-arrow-left-top.vue
index 5d4d70202e..31568424ca 100644
--- a/packages/x-components/src/components/icons/diagonal-arrow-left-top.vue
+++ b/packages/x-components/src/components/icons/diagonal-arrow-left-top.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.5 6.5L1.74683 1.74683M1.49997 5.4973V1.5H5.50006"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/diagonal-arrow-right-down.vue b/packages/x-components/src/components/icons/diagonal-arrow-right-down.vue
index 20cb32feb7..b7e61a7a3a 100644
--- a/packages/x-components/src/components/icons/diagonal-arrow-right-down.vue
+++ b/packages/x-components/src/components/icons/diagonal-arrow-right-down.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.5 1.5L6.25317 6.25317M2.5027 6.50003L6.5 6.50003L6.5 2.49994"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/diagonal-arrow-right-top.vue b/packages/x-components/src/components/icons/diagonal-arrow-right-top.vue
index b42ccd2105..29caf30f42 100644
--- a/packages/x-components/src/components/icons/diagonal-arrow-right-top.vue
+++ b/packages/x-components/src/components/icons/diagonal-arrow-right-top.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.5 6.5L6.25317 1.74683M6.50003 5.4973V1.5H2.49994"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/filters.vue b/packages/x-components/src/components/icons/filters.vue
index 7e37cb5218..ab89c918d3 100644
--- a/packages/x-components/src/components/icons/filters.vue
+++ b/packages/x-components/src/components/icons/filters.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.08125 1.66H4M5.62825 1.66H7M4.14722 6.3C4.14722 6.66451 4.44271 6.96 4.80722 6.96C5.17172 6.96 5.46722 6.66451 5.46722 6.3C5.46722 5.93549 5.17172 5.64 4.80722 5.64C4.44271 5.64 4.14722 5.93549 4.14722 6.3ZM4.14722 6.3L1.08125 6.3M5.5 6.3H7M7 3.98H3.80005M2.34528 3.98H1M5.46722 1.66C5.46722 2.02451 5.17172 2.32 4.80722 2.32C4.44271 2.32 4.14722 2.02451 4.14722 1.66C4.14722 1.29549 4.44271 1 4.80722 1C5.17172 1 5.46722 1.29549 5.46722 1.66ZM2.42638 3.98001C2.42638 4.34452 2.72188 4.64001 3.08638 4.64001C3.45089 4.64001 3.74638 4.34452 3.74638 3.98001C3.74638 3.6155 3.45089 3.32001 3.08638 3.32001C2.72188 3.32001 2.42638 3.6155 2.42638 3.98001Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/grid-1-col.vue b/packages/x-components/src/components/icons/grid-1-col.vue
index 5b4f55a821..430af6dfda 100644
--- a/packages/x-components/src/components/icons/grid-1-col.vue
+++ b/packages/x-components/src/components/icons/grid-1-col.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3 1.5H5V3.5H3V1.5ZM3 4.5H5V6.5H3V4.5Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/grid-2-col.vue b/packages/x-components/src/components/icons/grid-2-col.vue
index c7892a2ef6..e472d6480d 100644
--- a/packages/x-components/src/components/icons/grid-2-col.vue
+++ b/packages/x-components/src/components/icons/grid-2-col.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.5 1.5H3.5V3.5H1.5V1.5ZM1.5 4.5H3.5V6.5H1.5V4.5ZM4.5 1.5H6.5V3.5H4.5V1.5ZM4.5 4.5H6.5V6.5H4.5V4.5Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/grid-2-rows.vue b/packages/x-components/src/components/icons/grid-2-rows.vue
index 51ac891e38..3d47c2ca61 100644
--- a/packages/x-components/src/components/icons/grid-2-rows.vue
+++ b/packages/x-components/src/components/icons/grid-2-rows.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_168)">
       <path
         d="M7 1H1V3.4H7V1ZM7 4.6H1V7H7V4.6Z"
diff --git a/packages/x-components/src/components/icons/grid-4-col.vue b/packages/x-components/src/components/icons/grid-4-col.vue
index 2fbabe810d..10ec014029 100644
--- a/packages/x-components/src/components/icons/grid-4-col.vue
+++ b/packages/x-components/src/components/icons/grid-4-col.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.2 1.2H2.51429V2.51429H1.2V1.2ZM1.2 3.34286H2.51429V4.65714H1.2V3.34286ZM1.2 5.48571H2.51429V6.8H1.2V5.48571ZM3.34286 1.2H4.65714V2.51429H3.34286V1.2ZM3.34286 3.34286H4.65714V4.65714H3.34286V3.34286ZM3.34286 5.48571H4.65714V6.8H3.34286V5.48571ZM5.48571 1.2H6.8V2.51429H5.48571V1.2ZM5.48571 3.34286H6.8V4.65714H5.48571V3.34286ZM5.48571 5.48571H6.8V6.8H5.48571V5.48571Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/heart-filled.vue b/packages/x-components/src/components/icons/heart-filled.vue
index 448bbeb8c8..8e7656f6a5 100644
--- a/packages/x-components/src/components/icons/heart-filled.vue
+++ b/packages/x-components/src/components/icons/heart-filled.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.53734 1.86268C6.39074 1.71601 6.21667 1.59965 6.02508 1.52027C5.8335 1.44088 5.62815 1.40002 5.42076 1.40002C5.21338 1.40002 5.00803 1.44088 4.81645 1.52027C4.62486 1.59965 4.45079 1.71601 4.30418 1.86268L3.99992 2.16694L3.69566 1.86268C3.39953 1.56655 2.99788 1.40018 2.57908 1.40018C2.16028 1.40018 1.75864 1.56655 1.4625 1.86268C1.16637 2.15882 1 2.56046 1 2.97926C1 3.39806 1.16637 3.7997 1.4625 4.09584L3.99992 6.63326L6.53734 4.09584C6.68402 3.94923 6.80037 3.77516 6.87976 3.58358C6.95914 3.39199 7 3.18664 7 2.97926C7 2.77188 6.95914 2.56653 6.87976 2.37494C6.80037 2.18336 6.68402 2.00929 6.53734 1.86268Z"
       fill="currentColor"
diff --git a/packages/x-components/src/components/icons/heart.vue b/packages/x-components/src/components/icons/heart.vue
index 0f9c3eaab8..815f094fe1 100644
--- a/packages/x-components/src/components/icons/heart.vue
+++ b/packages/x-components/src/components/icons/heart.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.53734 1.86268C6.39074 1.71601 6.21667 1.59965 6.02508 1.52027C5.8335 1.44088 5.62815 1.40002 5.42076 1.40002C5.21338 1.40002 5.00803 1.44088 4.81645 1.52027C4.62486 1.59965 4.45079 1.71601 4.30418 1.86268L3.99992 2.16694L3.69566 1.86268C3.39953 1.56655 2.99788 1.40018 2.57908 1.40018C2.16028 1.40018 1.75864 1.56655 1.4625 1.86268C1.16637 2.15882 1 2.56046 1 2.97926C1 3.39806 1.16637 3.7997 1.4625 4.09584L3.99992 6.63326L6.53734 4.09584C6.68402 3.94923 6.80037 3.77516 6.87976 3.58358C6.95914 3.39199 7 3.18664 7 2.97926C7 2.77188 6.95914 2.56653 6.87976 2.37494C6.80037 2.18336 6.68402 2.00929 6.53734 1.86268Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/hide.vue b/packages/x-components/src/components/icons/hide.vue
index 17aa46c0c6..530ebed02c 100644
--- a/packages/x-components/src/components/icons/hide.vue
+++ b/packages/x-components/src/components/icons/hide.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.62 5.62001C5.1538 5.97537 4.58612 6.17224 4 6.18182C2.09091 6.18182 1 4.00001 1 4.00001C1.33924 3.36779 1.80976 2.81544 2.38 2.38M3.42728 1.88364C3.615 1.8397 3.8072 1.81773 4 1.81818C5.90909 1.81818 7 4 7 4C6.83445 4.30971 6.63702 4.60129 6.41091 4.87M4.57817 4.57818C4.3742 4.79707 4.06702 4.88718 3.77713 4.81314C3.48724 4.73911 3.26088 4.51275 3.18684 4.22286C3.11281 3.93297 3.20291 3.62578 3.42181 3.42181M1 1L7 7"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/history-tiny.vue b/packages/x-components/src/components/icons/history-tiny.vue
index 555c78d869..13e250470c 100644
--- a/packages/x-components/src/components/icons/history-tiny.vue
+++ b/packages/x-components/src/components/icons/history-tiny.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.80005 2.2202V3.55351H3.13336M2.35782 4.66459C2.65382 5.50473 3.46976 6.04785 4.35905 5.99667C5.24834 5.94549 5.99659 5.31234 6.19424 4.44379C6.39189 3.57523 5.9913 2.68065 5.21173 2.24969C4.43216 1.81874 3.46154 1.9553 2.83114 2.58463L1.93094 3.43051"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/history.vue b/packages/x-components/src/components/icons/history.vue
index 0685d40389..aa650ed383 100644
--- a/packages/x-components/src/components/icons/history.vue
+++ b/packages/x-components/src/components/icons/history.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1 1.59732V3.39732H2.8M1.75301 4.89731C2.15261 6.03153 3.25416 6.76475 4.45472 6.69565C5.65528 6.62656 6.66544 5.77179 6.93227 4.59922C7.19911 3.42665 6.6583 2.21894 5.60586 1.63714C4.55341 1.05534 3.24305 1.2397 2.39201 2.08931L1.17671 3.23127"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/light-bulb-off.vue b/packages/x-components/src/components/icons/light-bulb-off.vue
index c4ddf11fd8..49a5cb2367 100644
--- a/packages/x-components/src/components/icons/light-bulb-off.vue
+++ b/packages/x-components/src/components/icons/light-bulb-off.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.99653 4.94354V6.06854M3.23901 6.10004C3.23901 6.51425 3.59654 6.80508 4.01076 6.80508C4.42497 6.80508 4.7825 6.51425 4.7825 6.10004M4.24666 4.81836C4.24666 4.95643 4.13473 5.06836 3.99666 5.06836C3.85858 5.06836 3.74666 4.95643 3.74666 4.81836C3.74666 4.68029 3.85858 4.56836 3.99666 4.56836C4.13473 4.56836 4.24666 4.68029 4.24666 4.81836Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/light-bulb-on.vue b/packages/x-components/src/components/icons/light-bulb-on.vue
index 4cfddb82f3..3547853c07 100644
--- a/packages/x-components/src/components/icons/light-bulb-on.vue
+++ b/packages/x-components/src/components/icons/light-bulb-on.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.99666 5.50677V6.63177M3.23914 6.66327C3.23914 7.07748 3.59667 7.36832 4.01088 7.36832C4.42509 7.36832 4.78262 7.07748 4.78262 6.66327M4.24678 5.38159C4.24678 5.51966 4.13485 5.63159 3.99678 5.63159C3.85871 5.63159 3.74678 5.51966 3.74678 5.38159C3.74678 5.24352 3.85871 5.13159 3.99678 5.13159C4.13485 5.13159 4.24678 5.24352 4.24678 5.38159Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/menu.vue b/packages/x-components/src/components/icons/menu.vue
index eb139dfd55..b1f132ea42 100644
--- a/packages/x-components/src/components/icons/menu.vue
+++ b/packages/x-components/src/components/icons/menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1 3.97682H7M1 1.8999H7M1 6.05374H7"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/minus-tiny.vue b/packages/x-components/src/components/icons/minus-tiny.vue
index 5dd00da03d..a1d188d501 100644
--- a/packages/x-components/src/components/icons/minus-tiny.vue
+++ b/packages/x-components/src/components/icons/minus-tiny.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2 4H6"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/minus.vue b/packages/x-components/src/components/icons/minus.vue
index 42e7988077..531e4c0135 100644
--- a/packages/x-components/src/components/icons/minus.vue
+++ b/packages/x-components/src/components/icons/minus.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1 4H7"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/plus-tiny.vue b/packages/x-components/src/components/icons/plus-tiny.vue
index b789069798..2f1ff7fdfc 100644
--- a/packages/x-components/src/components/icons/plus-tiny.vue
+++ b/packages/x-components/src/components/icons/plus-tiny.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4.00004 2V6M2 4.00004H6"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/plus.vue b/packages/x-components/src/components/icons/plus.vue
index 40cd1293ee..09baba64bf 100644
--- a/packages/x-components/src/components/icons/plus.vue
+++ b/packages/x-components/src/components/icons/plus.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 1.5V6.5M1.5 4H6.5"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/radiobutton-selected.vue b/packages/x-components/src/components/icons/radiobutton-selected.vue
index ae9d35fad1..d988cb0dd0 100644
--- a/packages/x-components/src/components/icons/radiobutton-selected.vue
+++ b/packages/x-components/src/components/icons/radiobutton-selected.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_269)">
       <circle cx="4" cy="4" r="3" stroke="currentColor" stroke-width="0.4" />
       <circle cx="4.00005" cy="4.00005" r="2.2" fill="currentColor" />
diff --git a/packages/x-components/src/components/icons/radiobutton-unselected.vue b/packages/x-components/src/components/icons/radiobutton-unselected.vue
index 90b36b4dba..a9bf567456 100644
--- a/packages/x-components/src/components/icons/radiobutton-unselected.vue
+++ b/packages/x-components/src/components/icons/radiobutton-unselected.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_235)">
       <circle cx="4" cy="4" r="3" stroke="currentColor" stroke-width="0.4" />
     </g>
diff --git a/packages/x-components/src/components/icons/search-tiny.vue b/packages/x-components/src/components/icons/search-tiny.vue
index 118d79c265..2531580a75 100644
--- a/packages/x-components/src/components/icons/search-tiny.vue
+++ b/packages/x-components/src/components/icons/search-tiny.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.26263 6L5.07213 4.9164M5.45901 3.72909C5.45901 4.68405 4.68469 5.45819 3.72951 5.45819C2.77433 5.45819 2 4.68405 2 3.72909C2 2.77414 2.77433 2 3.72951 2C4.68469 2 5.45901 2.77414 5.45901 3.72909Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/search.vue b/packages/x-components/src/components/icons/search.vue
index 84f0755c8e..1c64bafd20 100644
--- a/packages/x-components/src/components/icons/search.vue
+++ b/packages/x-components/src/components/icons/search.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7.04471 6.85704L5.34409 5.30913M5.89674 3.61307C5.89674 4.97721 4.79062 6.08307 3.42615 6.08307C2.06169 6.08307 0.955566 4.97721 0.955566 3.61307C0.955566 2.24892 2.06169 1.14307 3.42615 1.14307C4.79062 1.14307 5.89674 2.24892 5.89674 3.61307Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/settings.vue b/packages/x-components/src/components/icons/settings.vue
index 621d5de4f2..537ccb069e 100644
--- a/packages/x-components/src/components/icons/settings.vue
+++ b/packages/x-components/src/components/icons/settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_178)">
       <path
         d="M4 4.81818C4.45187 4.81818 4.81818 4.45187 4.81818 4C4.81818 3.54813 4.45187 3.18182 4 3.18182C3.54813 3.18182 3.18182 3.54813 3.18182 4C3.18182 4.45187 3.54813 4.81818 4 4.81818Z"
diff --git a/packages/x-components/src/components/icons/show.vue b/packages/x-components/src/components/icons/show.vue
index c0ceb4cd50..274dc22bff 100644
--- a/packages/x-components/src/components/icons/show.vue
+++ b/packages/x-components/src/components/icons/show.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/packages/x-components/src/components/icons/sort-az.vue b/packages/x-components/src/components/icons/sort-az.vue
index 3edc850c67..f88b388100 100644
--- a/packages/x-components/src/components/icons/sort-az.vue
+++ b/packages/x-components/src/components/icons/sort-az.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.44971 4.58789L2.72929 4.59065L1.44971 6.39663H2.68392"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/sort-price-down.vue b/packages/x-components/src/components/icons/sort-price-down.vue
index 95ce17f39d..0cb8e4f5cf 100644
--- a/packages/x-components/src/components/icons/sort-price-down.vue
+++ b/packages/x-components/src/components/icons/sort-price-down.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4.729 4.87842L5.8543 5.99999L6.99995 4.87842"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/sort-price-up.vue b/packages/x-components/src/components/icons/sort-price-up.vue
index 62434cfb27..4678089bee 100644
--- a/packages/x-components/src/components/icons/sort-price-up.vue
+++ b/packages/x-components/src/components/icons/sort-price-up.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 3.12158L5.87471 2.00001L4.72905 3.12158"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/sort-relevancy.vue b/packages/x-components/src/components/icons/sort-relevancy.vue
index 1d1daa4675..5d858f8cdd 100644
--- a/packages/x-components/src/components/icons/sort-relevancy.vue
+++ b/packages/x-components/src/components/icons/sort-relevancy.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1 3.35614H3.4M1 2.15063H4.2M1 4.56165H2.6239M1 5.76715H1.97434"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/sort-za.vue b/packages/x-components/src/components/icons/sort-za.vue
index 77e1742148..96095d92ea 100644
--- a/packages/x-components/src/components/icons/sort-za.vue
+++ b/packages/x-components/src/components/icons/sort-za.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M1.44971 4.58789L2.72929 4.59065L1.44971 6.39663H2.68392"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/spinner.vue b/packages/x-components/src/components/icons/spinner.vue
index e479cf55eb..77fcc01b8e 100644
--- a/packages/x-components/src/components/icons/spinner.vue
+++ b/packages/x-components/src/components/icons/spinner.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 16 16" fill="none">
+  <svg class="xds:icon" viewBox="0 0 16 16" fill="none">
     <g>
       <path
         d="M8 1.33301V3.99967"
diff --git a/packages/x-components/src/components/icons/star-filled.vue b/packages/x-components/src/components/icons/star-filled.vue
index 6eec02c74a..3f77db6da7 100644
--- a/packages/x-components/src/components/icons/star-filled.vue
+++ b/packages/x-components/src/components/icons/star-filled.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_478_159)">
       <path
         fill-rule="evenodd"
diff --git a/packages/x-components/src/components/icons/star.vue b/packages/x-components/src/components/icons/star.vue
index 364bd4ceda..e6299958f0 100644
--- a/packages/x-components/src/components/icons/star.vue
+++ b/packages/x-components/src/components/icons/star.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/packages/x-components/src/components/icons/tag-filled.vue b/packages/x-components/src/components/icons/tag-filled.vue
index bec620f4ec..5ebdd875cd 100644
--- a/packages/x-components/src/components/icons/tag-filled.vue
+++ b/packages/x-components/src/components/icons/tag-filled.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.92159 6.49265L1.56456 4.13563L3.92159 1.77861H6.27861V4.13563L3.92159 6.49265Z"
       fill="currentColor"
diff --git a/packages/x-components/src/components/icons/tag.vue b/packages/x-components/src/components/icons/tag.vue
index a6a5a9b5cf..e8b540d33a 100644
--- a/packages/x-components/src/components/icons/tag.vue
+++ b/packages/x-components/src/components/icons/tag.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M3.92159 6.49265L1.56456 4.13563L3.92159 1.77861H6.27861V4.13563L3.92159 6.49265Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/trash-open.vue b/packages/x-components/src/components/icons/trash-open.vue
index d2247e5d60..dc2c991d27 100644
--- a/packages/x-components/src/components/icons/trash-open.vue
+++ b/packages/x-components/src/components/icons/trash-open.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.94455 2.69995V7.0999H2.05569L2.05566 2.69995"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/trash.vue b/packages/x-components/src/components/icons/trash.vue
index 46ce2f2e2f..76de81787e 100644
--- a/packages/x-components/src/components/icons/trash.vue
+++ b/packages/x-components/src/components/icons/trash.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.94461 2.19995V6.99995H2.05575L2.05572 2.19995"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/trending-tiny.vue b/packages/x-components/src/components/icons/trending-tiny.vue
index fe9620ac25..35a8dd9f12 100644
--- a/packages/x-components/src/components/icons/trending-tiny.vue
+++ b/packages/x-components/src/components/icons/trending-tiny.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.75317 3.21997L4.18008 4.6167L3.30805 3.85012L2 4.99999"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/trending.vue b/packages/x-components/src/components/icons/trending.vue
index 5abeee5fff..11ffde3b30 100644
--- a/packages/x-components/src/components/icons/trending.vue
+++ b/packages/x-components/src/components/icons/trending.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M6.85229 2.34766C5.84048 3.42973 5.4209 3.88871 4.40909 4.97078L3.04545 3.51245L1 5.69995"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/icons/user-filled.vue b/packages/x-components/src/components/icons/user-filled.vue
index 9f254c719d..a9966e8aa4 100644
--- a/packages/x-components/src/components/icons/user-filled.vue
+++ b/packages/x-components/src/components/icons/user-filled.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7M5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5Z"
       fill="currentColor"
diff --git a/packages/x-components/src/components/icons/user.vue b/packages/x-components/src/components/icons/user.vue
index 3cbe10fde9..71a9319146 100644
--- a/packages/x-components/src/components/icons/user.vue
+++ b/packages/x-components/src/components/icons/user.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="xds:icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M7 7V6.333C7 5.597 6.328 5 5.5 5H2.5C1.672 5 1 5.597 1 6.333V7M5.5 2.5C5.5 2.89782 5.34196 3.27936 5.06066 3.56066C4.77936 3.84196 4.39782 4 4 4C3.60218 4 3.22064 3.84196 2.93934 3.56066C2.65804 3.27936 2.5 2.89782 2.5 2.5C2.5 2.10218 2.65804 1.72064 2.93934 1.43934C3.22064 1.15804 3.60218 1 4 1C4.39782 1 4.77936 1.15804 5.06066 1.43934C5.34196 1.72064 5.5 2.10218 5.5 2.5V2.5Z"
       stroke="currentColor"
diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
index 1f771fb891..b369fdcfce 100644
--- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
+++ b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
@@ -72,7 +72,7 @@
         </Scroll>
       </BaseIdTogglePanel>
 
-      <MainScroll class="x-flex x-flex-auto">
+      <MainScroll class="xds:flex xds:flex-auto">
         <Scroll
           v-if="devMode || $slots['main-body']"
           id="main-scroll"
@@ -413,7 +413,7 @@ export default defineComponent({
   width: 0;
   padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);
 }
-.x-layout__body-scroll.x-scroll {
+.x-layout__body-scroll.xds\:scroll {
   overflow-y: scroll;
 }
 
diff --git a/packages/x-components/src/components/modals/base-events-modal-close.vue b/packages/x-components/src/components/modals/base-events-modal-close.vue
index 5836c72544..461f9a3c0c 100644
--- a/packages/x-components/src/components/modals/base-events-modal-close.vue
+++ b/packages/x-components/src/components/modals/base-events-modal-close.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseEventButton
     :events="events"
-    class="x-events-modal-close-button x-button"
+    class="x-events-modal-close-button xds:button"
     data-test="close-modal"
     aria-label="Close"
   >
diff --git a/packages/x-components/src/components/modals/base-events-modal-open.vue b/packages/x-components/src/components/modals/base-events-modal-open.vue
index f8b217d908..4fe266b13d 100644
--- a/packages/x-components/src/components/modals/base-events-modal-open.vue
+++ b/packages/x-components/src/components/modals/base-events-modal-open.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseEventButton
     :events="events"
-    class="x-events-modal-open-button x-button"
+    class="x-events-modal-open-button xds:button"
     data-test="open-modal"
     aria-label="Open"
   >
diff --git a/packages/x-components/src/components/modals/base-id-modal-close.vue b/packages/x-components/src/components/modals/base-id-modal-close.vue
index af4ef558ee..9e8aa6a31a 100644
--- a/packages/x-components/src/components/modals/base-id-modal-close.vue
+++ b/packages/x-components/src/components/modals/base-id-modal-close.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="x-events-modal-id-close-button x-button"
+    class="x-events-modal-id-close-button xds:button"
     data-test="close-modal-id"
     @click="closeModal"
   >
diff --git a/packages/x-components/src/components/modals/base-id-modal-open.vue b/packages/x-components/src/components/modals/base-id-modal-open.vue
index fb68f75639..56eca9853f 100644
--- a/packages/x-components/src/components/modals/base-id-modal-open.vue
+++ b/packages/x-components/src/components/modals/base-id-modal-open.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="x-events-modal-id-open-button x-button"
+    class="x-events-modal-id-open-button xds:button"
     data-test="open-modal-id"
     @click="openModal"
   >
diff --git a/packages/x-components/src/components/page-loader-button.vue b/packages/x-components/src/components/page-loader-button.vue
index b36979ec2b..fe308143e2 100644
--- a/packages/x-components/src/components/page-loader-button.vue
+++ b/packages/x-components/src/components/page-loader-button.vue
@@ -13,7 +13,7 @@
         </p>
       </slot>
       <BaseEventButton
-        class="x-button"
+        class="xds:button"
         :class="buttonClasses"
         :events="events"
         data-test="load-content"
@@ -152,15 +152,15 @@ This component has a default slot which allows to customise the entire layout.
 <template>
   <PageLoaderButton>
     <template #default="{ resultsLength, totalResults }">
-      <div class="x-flex x-flex-col">
-        <div class="x-flex x-gap-4 x-text">
-          <span class="x-text-accent-50 x-font-bold">{{ resultsLength }}</span>
+      <div class="xds:flex xds:flex-col">
+        <div class="xds:flex xds:gap-4 xds:text">
+          <span class="xds:text-accent-50 xds:font-bold">{{ resultsLength }}</span>
           <span>of</span>
-          <span class="x-text-accent-50">{{ totalResults }}</span>
+          <span class="xds:text-accent-50">{{ totalResults }}</span>
         </div>
         <button
           @click="$x.emit('UserReachedResultsListEnd', undefined)"
-          class="x-button x-button-ghost"
+          class="xds:button xds:button-ghost"
         >
           Load more
         </button>
@@ -191,10 +191,10 @@ content inside and customizing its style using the buttonClasses prop.
 <template>
   <PageLoaderButton :buttonClasses="buttonClasses">
     <template #textContent="{ resultsLength, totalResults }">
-      <div class="x-flex x-gap-4 x-text">
-        <span class="x-text-accent-50 x-font-bold">{{ resultsLength }}</span>
+      <div class="xds:flex xds:gap-4 xds:text">
+        <span class="xds:text-accent-50 xds:font-bold">{{ resultsLength }}</span>
         <span>of</span>
-        <span class="x-text-accent-50">{{ totalResults }}</span>
+        <span class="xds:text-accent-50">{{ totalResults }}</span>
       </div>
     </template>
     <template #buttonContent>Load more results</template>
@@ -211,7 +211,7 @@ export default {
   },
   data() {
     return {
-      buttonClasses: 'x-rounded-full',
+      buttonClasses: 'xds:rounded-full',
     }
   },
 }
diff --git a/packages/x-components/src/components/page-selector.vue b/packages/x-components/src/components/page-selector.vue
index 33d441b3b9..cb08d9e928 100644
--- a/packages/x-components/src/components/page-selector.vue
+++ b/packages/x-components/src/components/page-selector.vue
@@ -1,7 +1,7 @@
 <template>
   <nav v-if="visiblePages?.length > 1" class="x-page-selector" aria-label="Pagination">
     <button
-      class="x-button"
+      class="xds:button"
       :class="buttonClasses"
       :disabled="currentPage === 1"
       data-test="previous-page-button"
@@ -15,7 +15,7 @@
     <button
       v-for="page in visiblePages"
       :key="page.value"
-      class="x-button x-page-selector__page"
+      class="xds:button x-page-selector__page"
       :class="[
         itemClasses(page.isSelected),
         {
@@ -34,7 +34,7 @@
     </button>
 
     <button
-      class="x-button"
+      class="xds:button"
       :class="buttonClasses"
       :disabled="currentPage === totalPages"
       data-test="next-page-button"
@@ -236,8 +236,8 @@ This component allows to customise its content using slots.
     :item-classes="
       (isSelected: boolean) =>
         isSelected
-          ? 'x-button-lead x-text-neutral-10'
-          : 'x-text-neutral-90 x-button-outlined'
+          ? 'xds:button-lead x-text-neutral-10'
+          : 'x-text-neutral-90 xds:button-outlined'
     "
     :buttonClasses="['x-rounded-md']"
   >
diff --git a/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue b/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
index d777bade3c..9153792095 100644
--- a/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
+++ b/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseEventButton
     :events="events"
-    class="x-base-id-toggle-panel-button x-button"
+    class="x-base-id-toggle-panel-button xds:button"
     data-test="base-id-toggle-button"
     :aria-pressed="isPanelOpen.toString()"
   >
diff --git a/packages/x-components/src/components/panels/base-tabs-panel.vue b/packages/x-components/src/components/panels/base-tabs-panel.vue
index 1bbe713fab..e5adc2f05a 100644
--- a/packages/x-components/src/components/panels/base-tabs-panel.vue
+++ b/packages/x-components/src/components/panels/base-tabs-panel.vue
@@ -21,7 +21,7 @@
         <button
           :id="`base-tabs-panel-${tab}`"
           :key="tab"
-          class="x-tabs-panel__list-item x-tabs-panel__button x-button"
+          class="x-tabs-panel__list-item x-tabs-panel__button xds:button"
           :class="tabIsSelected(tab) ? activeTabClass : tabClass"
           :aria-selected="tabIsSelected(tab).toString()"
           data-test="base-tabs-panel-button"
@@ -309,9 +309,9 @@ export default {
 ```vue
 <template>
   <BaseTabsPanel
-    activeTabClass="x-button-auxiliary"
+    activeTabClass="xds:button-auxiliary"
     contentClass="x-p-12 x-bg-auxiliary-25"
-    tabClass="x-button-ghost"
+    tabClass="xds:button-ghost"
     tabListClass="x-flex-col"
   >
     <template #summer>
diff --git a/packages/x-components/src/components/result/base-result-add-to-cart.vue b/packages/x-components/src/components/result/base-result-add-to-cart.vue
index cb58aeb253..64df2f7112 100644
--- a/packages/x-components/src/components/result/base-result-add-to-cart.vue
+++ b/packages/x-components/src/components/result/base-result-add-to-cart.vue
@@ -2,7 +2,7 @@
   <BaseEventButton
     :events="events"
     :metadata="metadata"
-    class="x-result-add-to-cart x-button"
+    class="x-result-add-to-cart xds:button"
     data-test="result-add-to-cart"
   >
     <!-- @slot (Required) Button content with a text, an icon or both -->
diff --git a/packages/x-components/src/components/result/result-variant-selector.vue b/packages/x-components/src/components/result/result-variant-selector.vue
index 40b7b1a11e..489a92d25b 100644
--- a/packages/x-components/src/components/result/result-variant-selector.vue
+++ b/packages/x-components/src/components/result/result-variant-selector.vue
@@ -19,7 +19,7 @@
         :is-selected="variantIsSelected(variant)"
         :select-variant="() => selectVariant(variant)"
       >
-        <button data-test="variant-button" class="x-button" @click="selectVariant(variant)">
+        <button data-test="variant-button" class="xds:button" @click="selectVariant(variant)">
           <!--
             @slot Variant content
             @binding {ResultVariant} variant - The variant item
diff --git a/packages/x-components/src/components/scroll/base-scroll.vue b/packages/x-components/src/components/scroll/base-scroll.vue
index 2959a7f5f5..411d5ab438 100644
--- a/packages/x-components/src/components/scroll/base-scroll.vue
+++ b/packages/x-components/src/components/scroll/base-scroll.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="baseScrollEl"
-    class="x-scroll x-base-scroll"
+    class="xds:scroll x-base-scroll"
     data-test="base-scroll"
     @scroll="throttledStoreScrollData"
   >
diff --git a/packages/x-components/src/components/sliding-panel.vue b/packages/x-components/src/components/sliding-panel.vue
index e2474e4f93..617225902d 100644
--- a/packages/x-components/src/components/sliding-panel.vue
+++ b/packages/x-components/src/components/sliding-panel.vue
@@ -12,7 +12,7 @@
     <slot name="sliding-panel-addons" :arrived-state="arrivedState" :scroll="xScroll" />
     <template v-if="showButtons">
       <button
-        class="x-sliding-panel__button x-button x-sliding-panel-button-left"
+        class="x-sliding-panel__button xds:button x-sliding-panel-button-left"
         :class="buttonClass"
         data-test="sliding-panel-left-button"
         @click="xScroll -= slotContainerWidth * scrollFactor"
@@ -21,7 +21,7 @@
         <slot name="sliding-panel-left-button">ᐸ</slot>
       </button>
       <button
-        class="x-sliding-panel__button x-button x-sliding-panel-button-right"
+        class="x-sliding-panel__button xds:button x-sliding-panel-button-right"
         :class="buttonClass"
         data-test="sliding-panel-right-button"
         @click="xScroll += slotContainerWidth * scrollFactor"
diff --git a/packages/x-components/src/tailwind/index.css b/packages/x-components/src/tailwind/index.css
index b5c61c9567..cbe32b9eee 100644
--- a/packages/x-components/src/tailwind/index.css
+++ b/packages/x-components/src/tailwind/index.css
@@ -1,3 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss' prefix(xds);
+
+@config './tailwind.config.ts';
+
+@plugin "@empathyco/x-tailwindcss/plugin";
+@plugin "@empathyco/x-tailwindcss/old-ds-plugin";
diff --git a/packages/x-components/src/tailwind/tailwind.config.ts b/packages/x-components/src/tailwind/tailwind.config.ts
new file mode 100644
index 0000000000..32e92320cd
--- /dev/null
+++ b/packages/x-components/src/tailwind/tailwind.config.ts
@@ -0,0 +1,17 @@
+import type { Config } from 'tailwindcss'
+import tailwind from '@empathyco/x-tailwindcss'
+
+export default {
+  content: [
+    './public/index.html',
+    './src/**/*.vue',
+    './node_modules/@empathyco/x-tailwindcss/showcase/**/*.js',
+  ],
+  theme: {
+    // eslint-disable-next-line ts/no-unsafe-assignment
+    extend: {
+      // eslint-disable-next-line ts/no-unsafe-member-access
+      ...tailwind.theme,
+    },
+  },
+} satisfies Config
diff --git a/packages/x-components/src/views/accessibility/accessibility-check.vue b/packages/x-components/src/views/accessibility/accessibility-check.vue
index 63aa7d1acd..f841d137b5 100644
--- a/packages/x-components/src/views/accessibility/accessibility-check.vue
+++ b/packages/x-components/src/views/accessibility/accessibility-check.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="x-flex x-flex-col x-gap-16 x-p-32">
+  <section class="xds:flex xds:flex-col xds:gap-16 xds:p-32">
     <div>
       <h1 class="row1">WAI-ARIA compliance - test pages</h1>
       <ul class="menu">
diff --git a/packages/x-components/src/views/accessibility/wai-base-dropdown-and-base-switch.vue b/packages/x-components/src/views/accessibility/wai-base-dropdown-and-base-switch.vue
index c833c612ad..715580be92 100644
--- a/packages/x-components/src/views/accessibility/wai-base-dropdown-and-base-switch.vue
+++ b/packages/x-components/src/views/accessibility/wai-base-dropdown-and-base-switch.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="x-flex x-flex-col x-gap-16 x-p-32">
+  <section class="xds:flex xds:flex-col xds:gap-16 xds:p-32">
     <div>
       <h1>BaseColumnPickerDropdown</h1>
       <BaseColumnPickerDropdown :columns="[2, 4, 6]">
diff --git a/packages/x-components/src/views/accessibility/wai-base-event-button.vue b/packages/x-components/src/views/accessibility/wai-base-event-button.vue
index aa283cd98d..63fa931c97 100644
--- a/packages/x-components/src/views/accessibility/wai-base-event-button.vue
+++ b/packages/x-components/src/views/accessibility/wai-base-event-button.vue
@@ -1,18 +1,18 @@
 <template>
   <Scroll id="accessibility-scroll">
-    <section class="x-flex x-flex-col x-gap-16 x-p-32">
+    <section class="xds:flex xds:flex-col xds:gap-16 xds:p-32">
       <div>
         <h1>BaseIdTogglePanelButton</h1>
-        <BaseIdTogglePanelButton class="x-button--ghost x-button" :panel-id="panelId">
+        <BaseIdTogglePanelButton class="x-button--ghost xds:button" :panel-id="panelId">
           Panel
         </BaseIdTogglePanelButton>
         <BaseIdTogglePanel :start-open="true" panel-id="aside-panel">
-          <div class="x-text1">Hey there!</div>
+          <div class="xds:text1">Hey there!</div>
         </BaseIdTogglePanel>
 
-        <BaseIdTogglePanelButton class="x-button--ghost x-button" panel-id="panel2" />
+        <BaseIdTogglePanelButton class="x-button--ghost xds:button" panel-id="panel2" />
         <BaseIdTogglePanel :start-open="true" panel-id="aside-panel">
-          <div class="x-text1">
+          <div class="xds:text1">
             Button without text, an element should have the ID to make it accessible.
           </div>
         </BaseIdTogglePanel>
@@ -128,7 +128,7 @@ export default defineComponent({
 </script>
 
 <style lang="css" scoped>
-.x-scroll {
+.xds\:scroll {
   height: 600px;
 }
 </style>
diff --git a/packages/x-components/src/views/accessibility/wai-base-result-link.vue b/packages/x-components/src/views/accessibility/wai-base-result-link.vue
index 438495e620..08b382a4fb 100644
--- a/packages/x-components/src/views/accessibility/wai-base-result-link.vue
+++ b/packages/x-components/src/views/accessibility/wai-base-result-link.vue
@@ -4,8 +4,8 @@
       <BaseResultImage :result="result" class="x-picture-zoom"></BaseResultImage>
     </BaseResultLink>
 
-    <BaseResultLink class="x-flex x-flex-col x-gap-4" :result="result">
-      <h2 class="x-small x-ellipsis x-uppercase" data-test="result-title">
+    <BaseResultLink class="xds:flex xds:flex-col xds:gap-4" :result="result">
+      <h2 class="small ellipsis uppercase" data-test="result-title">
         {{ result.name }}
       </h2>
       <div class="x-list x-list--horizontal x-list--wrap x-list--gap-03">
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 2e92a4f6af..59ebe3263e 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="x x-text-neutral-90">
+  <div class="x xds:text-neutral-90">
     <Tagging :consent="false" />
     <SnippetConfigExtraParams :values="initialExtraParams" />
     <PreselectedFilters />
@@ -7,8 +7,8 @@
     <SnippetCallbacks />
     <ExperienceControls />
     <OpenMainModal>Start</OpenMainModal>
-    <h1 class="x-text-primary-50 x-text-4xl x-font-bold x-leading-[1.5]">Test controls</h1>
-    <ul class="x-test-controls x-flex x-flex-col x-gap-16">
+    <h1 class="xds:text-primary-50 xds:text-4xl xds:font-bold xds:leading-[1.5]">Test controls</h1>
+    <ul class="x-test-controls xds:flex xds:flex-col xds:gap-16">
       <li class="x-test-controls__item">
         <label for="searchInput.instant">
           search-input - instant
@@ -110,18 +110,18 @@
         </label>
       </li>
     </ul>
-    <hr class="x-mt-10" />
-    <h1 class="x-text-primary-50 x-text-4xl x-font-bold x-leading-[1.5]">Teleport test</h1>
+    <hr class="xds:mt-10" />
+    <h1 class="xds:text-primary-50 xds:text-4xl xds:font-bold xds:leading-[1.5]">Teleport test</h1>
     <div id="teleport-here"></div>
     <MainModal :animation="modalAnimation" :reference-selector="referenceSelector">
-      <MultiColumnMaxWidthLayout class="x-bg-neutral-0">
+      <MultiColumnMaxWidthLayout class="xds:bg-neutral-0">
         <template #header-middle>
           <div
-            class="x-flex x-flex-col x-gap-16 x-items-stretch x-flex-auto"
+            class="xds:flex xds:flex-col xds:gap-16 xds:items-stretch xds:flex-auto"
             :data-test="`main-scroll-${mainScrollDirection}`"
           >
-            <div class="x-input-group x-input-group-lead x-rounded-sm">
-              <div class="x-input x-search-input-placeholder-container x-flex">
+            <div class="xds:input-group xds:nput-group-lead xds:rounded-sm">
+              <div class="xds:input x-search-input-placeholder-container xds:flex">
                 <SearchInputPlaceholder :messages="searchInputPlaceholderMessages" />
                 <SearchInput
                   aria-label="Search for products"
@@ -130,12 +130,12 @@
                 />
               </div>
               <ClearSearchInput
-                class="x-input-group-button x-input-group-button-rectangle"
+                class="xds:input-group-button xds:input-group-button-rectangle"
                 aria-label="Clear query"
               >
                 Clear
               </ClearSearchInput>
-              <SearchButton aria-label="Search" class="x-input-group-button-primary">
+              <SearchButton aria-label="Search" class="xds:input-group-button-primary">
                 <SearchIcon />
               </SearchButton>
             </div>
@@ -155,8 +155,8 @@
               </template>
               <RelatedTags
                 :animation="resultsAnimation"
-                class="x-gap-8"
-                item-class="x-tag-outlined"
+                class="xds:gap-8"
+                item-class="xds:tag-outlined"
               />
               <template #sliding-panel-right-button>
                 <ChevronRight />
@@ -166,7 +166,7 @@
         </template>
 
         <template #header-end>
-          <CloseMainModal class="x-button--ghost x-button">
+          <CloseMainModal class="x-button--ghost xds:button">
             <CrossIcon />
           </CloseMainModal>
         </template>
@@ -178,7 +178,7 @@
         <template #toolbar-aside>
           <BaseIdTogglePanelButton
             v-if="x.totalResults > 0"
-            class="x-button--ghost x-button"
+            class="x-button--ghost xds:button"
             panel-id="aside-panel"
           >
             Toggle Aside
@@ -186,11 +186,11 @@
         </template>
 
         <template #toolbar-body>
-          <div v-if="x.totalResults > 0" class="x-flex x-items-center x-gap-12">
-            <span class="x-text1">{{ x.totalResults }} Results</span>
+          <div v-if="x.totalResults > 0" class="xds:flex xds:items-center xds:gap-12">
+            <span class="xds:text1">{{ x.totalResults }} Results</span>
             <BaseColumnPickerList
               :model-value="selectedColumns"
-              class="x-gap-4"
+              class="xds:gap-4"
               :columns="columnPickerValues"
               @update:model-value="(col: any) => (selectedColumns = col)"
             >
@@ -201,14 +201,14 @@
               </template>
 
               <template #divider>
-                <span class="x-button-group-divider"></span>
+                <span class="xds:button-group-divider"></span>
               </template>
             </BaseColumnPickerList>
             <SortPickerList
               v-slot="{ item }"
               :items="sortValues"
-              class="x-button-group"
-              button-class="x-button x-button-outlined"
+              class="xds:button-group"
+              button-class="xds:button xds:button-outlined"
             >
               {{ item || 'default' }}
             </SortPickerList>
@@ -233,18 +233,18 @@
           <!--  Redirection  -->
           <Redirection
             v-slot="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }"
-            class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+            class="xds:p-28 xds:flex xds:flex-col xds:gap-8 xds:items-center xds:bg-lead-25 xds:my-8"
             :delay-in-seconds="5"
           >
             <p>Your search matches a special place in our website. You are being redirected to:</p>
             <a :href="redirection.url" data-test="redirection-link" @click="redirect">
               {{ redirection.url }}
             </a>
-            <div class="x-flex x-gap-32">
-              <button class="x-button--ghost x-button x-text-neutral-25" @click="abortRedirect">
+            <div class="xds:flex xds:gap-32">
+              <button class="x-button--ghost xds:button xds:text-neutral-25" @click="abortRedirect">
                 No, I'll stay here
               </button>
-              <button class="x-button--ghost x-button x-text-neutral-90" @click="redirect">
+              <button class="x-button--ghost xds:button xds:text-neutral-90" @click="redirect">
                 Yes, redirect me
               </button>
             </div>
@@ -257,22 +257,24 @@
             <!--  No Results Message  -->
             <div
               v-if="x.noResults && !x.fromNoResultsWithFilters"
-              class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+              class="xds:p-28 xds:flex xds:flex-col xds:gap-8 xds:items-center xds:bg-lead-25 xds:my-8"
               data-test="no-results-message"
             >
               <p>
                 There are no results for
-                <span class="x-font-bold">{{ x.query.search }}</span>
+                <span class="xds:font-bold">{{ x.query.search }}</span>
               </p>
               <p>You may be interested in these:</p>
             </div>
             <LocationProvider location="results">
-              <AiOverview class="x-mb-28">
+              <AiOverview class="xds:mb-28">
                 <template #result="{ result }">
-                  <Result :result="result" class="x-w-[150px]" />
+                  <Result :result="result" class="xds:w-[150px]" />
                 </template>
                 <template #extra-content>
-                  <button class="x-bg-lead-50 x-absolute x-bottom-0 x-right-0 x-translate-y-full">
+                  <button
+                    class="xds:bg-lead-50 xds:absolute xds:bottom-0 xds:right-0 xds:translate-y-full"
+                  >
                     extra content
                   </button>
                 </template>
@@ -280,7 +282,7 @@
             </LocationProvider>
             <template v-if="!x.query.searchBox">
               <!-- Brand Recommendations -->
-              <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
+              <h1 class="xds:mb-16 xds:title1">Brand Recommendations</h1>
               <LocationProvider location="no_results">
                 <QueryPreviewList
                   v-slot="{ queryPreviewInfo, totalResults, results, displayTagging, queryTagging }"
@@ -294,9 +296,9 @@
                     :payload="displayTagging"
                     :event-metadata="{ feature: 'customer' }"
                   >
-                    <div class="x-flex x-flex-col x-gap-8 x-mb-16">
+                    <div class="xds:flex xds:flex-col xds:gap-8 xds:mb-16">
                       <QueryPreviewButton
-                        class="x-w-fit x-button-xl x-button-ghost"
+                        class="xds:w-fit xds:button-xl xds:button-ghost"
                         :query-preview-info="queryPreviewInfo"
                         :metadata="{ feature: 'customer' }"
                       >
@@ -304,7 +306,7 @@
                       </QueryPreviewButton>
                       <DisplayResultProvider :query-tagging="queryTagging">
                         <SlidingPanel :reset-on-content-change="false">
-                          <div class="x-flex x-gap-8">
+                          <div class="xds:flex xds:gap-8">
                             <Result
                               v-for="result in results"
                               :key="result.id"
@@ -340,7 +342,7 @@
                       >
                         <BaseVariableColumnGrid
                           style="--x-size-min-width-grid-item: 150px"
-                          class="x-gap-12"
+                          class="xds:gap-12"
                           :animation="resultsAnimation"
                           :columns="x.device === 'mobile' ? 2 : 4"
                         >
@@ -363,19 +365,19 @@
                               v-slot="{ results }"
                               :suggestion="nextQueries[0]"
                               :max-items-to-render="controls.nextQueriesPreview.maxItemsToRender"
-                              class="x-pt-24"
+                              class="xds:pt-24"
                             >
                               <h1 class="x-title2">Others clients have searched</h1>
                               <NextQuery
-                                class="x-suggestion x-text1 x-text1-lg"
+                                class="xds:suggestion xds:text1 xds:text1-lg"
                                 :suggestion="nextQueries[0]"
                                 data-test="next-query-preview-name"
                               >
-                                <span class="x-font-bold">{{ nextQueries[0].query }}</span>
+                                <span class="xds:font-bold">{{ nextQueries[0].query }}</span>
                               </NextQuery>
-                              <div class="x-mb-24">
+                              <div class="xds:mb-24">
                                 <SlidingPanel :reset-on-content-change="false">
-                                  <div class="x-flex x-flex-row x-gap-8">
+                                  <div class="xds:flex xds:flex-row xds:gap-8">
                                     <Result
                                       v-for="result in results"
                                       :key="result.id"
@@ -389,7 +391,7 @@
                               <NextQuery
                                 :suggestion="nextQueries[0]"
                                 data-test="view-all-results"
-                                class="x-button x-button-outlined x-rounded-full x-mx-auto x-mt-8 x-mb-24"
+                                class="xds:button xds:button-outlined xds:rounded-full xds:mx-auto xds:mt-8 xds:mb-24"
                               >
                                 {{ 'View all results' }}
                               </NextQuery>
@@ -398,11 +400,15 @@
 
                           <template #related-prompts-group>
                             <RelatedPromptsTagList
-                              button-class="x-button-lead x-button-circle x-button-ghost x-p-0"
-                              class="-x-mb-1 x-mt-24 desktop:x-mt-0 x-p-0 x-h-[70px]"
-                              tag-class="x-rounded-xl x-gap-8 x-w-[300px] x-max-w-[400px]"
-                              :tag-colors="['x-bg-amber-300', 'x-bg-amber-400', 'x-bg-amber-500']"
-                              scroll-container-class="desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm"
+                              button-class="xds:button-lead xds:button-circle xds:button-ghost p-0"
+                              class="xds:-mb-1 xds:mt-24 xds:desktop:mt-0 xds:p-0 xds:h-[70px]"
+                              tag-class="xds:rounded-xl xds:gap-8 xds:w-[300px] xds:max-w-[400px]"
+                              :tag-colors="[
+                                'xds:bg-amber-300',
+                                'xds:bg-amber-400',
+                                'xds:bg-amber-500',
+                              ]"
+                              scroll-container-class="xds:desktop:sliding-panel-fade xds:desktop:sliding-panel-fade-sm"
                             >
                               <template #default="{ relatedPrompt, isSelected, onSelect }">
                                 <DisplayEmitter
@@ -430,14 +436,14 @@
                                 :queries-preview-info="relatedPromptsQueriesPreviewInfo"
                                 query-feature="related_prompts"
                               >
-                                <div class="x-flex x-flex-col x-gap-8 x-mb-16">
+                                <div class="xds:flex xds:flex-col xds:gap-8 xds:mb-16">
                                   <QueryPreviewButton
                                     :query-preview-info="queryPreviewInfo"
-                                    class="x-button x-button-lead x-button-tight x-title3 x-title3-sm desktop:x-title3-md max-desktop:x-px-16"
+                                    class="xds:button xds:button-lead xds:button-tight xds:title3 xds:title3-sm xds:desktop:title3-md xds:max-desktop:px-16"
                                   >
                                     {{ queryPreviewInfo.query }}
                                     ({{ totalResults }})
-                                    <ArrowRightIcon class="x-icon-lg" />
+                                    <ArrowRightIcon class="xds:icon-lg" />
                                   </QueryPreviewButton>
                                   <DisplayEmitter
                                     :payload="getToolingDisplayTagging(queryPreviewInfo)"
@@ -456,7 +462,7 @@
                                           getToolingAdd2CartTagging(queryPreviewInfo)
                                         "
                                       >
-                                        <div class="x-flex x-gap-8">
+                                        <div class="xds:flex xds:gap-8">
                                           <Result
                                             v-for="result in results"
                                             :key="result.id"
@@ -482,8 +488,8 @@
 
             <!-- Semantic Queries -->
             <SemanticQueries v-slot="{ queries: semanticQueries, findSemanticQuery }">
-              <section class="x-mt-28">
-                <h1 v-if="isAnyQueryLoadedInPreview(semanticQueries)" class="x-title1">
+              <section class="xds:mt-28">
+                <h1 v-if="isAnyQueryLoadedInPreview(semanticQueries)" class="xds:title1">
                   Similar Semantic Queries
                 </h1>
                 <LocationProvider :location="x.noResults ? 'no_results' : 'low_results'">
@@ -493,7 +499,7 @@
                     query-feature="semantics"
                   >
                     <div
-                      class="x-flex x-flex-col x-gap-8 x-mb-16"
+                      class="xds:flex xds:lex-col xds:gap-8 xds:mb-16"
                       data-test="semantic-query-preview"
                       :data-query="query"
                     >
@@ -501,7 +507,7 @@
                       <!-- TODO: review why suggestion query renaming breaks e2e -->
                       <SemanticQuery
                         v-slot="{ suggestion: { query } }"
-                        class="x-suggestion x-title2 x-title2-md"
+                        class="xds:suggestion xds:title2 xds:title2-md"
                         :suggestion="findSemanticQuery(query)"
                       >
                         <span data-test="semantic-queries-query">{{ query }}</span>
@@ -509,7 +515,7 @@
                       <!-- eslint-enable vue/no-template-shadow -->
                       <DisplayResultProvider :query-tagging="queryTagging">
                         <SlidingPanel :reset-on-content-change="false">
-                          <div class="x-flex x-gap-8">
+                          <div class="xds:flex xds:gap-8">
                             <Result
                               v-for="result in results"
                               :key="result.id"
diff --git a/packages/x-components/src/views/home/aside.vue b/packages/x-components/src/views/home/aside.vue
index 68409c8415..a2fb22b8ff 100644
--- a/packages/x-components/src/views/home/aside.vue
+++ b/packages/x-components/src/views/home/aside.vue
@@ -1,25 +1,25 @@
 <template>
-  <div class="x-flex x-flex-col x-gap-24">
+  <div class="xds:flex xds:flex-col xds:gap-24">
     <FacetsProvider :facets="staticFacets" group-id="price" />
     <ClearFilters />
     <SelectedFiltersList>
       <template #default="{ filter }">
-        <SimpleFilter :filter="filter" :css-classes="['x-facet-filter-success']">
+        <SimpleFilter :filter="filter" :css-classes="['xds:facet-filter-success']">
           <template #label>{{ filter.label ?? filter.id }}</template>
         </SimpleFilter>
       </template>
     </SelectedFiltersList>
 
     <!-- Facets -->
-    <Facets class="x-gap-24">
+    <Facets class="gap-24">
       <!--  Editable Number Price Range Facet    -->
       <template #editable-number-range-facet="{ facet }">
         <BaseHeaderTogglePanel
           :data-test="facet.label"
-          class="x-border-0 x-border-b x-border-neutral-10"
+          class="xds:border-0 xds:border-b xds:border-neutral-10"
         >
           <template #header-content>
-            <span :data-test="facet.label" class="x-truncate">{{ facet.label }}</span>
+            <span :data-test="facet.label" class="xds:truncate">{{ facet.label }}</span>
             <ChevronDown />
           </template>
           <!-- Filters -->
@@ -29,9 +29,9 @@
 
       <!--  Hierarchical Facet    -->
       <template #hierarchical-facet="{ facet }">
-        <BaseHeaderTogglePanel header-class="x-w-full x-flex x-justify-between x-py-8">
+        <BaseHeaderTogglePanel header-class="xds:w-full xds:flex xds:justify-between xds:py-8">
           <template #header-content>
-            <span class="x-truncate">{{ facet.label }}</span>
+            <span class="xds:truncate">{{ facet.label }}</span>
             <ChevronDown />
           </template>
           <!-- Filters -->
@@ -40,7 +40,7 @@
               <HierarchicalFilter
                 :filter="filter"
                 :data-test="`${facet.label}-filter`"
-                children-filters-class="x-ml-16"
+                children-filters-class="xds:ml-16"
               />
             </FiltersList>
           </SlicedFilters>
@@ -49,9 +49,9 @@
 
       <!--  Range Facet    -->
       <template #number-range-facet="{ facet }">
-        <BaseHeaderTogglePanel header-class="x-w-full x-flex x-justify-between x-py-8">
+        <BaseHeaderTogglePanel header-class="xds:w-full xds:flex xds:justify-between xds:py-8">
           <template #header-content>
-            <span :data-test="facet.label" class="x-truncate">{{ facet.label }}</span>
+            <span :data-test="facet.label" class="xds:truncate">{{ facet.label }}</span>
             <ChevronDown />
           </template>
           <!-- Filters -->
@@ -88,11 +88,11 @@
 
       <!--  Default Facet    -->
       <template #default="{ facet }">
-        <BaseHeaderTogglePanel header-class="x-w-full x-flex x-py-8 x-gap-8">
+        <BaseHeaderTogglePanel header-class="xds:w-full xds:flex xds:py-8 xds:gap-8">
           <template #header-content>
-            <span :data-test="facet.label" class="x-truncate">{{ facet.label }}</span>
+            <span :data-test="facet.label" class="xds:truncate">{{ facet.label }}</span>
             <span data-test="total-filters">{{ facet.filters.length }}</span>
-            <ChevronDown class="x-ml-auto" />
+            <ChevronDown class="xds:ml-auto" />
           </template>
 
           <!-- Filters -->
diff --git a/packages/x-components/src/views/home/predictive-layer.vue b/packages/x-components/src/views/home/predictive-layer.vue
index 2bf94ae032..7c225833cd 100644
--- a/packages/x-components/src/views/home/predictive-layer.vue
+++ b/packages/x-components/src/views/home/predictive-layer.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseKeyboardNavigation>
     <Empathize :animation="empathizeAnimation">
-      <div class="x-flex x-gap-24">
+      <div class="xds:flex xds:gap-24">
         <PopularSearches :max-items-to-render="10" />
         <HistoryQueries :max-items-to-render="controls.historyQueries.maxItemsToRender" />
         <ClearHistoryQueries class="x-button--ghost x-button--ghost-start">
@@ -14,9 +14,9 @@
         <!-- IdentifierResults -->
         <IdentifierResults v-slot="{ identifierResult }">
           <BaseResultLink :result="identifierResult">
-            <article class="x-suggestion">
+            <article class="xds:suggestion">
               <IdentifierResult :result="identifierResult" />
-              <span class="x-truncate" data-test="result-text">
+              <span class="xds:truncate" data-test="result-text">
                 {{ identifierResult.name }}
               </span>
             </article>
diff --git a/packages/x-components/src/views/home/sliding-next-query-preview.vue b/packages/x-components/src/views/home/sliding-next-query-preview.vue
index 3168e74fde..11073d029a 100644
--- a/packages/x-components/src/views/home/sliding-next-query-preview.vue
+++ b/packages/x-components/src/views/home/sliding-next-query-preview.vue
@@ -2,15 +2,15 @@
   <NextQueryPreview
     v-slot="{ results, totalResults, suggestion: nextQuerySuggestion }"
     :suggestion="nextQuerySuggestion"
-    class="x-flex x-flex-col x-gap-8"
+    class="xds:flex xds:flex-col xds:gap-8"
   >
     <h1 class="x-title2">Others clients have searched</h1>
-    <NextQuery class="x-suggestion x-text1 x-text1-lg" :suggestion="nextQuerySuggestion">
-      <span class="x-font-bold">{{ nextQuerySuggestion.query }}</span>
+    <NextQuery class="xds:suggestion xds:text1 xds:text1-lg" :suggestion="nextQuerySuggestion">
+      <span class="xds:font-bold">{{ nextQuerySuggestion.query }}</span>
       ({{ totalResults }})
     </NextQuery>
     <SlidingPanel :reset-on-content-change="false">
-      <div class="x-flex x-flex-col x-gap-8">
+      <div class="xds:flex xds:flex-col xds:gap-8">
         <Result
           v-for="result in results"
           :key="result.id"
diff --git a/packages/x-components/src/views/home/sliding-query-preview.vue b/packages/x-components/src/views/home/sliding-query-preview.vue
index 893d8fe629..a73f22b11e 100644
--- a/packages/x-components/src/views/home/sliding-query-preview.vue
+++ b/packages/x-components/src/views/home/sliding-query-preview.vue
@@ -4,10 +4,10 @@
     :debounce-time-ms="250"
     :query="query"
   >
-    <div class="x-flex x-gap-8 x-mb-16">
-      <h1 class="x-title2">{{ queryPreview }} ({{ totalResults }})</h1>
+    <div class="xds:flex xds:gap-8 xds:mb-16">
+      <h1 class="xds:title2">{{ queryPreview }} ({{ totalResults }})</h1>
       <SlidingPanel :reset-on-content-change="false" scroll-container-class="x-sliding-panel-fade">
-        <div class="x-flex x-flex-row x-gap-8">
+        <div class="xds:flex xds:flex-row xds:gap-8">
           <Result
             v-for="result in results"
             :key="result.id"
diff --git a/packages/x-components/src/views/pdp.vue b/packages/x-components/src/views/pdp.vue
index d78e752205..c678a0ca00 100644
--- a/packages/x-components/src/views/pdp.vue
+++ b/packages/x-components/src/views/pdp.vue
@@ -4,7 +4,7 @@
     <button
       v-if="showAddToCartButton"
       data-test="pdp-add-to-cart-button"
-      class="x-button"
+      class="xds:button"
       @click="addProductToCart"
     >
       Add product to cart
diff --git a/packages/x-components/src/x-modules/ai/components/__tests__/ai-overview.spec.ts b/packages/x-components/src/x-modules/ai/components/__tests__/ai-overview.spec.ts
index a4c7150b9d..26b6fdc7f6 100644
--- a/packages/x-components/src/x-modules/ai/components/__tests__/ai-overview.spec.ts
+++ b/packages/x-components/src/x-modules/ai/components/__tests__/ai-overview.spec.ts
@@ -547,4 +547,22 @@ describe('ai-overview component', () => {
     expect(sut.toggleButton.text()).toBe(propsStub.expandText)
     expect(sut.chevronDownIcon.classes()).not.toContain('x-ai-overview-toggle-btn-icon-expanded')
   })
+
+  it('should allow customizing the toggle button with the cta-button slot', async () => {
+    const sut = render({
+      slots: {
+        'cta-button': '<button data-test="custom-cta-button">Custom CTA</button>',
+      },
+    })
+
+    expect(sut.toggleButton.exists()).toBeFalsy()
+    const customButton = sut.wrapper.find(getDataTestSelector('custom-cta-button'))
+    expect(customButton.exists()).toBeTruthy()
+    expect(customButton.text()).toBe('Custom CTA')
+
+    // Clicking the custom button should not trigger expansion automatically if it doesn't have the click listener
+    // But clicking the wrapper should NOT trigger it because the cta-button slot is used.
+    await sut.toggleButtonWrapper.trigger('click')
+    expect(sut.suggestionsContainer.isVisible()).toBeFalsy()
+  })
 })
diff --git a/packages/x-components/src/x-modules/ai/components/ai-overview.vue b/packages/x-components/src/x-modules/ai/components/ai-overview.vue
index b8654e0f22..379ebb8898 100644
--- a/packages/x-components/src/x-modules/ai/components/ai-overview.vue
+++ b/packages/x-components/src/x-modules/ai/components/ai-overview.vue
@@ -157,12 +157,12 @@
       <Fade>
         <div
           v-if="queries.length"
-          class="x-cursor-pointer"
+          class="x-ai-overview-toggle-btn-wrapper x-cursor-pointer"
           data-test="ai-overview-toggle-button-wrapper"
-          @click="emitAndSetExpand(!expanded)"
+          @click="!$slots['cta-button'] && emitAndSetExpand(!expanded)"
         >
           <div v-show="!expanded" class="x-ai-overview-gradient" data-test="ai-overview-gradient" />
-          <div class="x-ai-overview-toggle-wrapper">
+          <slot name="cta-button">
             <button
               class="x-ai-overview-toggle-btn"
               data-test="ai-overview-toggle-button"
@@ -174,7 +174,7 @@
                 :class="{ 'x-ai-overview-toggle-btn-icon-expanded': expanded }"
               />
             </button>
-          </div>
+          </slot>
         </div>
       </Fade>
     </div>
@@ -414,9 +414,9 @@ export default defineComponent({
   background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);
 }
 
-.x-ai-overview-toggle-wrapper {
+.x-ai-overview-toggle-btn-wrapper {
   display: flex;
-  position: relative;
+  justify-content: center;
 }
 
 .x-ai-overview-toggle-btn {
@@ -437,6 +437,7 @@ export default defineComponent({
   min-height: 2.5rem;
   gap: 0.5rem;
   font-size: 0.875rem;
+  position: relative;
 }
 
 .x-ai-overview-toggle-btn:hover {
diff --git a/packages/x-components/src/x-modules/facets/components/clear-filters.vue b/packages/x-components/src/x-modules/facets/components/clear-filters.vue
index c33ff85efd..c5a866dde9 100644
--- a/packages/x-components/src/x-modules/facets/components/clear-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/clear-filters.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseEventButton
     v-if="isVisible"
-    class="x-clear-filters x-button"
+    class="x-clear-filters xds:button"
     data-test="clear-filters"
     :disabled="!hasSelectedFilters"
     :events="events"
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
index 60f8dba074..1c1cded07a 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
@@ -205,7 +205,7 @@ describe('testing `HierarchicalFilter` component', () => {
     expect(getFilterWrapper().classes()).toHaveLength(4)
     expect(getFilterWrapper().classes()).toEqual(
       expect.arrayContaining([
-        'x-facet-filter',
+        'xds:facet-filter',
         'x-hierarchical-filter',
         'x-hierarchical-filter--is-partially-selected',
         'x-facet-filter--is-partially-selected',
@@ -218,8 +218,8 @@ describe('testing `HierarchicalFilter` component', () => {
     expect(getFilterWrapper().classes()).toHaveLength(6)
     expect(getFilterWrapper().classes()).toEqual(
       expect.arrayContaining([
-        'x-facet-filter',
-        'x-selected',
+        'xds:facet-filter',
+        'xds:selected',
         'x-hierarchical-filter',
         'x-hierarchical-filter--is-selected',
         'x-hierarchical-filter--is-partially-selected',
@@ -233,7 +233,7 @@ describe('testing `HierarchicalFilter` component', () => {
     expect(getFilterWrapper().classes()).toHaveLength(4)
     expect(getFilterWrapper().classes()).toEqual(
       expect.arrayContaining([
-        'x-facet-filter',
+        'xds:facet-filter',
         'x-hierarchical-filter',
         'x-hierarchical-filter--is-partially-selected',
         'x-facet-filter--is-partially-selected',
@@ -245,14 +245,14 @@ describe('testing `HierarchicalFilter` component', () => {
     const { getFilterWrapper, mutateFilter, getRootFilter } = render()
 
     expect(getFilterWrapper().classes()).not.toEqual(
-      expect.arrayContaining(['x-selected', 'x-hierarchical-filter--is-selected']),
+      expect.arrayContaining(['xds:selected', 'x-hierarchical-filter--is-selected']),
     )
 
     const filter = getRootFilter()
     await mutateFilter(filter, { selected: true })
 
     expect(getFilterWrapper().classes()).toEqual(
-      expect.arrayContaining(['x-selected', 'x-hierarchical-filter--is-selected']),
+      expect.arrayContaining(['xds:selected', 'x-hierarchical-filter--is-selected']),
     )
   })
 
@@ -333,7 +333,7 @@ describe('testing `HierarchicalFilter` component', () => {
 
       getFiltersWrappers().forEach((filterWrapper, index) => {
         const filter = getFilters()[index]
-        const classes = ['x-facet-filter', 'x-hierarchical-filter']
+        const classes = ['xds:facet-filter', 'x-hierarchical-filter']
         if (partiallySelectedIds.includes(filter.id)) {
           classes.push('x-hierarchical-filter--is-partially-selected')
           classes.push('x-facet-filter--is-partially-selected')
@@ -365,7 +365,7 @@ describe('testing `HierarchicalFilter` component', () => {
       const grandChild0Data = getFilters()[2]
       expect(grandChild0Wrapper.classes()).toHaveLength(2)
       expect(grandChild0Wrapper.classes()).toEqual(
-        expect.arrayContaining(['x-facet-filter', 'x-hierarchical-filter']),
+        expect.arrayContaining(['xds:facet-filter', 'x-hierarchical-filter']),
       )
 
       /* Filters with totalResults===0 should be disabled. */
@@ -373,7 +373,7 @@ describe('testing `HierarchicalFilter` component', () => {
       expect(grandChild0Wrapper.attributes()).toHaveProperty('disabled')
       expect(grandChild0Wrapper.classes()).toHaveLength(2)
       expect(grandChild0Wrapper.classes()).toEqual(
-        expect.arrayContaining(['x-facet-filter', 'x-hierarchical-filter']),
+        expect.arrayContaining(['xds:facet-filter', 'x-hierarchical-filter']),
       )
 
       /* As grand-child-0 is deselected and grand-child-1 selected, child-0 should have partial
@@ -384,8 +384,8 @@ describe('testing `HierarchicalFilter` component', () => {
       expect(child0Wrapper.classes()).toHaveLength(6)
       expect(child0Wrapper.classes()).toEqual(
         expect.arrayContaining([
-          'x-facet-filter',
-          'x-selected',
+          'xds:facet-filter',
+          'xds:selected',
           'x-facet-filter--is-partially-selected',
           'x-hierarchical-filter',
           'x-hierarchical-filter--is-selected',
@@ -399,9 +399,9 @@ describe('testing `HierarchicalFilter` component', () => {
       expect(grandChild0Wrapper.classes()).toHaveLength(4)
       expect(grandChild0Wrapper.classes()).toEqual(
         expect.arrayContaining([
-          'x-facet-filter',
+          'xds:facet-filter',
           'x-hierarchical-filter',
-          'x-selected',
+          'xds:selected',
           'x-hierarchical-filter--is-selected',
         ]),
       )
@@ -410,7 +410,7 @@ describe('testing `HierarchicalFilter` component', () => {
       expect(child0Wrapper.classes()).toEqual(
         expect.arrayContaining([
           'x-facet-filter',
-          'x-selected',
+          'xds:selected',
           'x-hierarchical-filter',
           'x-hierarchical-filter--is-selected',
         ]),
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
index 22f2a8f926..eece61b248 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
@@ -98,12 +98,12 @@ describe('testing NumberRangeFilter component', () => {
   it('adds selected classes to the rendered element when the filter is selected', async () => {
     const { buttonWrapper, selectFilter } = render()
 
-    expect(buttonWrapper.classes()).not.toContain('x-selected')
+    expect(buttonWrapper.classes()).not.toContain('xds:selected')
     expect(buttonWrapper.classes()).not.toContain('x-number-range-filter--is-selected')
 
     await selectFilter()
 
-    expect(buttonWrapper.classes()).toContain('x-selected')
+    expect(buttonWrapper.classes()).toContain('xds:selected')
     expect(buttonWrapper.classes()).toContain('x-number-range-filter--is-selected')
   })
 })
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts
index d3738cdb23..004a3ad412 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts
@@ -91,11 +91,11 @@ describe('testing Renderless Filter component', () => {
   it('adds selected classes to the rendered element when the filter is selected', async () => {
     const { buttonWrapper, selectFilter } = render()
 
-    expect(buttonWrapper.classes()).not.toContain('x-selected')
+    expect(buttonWrapper.classes()).not.toContain('xds:selected')
 
     await selectFilter()
 
-    expect(buttonWrapper.classes()).toContain('x-selected')
+    expect(buttonWrapper.classes()).toContain('xds:selected')
   })
 
   it('disables the filter when it has no results', async () => {
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts
index 783bb85746..8e8ba4bf0b 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts
@@ -142,7 +142,7 @@ describe('testing SimpleFilter component', () => {
 
     expect(buttonWrapper.classes()).toHaveLength(2)
     expect(buttonWrapper.classes()).toEqual(
-      expect.arrayContaining(['x-facet-filter', 'x-simple-filter']),
+      expect.arrayContaining(['xds:facet-filter', 'x-simple-filter']),
     )
     expect(buttonWrapper.attributes()).toHaveProperty('aria-checked', 'false')
     expect(buttonWrapper.element).toHaveProperty('disabled', false)
@@ -152,9 +152,9 @@ describe('testing SimpleFilter component', () => {
     expect(buttonWrapper.classes()).toHaveLength(4)
     expect(buttonWrapper.classes()).toEqual(
       expect.arrayContaining([
-        'x-facet-filter',
+        'xds:facet-filter',
         'x-simple-filter',
-        'x-selected',
+        'xds:selected',
         'x-simple-filter--is-selected',
       ]),
     )
@@ -171,12 +171,12 @@ describe('testing SimpleFilter component', () => {
   it('adds selected classes to the rendered element when the filter is selected', async () => {
     const { buttonWrapper, selectFilter } = render()
 
-    expect(buttonWrapper.classes()).not.toContain('x-selected')
+    expect(buttonWrapper.classes()).not.toContain('xds:selected')
     expect(buttonWrapper.classes()).not.toContain('x-simple-filter--is-selected')
 
     await selectFilter()
 
-    expect(buttonWrapper.classes()).toContain('x-selected')
+    expect(buttonWrapper.classes()).toContain('xds:selected')
     expect(buttonWrapper.classes()).toContain('x-simple-filter--is-selected')
   })
 })
diff --git a/packages/x-components/src/x-modules/facets/components/filters/all-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/all-filter.vue
index 4c399ac68f..4b729a699e 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/all-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/all-filter.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseEventButton
-    class="x-facet-filter x-all-filter"
+    class="xds:facet-filter x-all-filter"
     data-test="all-filter"
     role="checkbox"
     :aria-checked="isSelected.toString()"
@@ -81,7 +81,7 @@ export default defineComponent({
      */
     const cssClasses = computed(() => {
       return {
-        'x-selected x-all-filter--is-selected': isSelected.value,
+        'xds:selected x-all-filter--is-selected': isSelected.value,
       }
     })
 
diff --git a/packages/x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue
index d4b8d1be97..9e75809af2 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue
@@ -31,7 +31,7 @@
       <input
         name="min"
         type="number"
-        class="x-editable-number-range-filter__input x-editable-number-range-filter__input--min x-input"
+        class="x-editable-number-range-filter__input x-editable-number-range-filter__input--min xds:input"
         :class="inputsClass"
         :value="!isAnyRange ? min : null"
         data-test="range-min"
@@ -42,7 +42,7 @@
       <input
         name="max"
         type="number"
-        class="x-editable-number-range-filter__input x-editable-number-range-filter__input--max x-input"
+        class="x-editable-number-range-filter__input x-editable-number-range-filter__input--max xds:input"
         :class="inputsClass"
         :value="max"
         data-test="range-max"
@@ -53,7 +53,7 @@
 
       <button
         v-if="!isInstant"
-        class="x-editable-number-range-filter__apply x-button"
+        class="x-editable-number-range-filter__apply xds:button"
         :class="buttonsClass"
         :disabled="hasError"
         data-test="range-apply"
@@ -67,7 +67,7 @@
 
       <button
         v-if="renderClearButton"
-        class="x-editable-number-range-filter__clear x-button"
+        class="x-editable-number-range-filter__clear xds:button"
         :class="buttonsClass"
         data-test="range-clear"
         @click="clearValues"
diff --git a/packages/x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue
index cf21774089..ecf1154b8c 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue
@@ -160,7 +160,7 @@ export default defineComponent({
       'x-hierarchical-filter',
       { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },
       { 'x-hierarchical-filter--is-selected': props.filter.selected },
-      { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },
+      { 'xds:facet-filter--is-partially-selected': isPartiallySelected.value },
       ...props.cssClasses,
     ])
 
diff --git a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
index 73ecb424b6..89d0bea984 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
@@ -44,8 +44,8 @@ export default defineComponent({
 
     /** CSS classes to apply to the element. */
     const innerCssClasses = computed(() => [
-      'x-facet-filter',
-      { 'x-selected': props.filter.selected },
+      'xds:facet-filter',
+      { 'xds:selected': props.filter.selected },
       ...props.cssClasses,
     ])
 
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
index 3143bcb5f8..28cb23ad16 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
@@ -11,7 +11,7 @@
       <input
         :value="query"
         type="search"
-        class="x-filters-search__input x-input"
+        class="x-filters-search__input xds:input"
         data-test="filters-search-input"
         aria-label="search into the filter values"
         @input="setQuery($event.target.value)"
@@ -216,7 +216,7 @@ Replacing search triggering:
     <input
       @input="setQuery($event.target.value)"
       :value="query"
-      class="x-input x-filters-search__input"
+      class="xds:input x-filters-search__input"
       :aria-label="filtersSearchInputMessage"/>
     <button @click="clearQuery">X</button>
   </template>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
index ff96fb7f35..3ca9d2694f 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
@@ -2,7 +2,7 @@
   <SelectedFilters :facets-ids="facetsIds" :always-visible="alwaysVisible">
     <component
       :is="animation"
-      class="x-selected-filters-list"
+      class="xds:selected-filters-list"
       data-test="selected-filters-list"
       tag="ul"
     >
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
index 601c4a61fa..418f393b17 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
@@ -8,7 +8,7 @@
     <template v-if="showButton">
       <button
         v-if="showMoreFilters"
-        class="x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-more"
+        class="xds:facet-filter x-sliced-filters__button x-sliced-filters__button--show-more"
         :class="buttonClass"
         data-test="sliced-filters-show-more-button"
         @click="toggleShowMoreFilters"
@@ -25,7 +25,7 @@
       </button>
       <button
         v-else
-        class="x-facet-filter x-sliced-filters__button x-sliced-filters__button--show-less"
+        class="xds:facet-filter x-sliced-filters__button x-sliced-filters__button--show-less"
         :class="buttonClass"
         data-test="sliced-filters-show-less-button"
         @click="toggleShowMoreFilters"
@@ -239,7 +239,7 @@ The `buttonClass` prop can be used to add classes to the show more/less buttons.
 
 ```vue live
 <Facets v-slot="{ facet }">
-  <SlicedFilters :filters="facet.filters" :max="4" buttonClass="x-facet-filter-lg">
+  <SlicedFilters :filters="facet.filters" :max="4" buttonClass="xds:facet-filter-lg">
     <Filters v-slot="{ filter }">
       <SimpleFilter :filter="filter"/>
     </Filters>
diff --git a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
index c93bafd49b..5d9aa9779d 100644
--- a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseEventButton
-    class="x-clear-history-queries x-button"
+    class="x-clear-history-queries xds:button"
     :class="dynamicClasses"
     :disabled="isHistoryQueriesEmpty"
     :events="clearHistoryQueriesEvents"
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-query.vue b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
index 69684e213b..4839d644fa 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="x-history-query x-suggestion-group">
+  <div class="x-history-query xds:suggestion-group">
     <!--
       Click on the History Query suggestion
       @event click
@@ -24,7 +24,7 @@
       <slot v-bind="{ ...baseScope }" />
     </BaseSuggestion>
     <RemoveHistoryQuery
-      class="x-history-query__remove x-suggestion-group-button"
+      class="x-history-query__remove xds:suggestion-group-button"
       :class="removeButtonClass"
       :history-query="suggestion"
       data-test="remove-history-query"
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index 2788fd2bde..583b941b2f 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -27,7 +27,7 @@
             <HistoryQuery
               :suggestion="suggestion"
               data-test="history-query-item"
-              class="x-history-queries__item x-suggestion"
+              class="x-history-queries__item xds:suggestion"
             >
               <template #default>
                 <!--
diff --git a/packages/x-components/src/x-modules/next-queries/components/next-queries.vue b/packages/x-components/src/x-modules/next-queries/components/next-queries.vue
index cbce950bef..6b9b021756 100644
--- a/packages/x-components/src/x-modules/next-queries/components/next-queries.vue
+++ b/packages/x-components/src/x-modules/next-queries/components/next-queries.vue
@@ -17,7 +17,7 @@
           v-slot="nextQueryScope"
           :suggestion="baseScope.suggestion"
           :highlight-curated="highlightCurated"
-          class="x-next-queries__suggestion x-suggestion"
+          class="x-next-queries__suggestion xds:suggestion"
         >
           <!-- eslint-disable max-len -->
           <!--
diff --git a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
index 20a9eb02cc..a6e2de384e 100644
--- a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
+++ b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
@@ -15,7 +15,7 @@
         <PopularSearch
           v-slot="popularSearchScope"
           :suggestion="baseScope.suggestion"
-          class="x-popular-searches__suggestion x-suggestion"
+          class="x-popular-searches__suggestion xds:suggestion"
         >
           <!-- eslint-disable max-len -->
           <!--
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
index 7bddc5e85f..60d15bf6e7 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
@@ -2,7 +2,7 @@
   <BaseEventButton
     :events="events"
     :metadata="metadata"
-    class="x-query-preview-button x-button"
+    class="x-query-preview-button xds:button"
     data-test="query-preview-button"
   >
     <!-- @slot Button content with a text, an icon or both -->
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index 7b3e6e3d7d..ae84d4ca57 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -245,10 +245,10 @@ In this example, the results will be rendered inside a sliding panel.
     :queriesPreviewInfo="queriesPreviewInfo"
     #default="{ queryPreviewInfo, totalResults, results }"
   >
-    <div class="x-flex x-flex-col x-gap-8 x-mb-16">
-      <h1 class="x-title2">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>
+    <div class="xds:flex xds:flex-col xds:gap-8 xds:mb-16">
+      <h1 class="xds:title2">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>
       <SlidingPanel :resetOnContentChange="false">
-        <div class="x-flex x-gap-8">
+        <div class="xds:flex xds:gap-8">
           <Result
             v-for="result in results"
             :key="result.id"
@@ -291,11 +291,11 @@ In this example, the ID of the results will be rendered along with the name.
 ```vue
 <template>
   <QueryPreviewList
-    class="x-flex x-gap-8"
+    class="xds:flex xds:gap-8"
     :queriesPreviewInfo="queriesPreviewInfo"
     #result="{ result }"
   >
-    <span class="x-font-bold">{{ result.id }}:</span>
+    <span class="xds:font-bold">{{ result.id }}:</span>
     <span>{{ result.name }}</span>
   </QueryPreviewList>
 </template>
diff --git a/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue b/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue
index 7212a73515..e7d6df339f 100644
--- a/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue
+++ b/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue
@@ -15,7 +15,7 @@
         <QuerySuggestion
           v-slot="querySuggestionScope"
           :suggestion="baseScope.suggestion"
-          class="x-query-suggestions__suggestion x-suggestion"
+          class="x-query-suggestions__suggestion xds:suggestion"
         >
           <!-- eslint-disable max-len -->
           <!--
diff --git a/packages/x-components/src/x-modules/related-tags/components/related-tag.vue b/packages/x-components/src/x-modules/related-tags/components/related-tag.vue
index 5681be153a..9bbfcb9120 100644
--- a/packages/x-components/src/x-modules/related-tags/components/related-tag.vue
+++ b/packages/x-components/src/x-modules/related-tags/components/related-tag.vue
@@ -145,7 +145,7 @@ export default defineComponent({
      */
     const dynamicClasses = computed(
       (): VueCSSClasses => ({
-        'x-selected x-related-tag--is-selected': isSelected.value,
+        'xds:selected x-related-tag--is-selected': isSelected.value,
         'x-related-tag--is-curated': shouldHighlightCurated.value,
       }),
     )
diff --git a/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue b/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
index e5458985dc..7dbb36d0ac 100644
--- a/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
+++ b/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
@@ -2,7 +2,7 @@
   <component :is="animation">
     <BaseEventButton
       v-if="isVisible"
-      class="x-scroll-to-top x-button"
+      class="x-scroll-to-top xds:button"
       data-test="scroll-to-top"
       aria-label="Scroll to top"
       :events="events"
diff --git a/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue b/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue
index 32900d2b6f..2aac9b8dd3 100644
--- a/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue
+++ b/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseEventButton
-    class="x-clear-search-input x-button"
+    class="x-clear-search-input xds:button"
     :class="dynamicClasses"
     :events="clearSearchInputEvents"
     data-test="clear-search-input"
diff --git a/packages/x-components/src/x-modules/search-box/components/search-button.vue b/packages/x-components/src/x-modules/search-box/components/search-button.vue
index 5e3cf0317b..cde84701b7 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-button.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-button.vue
@@ -1,13 +1,13 @@
 <template>
   <button
     ref="buttonRef"
-    class="x-search-button x-button"
+    class="x-search-button xds:button"
     :class="dynamicClasses"
     data-test="search-button"
     @click="emitEvents"
   >
     <!-- @slot _Required_. Button content (text, icon, or both) -->
-    <slot><span class="x-icon">⌕</span></slot>
+    <slot><span class="xds:icon">⌕</span></slot>
   </button>
 </template>
 
diff --git a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
index db7676b66d..b026efc52b 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
@@ -2,7 +2,7 @@
   <component
     :is="animation"
     v-if="isVisible"
-    class="x-input-placeholder x-search-input-placeholder"
+    class="xds:input-placeholder x-search-input-placeholder"
     mode="out-in"
   >
     <span :key="message" data-test="search-input-placeholder">
diff --git a/packages/x-components/src/x-modules/search-box/components/search-input.vue b/packages/x-components/src/x-modules/search-box/components/search-input.vue
index 564d7cc39a..1cb890f14e 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-input.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-input.vue
@@ -4,7 +4,7 @@
     :maxlength="maxLength"
     :value="query"
     autocomplete="off"
-    class="x-search-input x-input"
+    class="x-search-input xds:input"
     enterkeyhint="search"
     inputmode="search"
     type="search"
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
index 11dd599dc4..a99e802f14 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
@@ -56,7 +56,7 @@ function renderSortPickerList({
     onUserClickedASort,
     onSelectedSortProvided,
     getButton: (index: number) => wrapper.vm.$el.children[index] as HTMLElement,
-    getSelectedItem: () => sortPickerList.get('.x-selected'),
+    getSelectedItem: () => sortPickerList.get('.xds:selected'),
     clickNthItem: async (index: number) => {
       await sortPickerList
         .findAll(getDataTestSelector('sort-picker-button'))
@@ -136,8 +136,8 @@ describe('testing SortPickerList component', () => {
     await clickNthItem(1)
 
     const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button'))
-    expect(buttons[0].classes('x-selected')).toBeFalsy()
-    expect(buttons[1].classes('x-selected')).toBeTruthy()
+    expect(buttons[0].classes('xds:selected')).toBeFalsy()
+    expect(buttons[1].classes('xds:selected')).toBeTruthy()
   })
 
   describe('slots', () => {
diff --git a/packages/x-components/src/x-modules/search/components/partial-query-button.vue b/packages/x-components/src/x-modules/search/components/partial-query-button.vue
index e0ded0a2da..5eedd945a7 100644
--- a/packages/x-components/src/x-modules/search/components/partial-query-button.vue
+++ b/packages/x-components/src/x-modules/search/components/partial-query-button.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     ref="partialButtonEl"
-    class="x-partial-query-button x-button"
+    class="x-partial-query-button xds:button"
     data-test="partial-query-button"
     @click="emitEvents"
   >
diff --git a/packages/x-components/src/x-modules/search/components/sort-list.vue b/packages/x-components/src/x-modules/search/components/sort-list.vue
index 89e67130c1..fdc56b3bd0 100644
--- a/packages/x-components/src/x-modules/search/components/sort-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-list.vue
@@ -7,7 +7,7 @@
       class="x-option-list__item x-sort-list__item"
     >
       <BaseEventButton
-        class="x-sort-list__button x-button"
+        class="x-sort-list__button xds:button"
         data-test="x-sort-button"
         :events="event"
       >
diff --git a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
index 3bda2db131..b8048f8312 100644
--- a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
@@ -83,7 +83,7 @@ export default defineComponent({
       props.items.map(item => ({
         item,
         cssClasses: {
-          'x-selected': item === selectedSort.value,
+          'xds:selected': item === selectedSort.value,
         },
         event: { UserClickedASort: item },
       })),
@@ -185,7 +185,7 @@ The `buttonClass` prop can be used to add classes to the sort items.
 
 ```vue
 <template>
-  <SortPickerList :items="sortValues" buttonClass="x-button-outlined" />
+  <SortPickerList :items="sortValues" buttonClass="xds:button-outlined" />
 </template>
 
 <script>
diff --git a/packages/x-components/tailwind.config.ts b/packages/x-components/tailwind.config.ts
deleted file mode 100644
index 07408410c2..0000000000
--- a/packages/x-components/tailwind.config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { xTailwindPlugin, oldDsPlugin } from '@empathyco/x-tailwindcss'
-import { Config } from 'tailwindcss'
-import options from './src/tailwind/plugin-options'
-
-export default {
-  content: [
-    './public/index.html',
-    './src/**/*.vue',
-    './node_modules/@empathyco/x-tailwindcss/showcase/**/*.js',
-  ],
-  prefix: 'x-',
-  theme: {
-    extend: {
-      fontFamily: ({ theme }) => theme('x.fontFamily'),
-      fontSize: ({ theme }) => theme('x.fontSize'),
-      spacing: ({ theme }) => theme('x.spacing'),
-      colors: ({ theme }) => theme('x.colors'),
-      screens: ({ theme }) => theme('x.screens'),
-    },
-  },
-  plugins: [xTailwindPlugin(options), oldDsPlugin],
-  important: true,
-} as Config
diff --git a/packages/x-components/tests/e2e/clear-filters/clear-filters.spec.ts b/packages/x-components/tests/e2e/clear-filters/clear-filters.spec.ts
index 5558bdb81c..0923fe5455 100644
--- a/packages/x-components/tests/e2e/clear-filters/clear-filters.spec.ts
+++ b/packages/x-components/tests/e2e/clear-filters/clear-filters.spec.ts
@@ -7,7 +7,7 @@ When('clear filters button is clicked', () => {
 
 Then('no filters are selected', () => {
   ;['age_facet-filter', 'price_facet-filter', 'hierarchical_category-filter'].forEach(facetName => {
-    cy.getByDataTest(facetName).should('not.have.class', 'x-selected')
+    cy.getByDataTest(facetName).should('not.have.class', 'xds:selected')
   })
 })
 
diff --git a/packages/x-components/tests/e2e/common/common-steps.spec.ts b/packages/x-components/tests/e2e/common/common-steps.spec.ts
index e089691f35..aabd42a746 100644
--- a/packages/x-components/tests/e2e/common/common-steps.spec.ts
+++ b/packages/x-components/tests/e2e/common/common-steps.spec.ts
@@ -92,7 +92,7 @@ Then(
   function (this: any, simpleFilterIndex: number, facetName: string, isSelected: boolean) {
     cy.getByDataTest(`${facetName}-filter`)
       .contains(this[`clickedFilter${simpleFilterIndex}`])
-      .should(`${isSelected ? '' : 'not.'}to.have.class`, 'x-selected')
+      .should(`${isSelected ? '' : 'not.'}to.have.class`, 'xds:selected')
   },
 )
 
@@ -102,7 +102,7 @@ Then(
   function (this: any, simpleFilterIndex: number, facetName: string) {
     cy.getByDataTest(`${facetName}-filter`)
       .eq(simpleFilterIndex)
-      .should('to.have.class', 'x-selected')
+      .should('to.have.class', 'xds:selected')
   },
 )
 
@@ -112,7 +112,7 @@ Then(
   function (this: any, simpleFilterIndex: number, facetName: string) {
     cy.getByDataTest(`${facetName}-filter`)
       .eq(simpleFilterIndex)
-      .should('not.to.have.class', 'x-selected')
+      .should('not.to.have.class', 'xds:selected')
   },
 )
 
diff --git a/packages/x-components/tests/e2e/multiselect-filters/multiselect-filters.spec.ts b/packages/x-components/tests/e2e/multiselect-filters/multiselect-filters.spec.ts
index 1ac23ce505..76aeb3a4ae 100644
--- a/packages/x-components/tests/e2e/multiselect-filters/multiselect-filters.spec.ts
+++ b/packages/x-components/tests/e2e/multiselect-filters/multiselect-filters.spec.ts
@@ -8,7 +8,7 @@ When(
   'selected filter number {int} in facet {string} list is clicked',
   (selectedFilter: number, facetName: string) => {
     cy.getByDataTest(`${facetName}-filter`)
-      .should('have.class', 'x-selected')
+      .should('have.class', 'xds:selected')
       .eq(selectedFilter)
       .click()
   },
diff --git a/packages/x-components/tests/e2e/simple-filters/simple-filters.spec.ts b/packages/x-components/tests/e2e/simple-filters/simple-filters.spec.ts
index f3f3c924ba..cfa9c7501a 100644
--- a/packages/x-components/tests/e2e/simple-filters/simple-filters.spec.ts
+++ b/packages/x-components/tests/e2e/simple-filters/simple-filters.spec.ts
@@ -35,6 +35,6 @@ Then(
   function (simpleFilterIndex: number, facetName: string, isSelected: boolean) {
     cy.getByDataTest(`${facetName}-filter`)
       .contains(this[`clickedChildFilter${simpleFilterIndex}`])
-      .should(`${isSelected ? '' : 'not.'}to.have.class`, 'x-selected')
+      .should(`${isSelected ? '' : 'not.'}to.have.class`, 'xds:selected')
   },
 )
diff --git a/packages/x-components/tests/support/index.ts b/packages/x-components/tests/support/index.ts
index 22c8a60c13..a0322324cf 100644
--- a/packages/x-components/tests/support/index.ts
+++ b/packages/x-components/tests/support/index.ts
@@ -185,7 +185,7 @@ const customCommands: CustomCommands = {
     return chain
   },
   assertFilterIs(label, selectedStatus) {
-    const selectedClass = 'x-selected'
+    const selectedClass = 'xds:selected'
     if (selectedStatus === 'selected') {
       return cy
         .getFilterWithLabel(label)
@@ -199,7 +199,7 @@ const customCommands: CustomCommands = {
     }
   },
   getSelectedFilters() {
-    return cy.get('.x-selected')
+    return cy.get('.xds:selected')
   },
   waitForResultsToRender() {
     cy.getByDataTest('search-result').should('be.visible')
diff --git a/packages/x-components/vite.config.ts b/packages/x-components/vite.config.ts
index 05d5bcefe0..c461abe578 100644
--- a/packages/x-components/vite.config.ts
+++ b/packages/x-components/vite.config.ts
@@ -2,6 +2,7 @@ import { resolve } from 'path'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 import Inspector from 'vite-plugin-vue-inspector'
+import tailwindcss from '@tailwindcss/vite'
 
 export const vueDocsPlugin = {
   name: 'vue-docs',
@@ -11,7 +12,14 @@ export const vueDocsPlugin = {
 }
 
 export default defineConfig({
-  plugins: [vue(), vueDocsPlugin, Inspector()],
+  plugins: [
+    vue(),
+    vueDocsPlugin,
+    Inspector(),
+    tailwindcss({
+      config: resolve(__dirname, './tailwind.config.ts'),
+    } as any),
+  ],
   resolve: {
     alias: {
       vue: resolve(__dirname, 'node_modules/vue'),
diff --git a/packages/x-svg-converter/src/__tests__/regex-utils.spec.ts b/packages/x-svg-converter/src/__tests__/regex-utils.spec.ts
index 8302624725..e46863fd99 100644
--- a/packages/x-svg-converter/src/__tests__/regex-utils.spec.ts
+++ b/packages/x-svg-converter/src/__tests__/regex-utils.spec.ts
@@ -40,13 +40,13 @@ describe('test regex utils', () => {
     expect(addFillNoneInRoot(svgWithFillNone)).toBe(svgWithFillNone)
   })
 
-  it('adds the `x-icon` and data classes to the root of an SVG', () => {
+  it('adds the `xds:icon` and data classes to the root of an SVG', () => {
     const svg = `<svg fill="none">
 <path />
 </svg>`
 
     expect(addXClass(svg))
-      .toBe(`<svg :class="['x-icon'].concat(data.staticClass, data.class)" fill="none">
+      .toBe(`<svg :class="['xds:icon'].concat(data.staticClass, data.class)" fill="none">
 <path />
 </svg>`)
   })
@@ -67,7 +67,7 @@ describe('test regex utils', () => {
 
   it('applies the format changes needed for the XDS to an svg', () => {
     expect(applyXDSFormat(svgStub))
-      .toBe(`<svg :class="['x-icon'].concat(data.staticClass, data.class)" fill="none" xmlns="http://www.w3.org/2000/svg">
+      .toBe(`<svg :class="['xds:icon'].concat(data.staticClass, data.class)" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path stroke="currentColor" stroke-width=".4" d="M1.2 1.2h5.6v5.6H1.2z"/>
 <path fill="currentColor" d="M2 2h4v4H2z"/>
 <path d="M5 3 3.625 4.5 3 3.818" stroke="#fff" stroke-width=".4" stroke-linecap="square"/>
diff --git a/packages/x-svg-converter/src/__tests__/svg-to-vue.spec.ts b/packages/x-svg-converter/src/__tests__/svg-to-vue.spec.ts
index b2ea632618..02ade4a438 100644
--- a/packages/x-svg-converter/src/__tests__/svg-to-vue.spec.ts
+++ b/packages/x-svg-converter/src/__tests__/svg-to-vue.spec.ts
@@ -50,7 +50,7 @@ describe('test SVG to Vue script', () => {
     })
 
     expect(vueComponentContent).toBe(`<template functional>
-  <svg :class="['x-icon'].concat(data.staticClass, data.class)" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg :class="['xds:icon'].concat(data.staticClass, data.class)" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path stroke="currentColor" stroke-width=".4" d="M1.2 1.2h5.6v5.6H1.2z"/>
 <path fill="currentColor" d="M2 2h4v4H2z"/>
 <path d="M5 3 3.625 4.5 3 3.818" stroke="#fff" stroke-width=".4" stroke-linecap="square"/>
diff --git a/packages/x-svg-converter/src/regex-utils.ts b/packages/x-svg-converter/src/regex-utils.ts
index fa69d88b07..e986129441 100644
--- a/packages/x-svg-converter/src/regex-utils.ts
+++ b/packages/x-svg-converter/src/regex-utils.ts
@@ -40,7 +40,7 @@ export function addFillNoneInRoot(svg: string): string {
 }
 
 /**
- * Adds the `x-icon` and the data classes to the root of an SVG.
+ * Adds the `xds:icon` and the data classes to the root of an SVG.
  *
  * @param svg - The SVG that will be processed.
  *
@@ -48,7 +48,7 @@ export function addFillNoneInRoot(svg: string): string {
  */
 export function addXClass(svg: string): string {
   const matchRoot = /svg /g
-  return svg.replace(matchRoot, 'svg :class="[\'x-icon\'].concat(data.staticClass, data.class)" ')
+  return svg.replace(matchRoot, 'svg :class="[\'xds:icon\'].concat(data.staticClass, data.class)" ')
 }
 
 /**
diff --git a/packages/x-tailwindcss/demo/src/components/icons/uncheck.vue b/packages/x-tailwindcss/demo/src/components/icons/uncheck.vue
index 602234d42b..1e193d4b7d 100644
--- a/packages/x-tailwindcss/demo/src/components/icons/uncheck.vue
+++ b/packages/x-tailwindcss/demo/src/components/icons/uncheck.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="x-icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="icon" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect
       x="1"
       y="1"
diff --git a/packages/x-tailwindcss/demo/src/components/xds-badge.vue b/packages/x-tailwindcss/demo/src/components/xds-badge.vue
index 57cd4c08ea..12a102060a 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-badge.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-badge.vue
@@ -5,7 +5,7 @@
     :sections="sections"
     :sections-classes="sectionClasses"
   >
-    <button v-if="cssClass.includes('attach')" class="x-button x-attach-container">
+    <button v-if="cssClass.includes('attach')" class="button attach-container">
       {{ removeClassPrefix(cssClass, base) }}
       <span
         :class="cssClass"
@@ -21,7 +21,7 @@
       @click="copyCssClassesToClipboard"
       @keydown="copyCssClassesToClipboard"
     >
-      <CuratedIcon v-if="section === 'WithIcon'" class="x-icon" />
+      <CuratedIcon v-if="section === 'WithIcon'" class="icon" />
       <template v-else>
         {{ !cssClass.includes('circle') ? `${removeClassPrefix(cssClass, base)} badge` : '1' }}
       </template>
@@ -56,64 +56,64 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: () => 'x-badge',
+      default: () => 'badge',
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-badge-sm', 'x-badge-md'],
+      default: () => ['badge-sm', 'badge-md'],
     },
     circle: {
       type: String,
-      default: () => 'x-badge-circle',
+      default: () => 'badge-circle',
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
         '',
-        'x-badge-neutral',
-        'x-badge-lead',
-        'x-badge-auxiliary',
-        'x-badge-accent',
-        'x-badge-highlight',
-        'x-badge-success',
-        'x-badge-warning',
-        'x-badge-error',
+        'badge-neutral',
+        'badge-lead',
+        'badge-auxiliary',
+        'badge-accent',
+        'badge-highlight',
+        'badge-success',
+        'badge-warning',
+        'badge-error',
       ],
     },
     light: {
       type: String,
-      default: () => 'x-badge-light',
+      default: () => 'badge-light',
     },
     outlined: {
       type: String,
-      default: () => 'x-badge-outlined',
+      default: () => 'badge-outlined',
     },
     bright: {
       type: String,
-      default: () => 'x-badge-bright',
+      default: () => 'badge-bright',
     },
     attachTo: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-attach-to-top-left',
-        'x-attach-to-top-right',
-        'x-attach-to-bottom-left',
-        'x-attach-to-bottom-right',
+        'attach-to-top-left',
+        'attach-to-top-right',
+        'attach-to-bottom-left',
+        'attach-to-bottom-right',
       ],
     },
     withIcon: {
       type: Array as PropType<string[]>,
-      default: () => ['x-badge-sm', '', 'x-badge-circle x-badge-sm', 'x-badge-circle'],
+      default: () => ['badge-sm', '', 'badge-circle badge-sm', 'badge-circle'],
     },
     combinations: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-badge-error x-badge-sm x-badge-outlined',
-        'x-badge-light x-badge-lead x-badge-circle',
-        'x-badge-outlined x-badge-circle x-badge-warning x-badge-sm',
-        'x-badge-light x-badge-outlined x-badge-auxiliary',
-        'x-badge-circle x-badge-light x-badge-lead x-attach-to-top-right',
-        'x-badge-sm x-badge-highlight x-attach-to-top-right',
+        'badge-error badge-sm badge-outlined',
+        'badge-light badge-lead badge-circle',
+        'badge-outlined badge-circle badge-warning badge-sm',
+        'badge-light badge-outlined badge-auxiliary',
+        'badge-circle badge-light badge-lead attach-to-top-right',
+        'badge-sm badge-highlight attach-to-top-right',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-button-group.vue b/packages/x-tailwindcss/demo/src/components/xds-button-group.vue
index e92f55f76a..3a13aa851a 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-button-group.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-button-group.vue
@@ -10,9 +10,9 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
       >
-        <button class="x-button">BUTTON 1</button>
-        <button class="x-button">BUTTON 2</button>
-        <button class="x-button">BUTTON 3</button>
+        <button class="button">BUTTON 1</button>
+        <button class="button">BUTTON 2</button>
+        <button class="button">BUTTON 3</button>
       </div>
 
       <div
@@ -21,11 +21,11 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
       >
-        <button class="x-button">BUTTON 1</button>
-        <span class="x-button-group-divider" />
-        <button class="x-button">BUTTON 2</button>
-        <span class="x-button-group-divider" />
-        <button class="x-button">BUTTON 3</button>
+        <button class="button">BUTTON 1</button>
+        <span class="button-group-divider" />
+        <button class="button">BUTTON 2</button>
+        <span class="button-group-divider" />
+        <button class="button">BUTTON 3</button>
       </div>
 
       <div
@@ -33,9 +33,9 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
       >
-        <button class="x-button x-button-outlined">BUTTON 1</button>
-        <button class="x-button x-button-outlined">BUTTON 2</button>
-        <button class="x-button">BUTTON 3</button>
+        <button class="button button-outlined">BUTTON 1</button>
+        <button class="button button-outlined">BUTTON 2</button>
+        <button class="button">BUTTON 3</button>
       </div>
 
       <div
@@ -44,9 +44,9 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
       >
-        <button class="x-button x-button-outlined">BUTTON 1</button>
-        <button class="x-button x-button-outlined">BUTTON 2</button>
-        <button class="x-button">BUTTON 3</button>
+        <button class="button button-outlined">BUTTON 1</button>
+        <button class="button button-outlined">BUTTON 2</button>
+        <button class="button">BUTTON 3</button>
       </div>
 
       <div
@@ -55,11 +55,11 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
       >
-        <button class="x-button x-button-outlined">BUTTON 1</button>
-        <span class="x-button-group-divider" />
-        <button class="x-button x-button-outlined">BUTTON 2</button>
-        <span class="x-button-group-divider" />
-        <button class="x-button">BUTTON 3</button>
+        <button class="button button-outlined">BUTTON 1</button>
+        <span class="button-group-divider" />
+        <button class="button button-outlined">BUTTON 2</button>
+        <span class="button-group-divider" />
+        <button class="button">BUTTON 3</button>
       </div>
 
       <div
@@ -68,11 +68,11 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
       >
-        <button class="x-button x-button-ghost">BUTTON 1</button>
-        <span class="x-button-group-divider" />
-        <button class="x-button x-button-ghost">BUTTON 2</button>
-        <span class="x-button-group-divider" />
-        <button class="x-button x-button-ghost x-button-warning">BUTTON 3</button>
+        <button class="button button-ghost">BUTTON 1</button>
+        <span class="button-group-divider" />
+        <button class="button button-ghost">BUTTON 2</button>
+        <span class="button-group-divider" />
+        <button class="button button-ghost button-warning">BUTTON 3</button>
       </div>
 
       <div
@@ -81,9 +81,9 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
       >
-        <button class="x-button x-button-tight">BUTTON 1</button>
-        <button class="x-button x-button-tight">BUTTON 2</button>
-        <button class="x-button x-button-tight x-button-warning">BUTTON 3</button>
+        <button class="button button-tight">BUTTON 1</button>
+        <button class="button button-tight">BUTTON 2</button>
+        <button class="button button-tight button-warning">BUTTON 3</button>
       </div>
 
       <div
@@ -92,11 +92,11 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
       >
-        <button class="x-button x-button-highlight x-button-circle">
-          <PlusIcon class="x-icon" />
+        <button class="button button-highlight button-circle">
+          <PlusIcon class="icon" />
         </button>
-        <button class="x-button x-button-ghost x-button-success x-button-square">
-          <PlusIcon class="x-icon" />
+        <button class="button button-ghost button-success button-square">
+          <PlusIcon class="icon" />
         </button>
       </div>
 
@@ -106,11 +106,11 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
       >
-        <button class="x-button x-button-highlight x-button-square">
-          <PlusIcon class="x-icon" />
+        <button class="button button-highlight button-square">
+          <PlusIcon class="icon" />
         </button>
-        <button class="x-button x-button-ghost x-button-success x-button-square">
-          <PlusIcon class="x-icon" />
+        <button class="button button-ghost button-success button-square">
+          <PlusIcon class="icon" />
         </button>
       </div>
     </div>
@@ -130,11 +130,11 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-button-group',
+      default: 'button-group',
     },
     rounded: {
       type: Array as PropType<string[]>,
-      default: () => ['x-rounded-md'],
+      default: () => ['rounded-md'],
     },
   },
   computed: {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-button.vue b/packages/x-tailwindcss/demo/src/components/xds-button.vue
index 8070f2aa06..6469c75dea 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-button.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-button.vue
@@ -11,7 +11,7 @@
       :disabled="section === 'Disabled'"
       @click="copyCssClassesToClipboard"
     >
-      <CuratedIcon class="x-icon" />
+      <CuratedIcon class="icon" />
       <span v-if="!cssClass.includes('circle') && !cssClass.includes('square')">
         {{ removeClassPrefix(cssClass, base) }} button
       </span>
@@ -35,58 +35,58 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-button',
+      default: 'button',
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-button-sm', 'x-button-md', 'x-button-lg', 'x-button-xl'],
+      default: () => ['button-sm', 'button-md', 'button-lg', 'button-xl'],
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
         '',
-        'x-button-neutral',
-        'x-button-lead',
-        'x-button-auxiliary',
-        'x-button-accent',
-        'x-button-highlight',
-        'x-button-success',
-        'x-button-warning',
-        'x-button-error',
+        'button-neutral',
+        'button-lead',
+        'button-auxiliary',
+        'button-accent',
+        'button-highlight',
+        'button-success',
+        'button-warning',
+        'button-error',
       ],
     },
     layouts: {
       type: Array as PropType<string[]>,
-      default: () => ['x-button-circle', 'x-button-square'],
+      default: () => ['button-circle', 'button-square'],
     },
     outline: {
       type: String,
-      default: 'x-button-outlined',
+      default: 'button-outlined',
     },
     ghost: {
       type: String,
-      default: 'x-button-ghost',
+      default: 'button-ghost',
     },
     tight: {
       type: String,
-      default: 'x-button-tight',
+      default: 'button-tight',
     },
     link: {
       type: String,
-      default: 'x-button-link',
+      default: 'button-link',
     },
     selected: {
       type: String,
-      default: 'x-selected',
+      default: 'selected',
     },
     combinations: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-button-lead x-button-sm',
-        'x-button-outlined x-button-square x-button-lg x-selected',
-        'x-button-auxiliary x-button-circle x-button-outlined',
-        'x-button-accent x-button-tight',
-        'x-button-warning x-button-ghost',
+        'button-lead button-sm',
+        'button-outlined button-square button-lg selected',
+        'button-auxiliary button-circle button-outlined',
+        'button-accent button-tight',
+        'button-warning button-ghost',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-facet-filter.vue b/packages/x-tailwindcss/demo/src/components/xds-facet-filter.vue
index f4abea4bb1..305bb24817 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-facet-filter.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-facet-filter.vue
@@ -11,23 +11,20 @@
       @click="copyCssClassesToClipboard"
     >
       <CheckIcon
-        v-if="cssClass.includes('x-selected')"
-        class="x-icon"
-        :class="{ 'x-icon-lg': cssClass.includes('x-facet-filter-lg') }"
+        v-if="cssClass.includes('selected')"
+        class="icon"
+        :class="{ 'icon-lg': cssClass.includes('facet-filter-lg') }"
       />
       <UncheckIcon
         v-else
-        class="x-icon"
-        :class="{ 'x-icon-lg': cssClass.includes('x-facet-filter-lg') }"
+        class="icon"
+        :class="{ 'icon-lg': cssClass.includes('facet-filter-lg') }"
       />
 
       <span v-if="section === 'Default'">very long default filter to test line wrap alignment</span>
       <span v-else>filter</span>
 
-      <span
-        v-if="section === 'Combinations'"
-        class="x-badge x-badge-circle x-badge-light x-badge-lead"
-      >
+      <span v-if="section === 'Combinations'" class="badge badge-circle badge-light badge-lead">
         1
       </span>
       <span v-else>(123)</span>
@@ -49,49 +46,49 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-facet-filter',
+      default: 'facet-filter',
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-facet-filter-sm', 'x-facet-filter-md', 'x-facet-filter-lg'],
+      default: () => ['facet-filter-sm', 'facet-filter-md', 'facet-filter-lg'],
     },
     selected: {
       type: String,
-      default: 'x-selected',
+      default: 'selected',
     },
     underline: {
       type: String,
-      default: 'x-facet-filter-underline',
+      default: 'facet-filter-underline',
     },
     ghost: {
       type: String,
-      default: 'x-facet-filter-ghost',
+      default: 'facet-filter-ghost',
     },
     simple: {
       type: String,
-      default: 'x-facet-filter-simple',
+      default: 'facet-filter-simple',
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
         '',
-        'x-facet-filter-neutral',
-        'x-facet-filter-lead',
-        'x-facet-filter-auxiliary',
-        'x-facet-filter-accent',
-        'x-facet-filter-highlight',
-        'x-facet-filter-success',
-        'x-facet-filter-warning',
-        'x-facet-filter-error',
+        'facet-filter-neutral',
+        'facet-filter-lead',
+        'facet-filter-auxiliary',
+        'facet-filter-accent',
+        'facet-filter-highlight',
+        'facet-filter-success',
+        'facet-filter-warning',
+        'facet-filter-error',
       ],
     },
     combinations: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-facet-filter-ghost x-facet-filter-lg x-facet-filter-warning x-selected',
-        'x-facet-filter-ghost x-facet-filter-success x-facet-filter-underline x-selected',
+        'facet-filter-ghost facet-filter-lg facet-filter-warning selected',
+        'facet-filter-ghost facet-filter-success facet-filter-underline selected',
 
-        'x-facet-filter-simple x-facet-filter-lg x-facet-filter-success x-facet-filter-underline x-selected',
+        'facet-filter-simple facet-filter-lg facet-filter-success facet-filter-underline selected',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-highlight.vue b/packages/x-tailwindcss/demo/src/components/xds-highlight.vue
index cbd8b24e16..395e9d717f 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-highlight.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-highlight.vue
@@ -11,7 +11,7 @@
       @click="copyCssClassesToClipboard"
     >
       <span>{{ section.substring(0, 3) }}</span>
-      <span class="x-highlight-text-match">{{ section.substring(3) }}</span>
+      <span class="highlight-text-match">{{ section.substring(3) }}</span>
     </button>
   </XdsBaseShowcase>
 </template>
@@ -28,7 +28,7 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-highlight-text',
+      default: 'highlight-text',
     },
   },
   computed: {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-icon.vue b/packages/x-tailwindcss/demo/src/components/xds-icon.vue
index 2b1578b015..b8284e7c36 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-icon.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-icon.vue
@@ -44,112 +44,112 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-icon',
+      default: 'icon',
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-icon-sm', 'x-icon-md', 'x-icon-lg', 'x-icon-xl'],
+      default: () => ['icon-sm', 'icon-md', 'icon-lg', 'icon-xl'],
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-icon-neutral',
-        'x-icon-lead',
-        'x-icon-auxiliary',
-        'x-icon-accent',
-        'x-icon-highlight',
-        'x-icon-success',
-        'x-icon-warning',
-        'x-icon-error',
-        'x-icon-neutral-0',
-        'x-icon-neutral-10',
-        'x-icon-neutral-25',
-        'x-icon-neutral-50',
-        'x-icon-neutral-75',
-        'x-icon-neutral-90',
-        'x-icon-neutral-100',
-        'x-icon-lead-25',
-        'x-icon-lead-50',
-        'x-icon-lead-75',
-        'x-icon-auxiliary-25',
-        'x-icon-auxiliary-50',
-        'x-icon-auxiliary-75',
-        'x-icon-accent-25',
-        'x-icon-accent-50',
-        'x-icon-accent-75',
-        'x-icon-highlight-25',
-        'x-icon-highlight-50',
-        'x-icon-highlight-75',
-        'x-icon-success-25',
-        'x-icon-success-50',
-        'x-icon-success-75',
-        'x-icon-warning-25',
-        'x-icon-warning-50',
-        'x-icon-warning-75',
-        'x-icon-error-25',
-        'x-icon-error-50',
-        'x-icon-error-75',
+        'icon-neutral',
+        'icon-lead',
+        'icon-auxiliary',
+        'icon-accent',
+        'icon-highlight',
+        'icon-success',
+        'icon-warning',
+        'icon-error',
+        'icon-neutral-0',
+        'icon-neutral-10',
+        'icon-neutral-25',
+        'icon-neutral-50',
+        'icon-neutral-75',
+        'icon-neutral-90',
+        'icon-neutral-100',
+        'icon-lead-25',
+        'icon-lead-50',
+        'icon-lead-75',
+        'icon-auxiliary-25',
+        'icon-auxiliary-50',
+        'icon-auxiliary-75',
+        'icon-accent-25',
+        'icon-accent-50',
+        'icon-accent-75',
+        'icon-highlight-25',
+        'icon-highlight-50',
+        'icon-highlight-75',
+        'icon-success-25',
+        'icon-success-50',
+        'icon-success-75',
+        'icon-warning-25',
+        'icon-warning-50',
+        'icon-warning-75',
+        'icon-error-25',
+        'icon-error-50',
+        'icon-error-75',
       ],
     },
     backgroundColors: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-icon-bg-neutral',
-        'x-icon-bg-lead',
-        'x-icon-bg-auxiliary',
-        'x-icon-bg-accent',
-        'x-icon-bg-highlight',
-        'x-icon-bg-success',
-        'x-icon-bg-warning',
-        'x-icon-bg-error',
-        'x-icon-bg-neutral-0',
-        'x-icon-bg-neutral-10',
-        'x-icon-bg-neutral-25',
-        'x-icon-bg-neutral-50',
-        'x-icon-bg-neutral-75',
-        'x-icon-bg-neutral-90',
-        'x-icon-bg-neutral-100',
-        'x-icon-bg-lead-25',
-        'x-icon-bg-lead-50',
-        'x-icon-bg-lead-75',
-        'x-icon-bg-auxiliary-25',
-        'x-icon-bg-auxiliary-50',
-        'x-icon-bg-auxiliary-75',
-        'x-icon-bg-accent-25',
-        'x-icon-bg-accent-50',
-        'x-icon-bg-accent-75',
-        'x-icon-bg-highlight-25',
-        'x-icon-bg-highlight-50',
-        'x-icon-bg-highlight-75',
-        'x-icon-bg-success-25',
-        'x-icon-bg-success-50',
-        'x-icon-bg-success-75',
-        'x-icon-bg-warning-25',
-        'x-icon-bg-warning-50',
-        'x-icon-bg-warning-75',
-        'x-icon-bg-error-25',
-        'x-icon-bg-error-50',
-        'x-icon-bg-error-75',
+        'icon-bg-neutral',
+        'icon-bg-lead',
+        'icon-bg-auxiliary',
+        'icon-bg-accent',
+        'icon-bg-highlight',
+        'icon-bg-success',
+        'icon-bg-warning',
+        'icon-bg-error',
+        'icon-bg-neutral-0',
+        'icon-bg-neutral-10',
+        'icon-bg-neutral-25',
+        'icon-bg-neutral-50',
+        'icon-bg-neutral-75',
+        'icon-bg-neutral-90',
+        'icon-bg-neutral-100',
+        'icon-bg-lead-25',
+        'icon-bg-lead-50',
+        'icon-bg-lead-75',
+        'icon-bg-auxiliary-25',
+        'icon-bg-auxiliary-50',
+        'icon-bg-auxiliary-75',
+        'icon-bg-accent-25',
+        'icon-bg-accent-50',
+        'icon-bg-accent-75',
+        'icon-bg-highlight-25',
+        'icon-bg-highlight-50',
+        'icon-bg-highlight-75',
+        'icon-bg-success-25',
+        'icon-bg-success-50',
+        'icon-bg-success-75',
+        'icon-bg-warning-25',
+        'icon-bg-warning-50',
+        'icon-bg-warning-75',
+        'icon-bg-error-25',
+        'icon-bg-error-50',
+        'icon-bg-error-75',
       ],
     },
     sharp: {
       type: Array as PropType<string[]>,
-      default: () => ['x-icon-sharp'],
+      default: () => ['icon-sharp'],
     },
     strokeWidth: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-icon-stroke-width-sm',
-        'x-icon-stroke-width-md',
-        'x-icon-stroke-width-lg',
-        'x-icon-stroke-width-xl',
+        'icon-stroke-width-sm',
+        'icon-stroke-width-md',
+        'icon-stroke-width-lg',
+        'icon-stroke-width-xl',
       ],
     },
     combinations: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-icon-lead x-icon-xl x-icon-stroke-width-lg x-icon-sharp',
-        'x-icon-error x-icon-bg-warning x-icon-lg',
+        'icon-lead icon-xl icon-stroke-width-lg icon-sharp',
+        'icon-error icon-bg-warning icon-lg',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-input-group.vue b/packages/x-tailwindcss/demo/src/components/xds-input-group.vue
index ab4bda08e2..d307782641 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-input-group.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-input-group.vue
@@ -12,9 +12,9 @@
       @click="copyCssClassesToClipboard"
       @keydown="copyCssClassesToClipboard"
     >
-      <CuratedIcon class="x-icon" />
+      <CuratedIcon class="icon" />
       <input
-        class="x-input"
+        class="input"
         :disabled="section === 'Disabled'"
         :placeholder="
           removeClassPrefix(cssClass, base).trim() ||
@@ -24,28 +24,28 @@
       />
       <button
         :disabled="section === 'Disabled'"
-        class="x-button x-input-group-button"
+        class="button input-group-button"
         @click.stop="copyCssClassesToClipboard"
       >
-        <CrossIcon class="x-icon" />
+        <CrossIcon class="icon" />
       </button>
       <button
         :disabled="section === 'Disabled'"
-        class="x-button x-input-group-button x-input-group-button-rectangle"
+        class="button input-group-button input-group-button-rectangle"
         @click.stop="copyCssClassesToClipboard"
       >
         clear
       </button>
       <button
         :disabled="section === 'Disabled'"
-        class="x-button x-input-group-button-primary"
+        class="button input-group-button-primary"
         :class="{
-          'x-input-group-button-outlined': section.includes('Outlined'),
-          'x-input-group-button-ghost': section.includes('Ghost'),
+          'input-group-button-outlined': section.includes('Outlined'),
+          'input-group-button-ghost': section.includes('Ghost'),
         }"
         @click.stop="copyCssClassesToClipboard"
       >
-        <CheckIcon class="x-icon" />
+        <CheckIcon class="icon" />
       </button>
     </div>
   </XdsBaseShowcase>
@@ -71,36 +71,36 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-input-group',
+      default: 'input-group',
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-input-group-sm', 'x-input-group-md', 'x-input-group-lg'],
+      default: () => ['input-group-sm', 'input-group-md', 'input-group-lg'],
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-input-group-neutral',
-        'x-input-group-lead',
-        'x-input-group-auxiliary',
-        'x-input-group-accent',
-        'x-input-group-highlight',
-        'x-input-group-success',
-        'x-input-group-warning',
-        'x-input-group-error',
+        'input-group-neutral',
+        'input-group-lead',
+        'input-group-auxiliary',
+        'input-group-accent',
+        'input-group-highlight',
+        'input-group-success',
+        'input-group-warning',
+        'input-group-error',
       ],
     },
     line: {
       type: String,
-      default: 'x-input-group-line',
+      default: 'input-group-line',
     },
     combinations: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-input-group-lead x-input-group-sm',
-        'x-input-group-auxiliary x-input-group-line x-input-group-sm',
-        'x-input-group-accent x-input-group-lg ',
-        'x-input-group-warning x-input-group-line x-input-group-lg',
+        'input-group-lead input-group-sm',
+        'input-group-auxiliary input-group-line input-group-sm',
+        'input-group-accent input-group-lg ',
+        'input-group-warning input-group-line input-group-lg',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-input.vue b/packages/x-tailwindcss/demo/src/components/xds-input.vue
index dbdbb376b8..e40e3f2818 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-input.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-input.vue
@@ -29,36 +29,36 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-input',
+      default: 'input',
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-input-sm', 'x-input-md', 'x-input-lg'],
+      default: () => ['input-sm', 'input-md', 'input-lg'],
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-input-neutral',
-        'x-input-lead',
-        'x-input-auxiliary',
-        'x-input-accent',
-        'x-input-highlight',
-        'x-input-success',
-        'x-input-warning',
-        'x-input-error',
+        'input-neutral',
+        'input-lead',
+        'input-auxiliary',
+        'input-accent',
+        'input-highlight',
+        'input-success',
+        'input-warning',
+        'input-error',
       ],
     },
     line: {
       type: String,
-      default: 'x-input-line',
+      default: 'input-line',
     },
     combinations: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-input-lead x-input-sm',
-        'x-input-auxiliary x-input-line x-input-sm',
-        'x-input-accent x-input-lg',
-        'x-input-warning x-input-line x-input-lg',
+        'input-lead input-sm',
+        'input-auxiliary input-line input-sm',
+        'input-accent input-lg',
+        'input-warning input-line input-lg',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue
index c33fd916ca..a3f4a66fda 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue
@@ -1,35 +1,35 @@
 <template>
   <XdsBaseShowcase v-slot="{ cssClass }" title="Layout fixed header" :sections="sections">
-    <label for="layout-fixed-header-modal" class="x-button">Open layout example</label>
+    <label for="layout-fixed-header-modal" class="button">Open layout example</label>
     <input id="layout-fixed-header-modal" type="checkbox" class="modal-toggle" />
 
     <div class="modal bg-white">
-      <div class="x-layout-min-margin-48 bg-gray-100" :class="cssClass">
-        <div class="x-scroll flex flex-col">
-          <div class="x-layout-item border-b-1 sticky top-0 border-gray-300 bg-white">
+      <div class="layout-min-margin-48 bg-gray-100" :class="cssClass">
+        <div class="scroll flex flex-col">
+          <div class="layout-item border-b-1 sticky top-0 border-gray-300 bg-white">
             <div class="flex items-center justify-between py-2">
-              <span class="x-title3">FIXED HEADER LAYOUT</span>
-              <label for="layout-fixed-header-modal" class="x-button x-button-ghost ml-auto">
+              <span class="title3">FIXED HEADER LAYOUT</span>
+              <label for="layout-fixed-header-modal" class="button button-ghost ml-auto">
                 Close
               </label>
             </div>
 
             <div class="flex items-center justify-between py-4">
-              <div class="x-title3">HEADER START</div>
-              <div class="x-title2">HEADER MIDDLE</div>
-              <div class="x-title3">HEADER END</div>
+              <div class="title3">HEADER START</div>
+              <div class="title2">HEADER MIDDLE</div>
+              <div class="title3">HEADER END</div>
             </div>
           </div>
 
-          <div class="x-layout-item border-b-1 border-gray-300">
-            <div class="x-title3 flex justify-center p-4">SUBHEADER</div>
+          <div class="layout-item border-b-1 border-gray-300">
+            <div class="title3 flex justify-center p-4">SUBHEADER</div>
           </div>
 
-          <div class="x-layout-item">
-            <div class="x-title3 flex justify-center bg-gray-100 p-4">TOOLBAR</div>
+          <div class="layout-item">
+            <div class="title3 flex justify-center bg-gray-100 p-4">TOOLBAR</div>
           </div>
 
-          <div class="x-layout-item x-layout-expand">
+          <div class="layout-item layout-expand">
             <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
               <section>MAIN</section>
               <span class="place-self-end">MAIN BOTTOM</span>
@@ -37,9 +37,9 @@
           </div>
         </div>
 
-        <div class="x-layout-item x-layout-overlap">
+        <div class="layout-item layout-overlap">
           <button
-            class="x-layout-on-margin-right x-button x-button-sm x-button-circle mb-4 self-end justify-self-start"
+            class="layout-on-margin-right button button-sm button-circle mb-4 self-end justify-self-start"
           >
             ▲
           </button>
@@ -61,7 +61,7 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-layout-container x-layout-max-width-md',
+      default: 'layout-container layout-max-width-md',
     },
   },
   computed: {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue
index de395a29db..01321217b0 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue
@@ -1,33 +1,33 @@
 <template>
   <XdsBaseShowcase v-slot="{ cssClass }" title="Layout single column" :sections="sections">
-    <label for="layout-single-column-modal" class="x-button">Open layout example</label>
+    <label for="layout-single-column-modal" class="button">Open layout example</label>
     <input id="layout-single-column-modal" type="checkbox" class="modal-toggle" />
 
     <div class="modal bg-white">
-      <div class="x-layout-min-margin-48" :class="cssClass">
-        <div class="x-layout-item border-b border-gray-400 bg-white">
+      <div class="layout-min-margin-48" :class="cssClass">
+        <div class="layout-item border-b border-gray-400 bg-white">
           <div class="flex items-center justify-between py-2">
-            <span class="x-title3">SINGLE COLUMN LAYOUT</span>
-            <label for="layout-single-column-modal" class="x-button x-button-ghost ml-auto">
+            <span class="title3">SINGLE COLUMN LAYOUT</span>
+            <label for="layout-single-column-modal" class="button button-ghost ml-auto">
               Close
             </label>
           </div>
         </div>
 
-        <div class="x-layout-item border-b border-gray-400">
+        <div class="layout-item border-b border-gray-400">
           <div class="flex items-center justify-between py-4">
-            <div class="x-title3">HEADER START</div>
-            <div class="x-title2">HEADER MIDDLE</div>
-            <div class="x-title3">HEADER END</div>
+            <div class="title3">HEADER START</div>
+            <div class="title2">HEADER MIDDLE</div>
+            <div class="title3">HEADER END</div>
           </div>
         </div>
 
-        <div class="x-layout-item border-b border-gray-400">
-          <div class="x-title3 flex justify-center p-4">SUB HEADER</div>
+        <div class="layout-item border-b border-gray-400">
+          <div class="title3 flex justify-center p-4">SUB HEADER</div>
         </div>
 
-        <div class="x-scroll">
-          <div class="x-layout-item x-layout-expand">
+        <div class="scroll">
+          <div class="layout-item layout-expand">
             <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
               <section>MAIN</section>
               <span class="place-self-end">MAIN BOTTOM</span>
@@ -35,12 +35,12 @@
           </div>
         </div>
 
-        <div class="x-layout-item x-layout-overlap">
-          <button class="x-button mb-4 self-end justify-self-center">FLOATING</button>
+        <div class="layout-item layout-overlap">
+          <button class="button mb-4 self-end justify-self-center">FLOATING</button>
         </div>
 
-        <div class="x-layout-item">
-          <div class="x-title3 flex justify-center p-4">FOOTER</div>
+        <div class="layout-item">
+          <div class="title3 flex justify-center p-4">FOOTER</div>
         </div>
       </div>
     </div>
@@ -59,7 +59,7 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-layout-container x-layout-max-width-md',
+      default: 'layout-container layout-max-width-md',
     },
   },
   computed: {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue
index 8561312286..e7ccf00630 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue
@@ -1,42 +1,42 @@
 <template>
   <XdsBaseShowcase v-slot="{ cssClass }" title="Layout two columns" :sections="sections">
-    <label for="layout-two-columns-modal" class="x-button">Open layout example</label>
+    <label for="layout-two-columns-modal" class="button">Open layout example</label>
     <input id="layout-two-columns-modal" type="checkbox" class="modal-toggle" />
 
     <div class="modal bg-gray-100">
-      <div class="x-layout-min-margin-48" :class="cssClass">
-        <div class="x-layout-item border-b-1 border-gray-300 bg-white">
+      <div class="layout-min-margin-48" :class="cssClass">
+        <div class="layout-item border-b-1 border-gray-300 bg-white">
           <div class="flex items-center justify-between py-2">
-            <span class="x-title3">TWO COLUMNS LAYOUT</span>
-            <label for="layout-two-columns-modal" class="x-button x-button-ghost ml-auto">
+            <span class="title3">TWO COLUMNS LAYOUT</span>
+            <label for="layout-two-columns-modal" class="button button-ghost ml-auto">
               Close
             </label>
           </div>
         </div>
 
-        <div class="x-layout-item border-b-1 border-gray-300">
+        <div class="layout-item border-b-1 border-gray-300">
           <div class="flex items-center justify-between py-4">
-            <div class="x-title3">HEADER START</div>
-            <div class="x-title2">HEADER MIDDLE</div>
-            <div class="x-title3">HEADER END</div>
+            <div class="title3">HEADER START</div>
+            <div class="title2">HEADER MIDDLE</div>
+            <div class="title3">HEADER END</div>
           </div>
         </div>
 
-        <div class="x-layout-item border-b-1 border-gray-300">
-          <div class="x-title3 flex justify-center p-4">SUB HEADER</div>
+        <div class="layout-item border-b-1 border-gray-300">
+          <div class="title3 flex justify-center p-4">SUB HEADER</div>
         </div>
 
-        <div class="x-layout-item x-layout-no-margin-right x-layout-expand mb-4 mt-4">
-          <div class="x-layout-expand flex gap-6">
-            <div class="x-scroll w-[128px]">
+        <div class="layout-item layout-no-margin-right layout-expand mb-4 mt-4">
+          <div class="layout-expand flex gap-6">
+            <div class="scroll w-[128px]">
               <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
                 <span>ASIDE</span>
                 <span class="place-self-end">ASIDE BOTTOM</span>
               </div>
             </div>
 
-            <div class="x-scroll x-layout-expand">
-              <div class="x-layout-item x-layout-no-margin-left">
+            <div class="scroll layout-expand">
+              <div class="layout-item layout-no-margin-left">
                 <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
                   <section>MAIN</section>
                   <span class="place-self-end">MAIN BOTTOM</span>
@@ -46,9 +46,9 @@
           </div>
         </div>
 
-        <div class="x-layout-item x-layout-overlap">
+        <div class="layout-item layout-overlap">
           <button
-            class="x-layout-on-margin-right x-button x-button-sm x-button-circle mb-4 self-end justify-self-start"
+            class="layout-on-margin-right button button-sm button-circle mb-4 self-end justify-self-start"
           >
             ▲
           </button>
@@ -70,7 +70,7 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-layout-container x-layout-max-width-md',
+      default: 'layout-container layout-mawidth-md',
     },
   },
   computed: {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue
index aeee94f14d..4aa83a2a44 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue
@@ -4,27 +4,27 @@
     title="Layout utilities"
     :sections="sections"
   >
-    <label for="layout-utils-modal" class="x-button">See layout utils</label>
+    <label for="layout-utils-modal" class="button">See layout utils</label>
     <input id="layout-utils-modal" type="checkbox" class="modal-toggle" />
 
     <div class="modal bg-white">
       <div class="flex p-4">
-        <div class="x-title2">Layout utilities</div>
-        <label for="layout-utils-modal" class="x-button x-button-link ml-auto">Close</label>
+        <div class="title2">Layout utilities</div>
+        <label for="layout-utils-modal" class="button button-link ml-auto">Close</label>
       </div>
 
       <div v-for="(sectionClasses, sectionName) in modalContent" :key="sectionName">
-        <div class="x-title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
+        <div class="title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
         <div class="mb-4 px-4 text-xl">
           {{ sectionDescriptions[sectionName] }}
         </div>
         <div v-for="cssClass in sectionClasses" :key="cssClass" class="flex flex-col pb-3">
           <code class="px-4 py-2">{{ cssClass }}</code>
           <div
-            class="x-layout-container x-layout-min-margin-256 x-layout-max-width-md h-[80px] w-full bg-gray-200"
+            class="layout-container layout-min-margin-256 layout-max-width-md h-[80px] w-full bg-gray-200"
           >
             <template v-if="sectionName === 'Overlap'">
-              <div v-if="cssClass.split(' ')[1] === 'x-layout-overlap'" class="x-layout-item">
+              <div v-if="cssClass.split(' ')[1] === 'layout-overlap'" class="layout-item">
                 <span class="h-[60px] bg-gray-300 p-2">item</span>
               </div>
 
@@ -38,16 +38,14 @@
                 <span class="w-[80%] justify-self-center bg-gray-400 p-2">This is overlapping</span>
               </div>
 
-              <div v-if="cssClass.includes('x-layout-overlap-from-top')" class="x-layout-item">
+              <div v-if="cssClass.includes('layout-overlap-from-top')" class="layout-item">
                 <span class="h-[60px] bg-gray-300 p-2">item</span>
               </div>
             </template>
 
             <template v-else-if="sectionName === 'On margin'">
-              <div class="x-layout-item">
-                <div v-if="cssClass === 'x-layout-on-margin-right'" class="bg-gray-300 p-2">
-                  item
-                </div>
+              <div class="layout-item">
+                <div v-if="cssClass === 'layout-on-margin-right'" class="bg-gray-300 p-2">item</div>
                 <div
                   :key="cssClass"
                   :class="cssClass"
@@ -59,9 +57,7 @@
                     {{ cssClass }}
                   </div>
                 </div>
-                <div v-if="cssClass === 'x-layout-on-margin-left'" class="bg-gray-300 p-2">
-                  item
-                </div>
+                <div v-if="cssClass === 'layout-on-margin-left'" class="bg-gray-300 p-2">item</div>
               </div>
             </template>
 
@@ -96,23 +92,23 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-layout-item',
+      default: 'layout-item',
     },
     noMargin: {
       type: Array as PropType<string[]>,
-      default: () => ['x-layout-no-margin', 'x-layout-no-margin-left', 'x-layout-no-margin-right'],
+      default: () => ['layout-no-margin', 'layout-no-margin-left', 'layout-no-margin-right'],
     },
     onMargin: {
       type: Array as PropType<string[]>,
-      default: () => ['x-layout-on-margin-left', 'x-layout-on-margin-right'],
+      default: () => ['layout-on-margin-left', 'layout-on-margin-right'],
     },
     overlap: {
       type: Array as PropType<string[]>,
-      default: () => ['x-layout-overlap', 'x-layout-overlap-from-top'],
+      default: () => ['layout-overlap', 'layout-overlap-from-top'],
     },
     expand: {
       type: Array as PropType<string[]>,
-      default: () => ['x-layout-expand'],
+      default: () => ['layout-expand'],
     },
   },
   data() {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout.vue b/packages/x-tailwindcss/demo/src/components/xds-layout.vue
index 1a696f0564..06e5269114 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout.vue
@@ -1,22 +1,22 @@
 <template>
   <XdsBaseShowcase v-slot="{ copyCssClassesToClipboard }" title="Layout" :sections="sections">
-    <label for="layout-modal" class="x-button">See layouts</label>
+    <label for="layout-modal" class="button">See layouts</label>
     <input id="layout-modal" type="checkbox" class="modal-toggle" />
 
     <div class="modal bg-white">
       <div class="flex p-4">
-        <div class="x-title2">Layouts</div>
-        <label for="layout-modal" class="x-button x-button-link ml-auto">Close</label>
+        <div class="title2">Layouts</div>
+        <label for="layout-modal" class="button button-link ml-auto">Close</label>
       </div>
 
       <div v-for="(sectionClasses, sectionName) in modalContent" :key="sectionName">
-        <div class="x-title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
+        <div class="title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
         <div v-for="cssClass in sectionClasses" :key="cssClass" class="flex flex-col pb-3">
-          <div v-if="cssClass.includes('x-layout-min-margin-12')" class="mb-4 px-4 text-xl">
+          <div v-if="cssClass.includes('layout-min-margin-12')" class="mb-4 px-4 text-xl">
             There are as many classes as spacing variables declared in the Tailwind theme:
-            <code>x-layout-min-margin-[spacing-value]</code>
+            <code>layout-min-margin-[spacing-value]</code>
           </div>
-          <div v-if="cssClass.includes('x-layout-container-mx-128')" class="mb-4 px-4 text-xl">
+          <div v-if="cssClass.includes('layout-container-mx-128')" class="mb-4 px-4 text-xl">
             Custom alignment is available with Tailwind spacing classes or arbitrary values:
           </div>
           <code class="px-4 py-2">{{ cssClass }}</code>
@@ -27,7 +27,7 @@
             @click="copyCssClassesToClipboard"
             @keydown="copyCssClassesToClipboard"
           >
-            <div class="x-layout-item"><span class="bg-gray-400 p-2">item</span></div>
+            <div class="layout-item"><span class="bg-gray-400 p-2">item</span></div>
           </div>
         </div>
       </div>
@@ -49,28 +49,28 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-layout-container',
+      default: 'layout-container',
     },
     maxWidth: {
       type: Array as PropType<string[]>,
-      default: () => ['x-layout-max-width-md', 'x-layout-max-width-lg', 'x-layout-max-width-full'],
+      default: () => ['layout-max-width-md', 'layout-max-width-lg', 'layout-max-width-full'],
     },
     minMargin: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-layout-min-margin-12',
-        'x-layout-min-margin-20',
-        'x-layout-min-margin-32',
-        'x-layout-min-margin-48',
+        'layout-min-margin-12',
+        'layout-min-margin-20',
+        'layout-min-margin-32',
+        'layout-min-margin-48',
       ],
     },
     customAlign: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-layout-container-mx-128',
-        'x-layout-container-mr-128',
-        'x-layout-container-ml-128',
-        'x-layout-container-ml-[375px]',
+        'layout-container-mx-128',
+        'layout-container-mr-128',
+        'layout-container-ml-128',
+        'layout-container-ml-[375px]',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-picture.vue b/packages/x-tailwindcss/demo/src/components/xds-picture.vue
index 13c9f62f5a..1b90b6f759 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-picture.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-picture.vue
@@ -17,7 +17,7 @@
         src="https://assets.empathy.co/images-demo/2885.jpg"
         alt="Summer Sandal"
         role="presentation"
-        class="x-picture-image"
+        class="picture-image"
       />
     </div>
   </XdsBaseShowcase>
@@ -36,15 +36,15 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-picture',
+      default: 'picture',
     },
     zoom: {
       type: String,
-      default: 'x-picture-zoom',
+      default: 'picture-zoom',
     },
     overlay: {
       type: String,
-      default: 'x-picture-overlay',
+      default: 'picture-overlay',
     },
   },
   computed: {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue b/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue
index cff9043c96..3ac64604a3 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue
@@ -4,7 +4,7 @@
     title="Progress Bar"
     :sections="sections"
   >
-    <div class="lex-col flex gap-4">
+    <div class="flex flex-col gap-4">
       <h3 class="text-sm">{{ removeClassPrefix(cssClass, base).trim() || 'default' }}</h3>
       <div
         class="w-[320px]"
@@ -12,7 +12,7 @@
         @click="copyCssClassesToClipboard"
         @keyup="copyCssClassesToClipboard"
       >
-        <div class="x-progress-bar-fill w-[30%]" />
+        <div class="progress-bar-fill w-[30%]" />
       </div>
     </div>
   </XdsBaseShowcase>
@@ -30,29 +30,29 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-progress-bar',
+      default: 'progress-bar',
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
         '',
-        'x-progress-bar-neutral',
-        'x-progress-bar-lead',
-        'x-progress-bar-auxiliary',
-        'x-progress-bar-accent',
-        'x-progress-bar-highlight',
-        'x-progress-bar-success',
-        'x-progress-bar-warning',
-        'x-progress-bar-error',
+        'progress-bar-neutral',
+        'progress-bar-lead',
+        'progress-bar-auxiliary',
+        'progress-bar-accent',
+        'progress-bar-highlight',
+        'progress-bar-success',
+        'progress-bar-warning',
+        'progress-bar-error',
       ],
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-progress-bar-md', 'x-progress-bar-lg'],
+      default: () => ['progress-bar-md', 'progress-bar-lg'],
     },
     combinations: {
       type: Array as PropType<string[]>,
-      default: () => ['x-progress-bar-lg x-progress-bar-warning'],
+      default: () => ['progress-bar-lg progress-bar-warning'],
     },
   },
   setup(props) {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-scroll.vue b/packages/x-tailwindcss/demo/src/components/xds-scroll.vue
index 3811f75bf6..d74cfe827c 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-scroll.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-scroll.vue
@@ -27,7 +27,7 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-scroll',
+      default: 'scroll',
     },
   },
   computed: {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue b/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue
index df03221f3e..8109d159b3 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue
@@ -10,15 +10,15 @@
       @click="copyCssClassesToClipboard"
       @keydown="copyCssClassesToClipboard"
     >
-      <button class="x-button x-sliding-panel-button-left">ᐸ</button>
+      <button class="button sliding-panel-button-left">ᐸ</button>
       <div
         class="flex gap-3"
         :class="{
-          'x-sliding-panel-fade': section === 'Fade',
-          'x-sliding-panel-fade-sm':
-            section === 'Combinations' && cssClass.includes('x-sliding-panel-buttons-outside'),
-          'x-sliding-panel-fade-lg':
-            section === 'Combinations' && cssClass.includes('x-sliding-panel-buttons-center'),
+          'sliding-panel-fade': section === 'Fade',
+          'sliding-panel-fade-sm':
+            section === 'Combinations' && cssClass.includes('sliding-panel-buttons-outside'),
+          'sliding-panel-fade-lg':
+            section === 'Combinations' && cssClass.includes('sliding-panel-buttons-center'),
         }"
       >
         <div
@@ -29,7 +29,7 @@
           <span>{{ item }}</span>
         </div>
       </div>
-      <button class="x-button x-sliding-panel-button-right">ᐳ</button>
+      <button class="button sliding-panel-button-right">ᐳ</button>
     </div>
   </XdsBaseShowcase>
 </template>
@@ -48,27 +48,27 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-sliding-panel',
+      default: 'sliding-panel',
     },
     buttonsPositionVariants: {
       type: Array as PropType<string[]>,
-      default: () => ['', 'x-sliding-panel-buttons-center', 'x-sliding-panel-buttons-outside'],
+      default: () => ['', 'sliding-panel-buttons-center', 'sliding-panel-buttons-outside'],
     },
     showButtonsOnHover: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-sliding-panel-show-buttons-on-hover',
-        'x-sliding-panel-show-buttons-on-hover x-sliding-panel-at-start',
-        'x-sliding-panel-show-buttons-on-hover x-sliding-panel-at-end',
+        'sliding-panel-show-buttons-on-hover',
+        'sliding-panel-show-buttons-on-hover sliding-panel-at-start',
+        'sliding-panel-show-buttons-on-hover sliding-panel-at-end',
       ],
     },
     fadeSizes: {
       type: Array as PropType<string[]>,
       default: () => [
         '',
-        'x-sliding-panel-at-start',
-        'x-sliding-panel-at-end',
-        'x-sliding-panel-at-start x-sliding-panel-at-end',
+        'sliding-panel-at-start',
+        'sliding-panel-at-end',
+        'sliding-panel-at-start sliding-panel-at-end',
       ],
     },
   },
@@ -87,12 +87,12 @@ export default defineComponent({
         'Sarajevo',
       ],
       combinations: [
-        'x-sliding-panel-buttons-center x-sliding-panel-show-buttons-on-hover',
-        'x-sliding-panel-buttons-outside x-sliding-panel-show-buttons-on-hover',
+        'sliding-panel-buttons-center sliding-panel-show-buttons-on-hover',
+        'sliding-panel-buttons-outside sliding-panel-show-buttons-on-hover',
 
-        'x-sliding-panel-buttons-outside x-sliding-panel-show-buttons-on-hover x-sliding-panel-at-start',
+        'sliding-panel-buttons-outside sliding-panel-show-buttons-on-hover sliding-panel-at-start',
 
-        'x-sliding-panel-buttons-center x-sliding-panel-show-buttons-on-hover x-sliding-panel-at-end',
+        'sliding-panel-buttons-center sliding-panel-show-buttons-on-hover sliding-panel-at-end',
       ],
     }
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-suggestion-group.vue b/packages/x-tailwindcss/demo/src/components/xds-suggestion-group.vue
index 984f1016b4..3df9e834d4 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-suggestion-group.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-suggestion-group.vue
@@ -12,8 +12,8 @@
       @click="copyCssClassesToClipboard"
       @keydown="copyCssClassesToClipboard"
     >
-      <button class="x-suggestion">
-        <CuratedIcon class="x-icon" />
+      <button class="suggestion">
+        <CuratedIcon class="icon" />
         <template v-if="section === 'Default'">
           very long default suggestion to test line wrap alignment
         </template>
@@ -21,16 +21,16 @@
       </button>
       <button
         v-if="section === 'Combinations layer'"
-        class="x-suggestion-group-button x-suggestion-group-button-rectangle"
+        class="suggestion-group-button suggestion-group-button-rectangle"
         :class="{
-          'x-suggestion-group-button-lighter': cssClass.includes('x-suggestion-group-success'),
-          'x-suggestion-group-button-ghost': !cssClass.includes('x-suggestion-group-success'),
+          'suggestion-group-button-lighter': cssClass.includes('suggestion-group-success'),
+          'suggestion-group-button-ghost': !cssClass.includes('suggestion-group-success'),
         }"
       >
         clear
       </button>
-      <button v-if="section !== 'Combinations layer'" class="x-suggestion-group-button">
-        <CrossIcon class="x-icon" />
+      <button v-if="section !== 'Combinations layer'" class="suggestion-group-button">
+        <CrossIcon class="icon" />
       </button>
     </div>
   </XdsBaseShowcase>
@@ -54,40 +54,40 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-suggestion-group',
+      default: 'suggestion-group',
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-suggestion-group-sm', 'x-suggestion-group-md', 'x-suggestion-group-lg'],
+      default: () => ['suggestion-group-sm', 'suggestion-group-md', 'suggestion-group-lg'],
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
         '',
-        'x-suggestion-group-neutral',
-        'x-suggestion-group-lead',
-        'x-suggestion-group-auxiliary',
-        'x-suggestion-group-accent',
-        'x-suggestion-group-highlight',
-        'x-suggestion-group-success',
-        'x-suggestion-group-warning',
-        'x-suggestion-group-error',
+        'suggestion-group-neutral',
+        'suggestion-group-lead',
+        'suggestion-group-auxiliary',
+        'suggestion-group-accent',
+        'suggestion-group-highlight',
+        'suggestion-group-success',
+        'suggestion-group-warning',
+        'suggestion-group-error',
       ],
     },
     outlined: {
       type: String,
-      default: 'x-suggestion-group-outlined',
+      default: 'suggestion-group-outlined',
     },
     ghost: {
       type: String,
-      default: 'x-suggestion-group-ghost',
+      default: 'suggestion-group-ghost',
     },
     combinations: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-suggestion-group-success x-suggestion-group-sm',
-        'x-suggestion-group-outlined x-suggestion-group-auxiliary x-suggestion-group-md ',
-        'x-suggestion-group-ghost x-suggestion-group-lg',
+        'suggestion-group-success suggestion-group-sm',
+        'suggestion-group-outlined suggestion-group-auxiliary suggestion-group-md ',
+        'suggestion-group-ghost suggestion-group-lg',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-suggestion.vue b/packages/x-tailwindcss/demo/src/components/xds-suggestion.vue
index fe545715ce..3389d736a1 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-suggestion.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-suggestion.vue
@@ -11,7 +11,7 @@
       title="Click me to copy CSS classes"
       @click="copyCssClassesToClipboard"
     >
-      <CuratedIcon class="x-icon" />
+      <CuratedIcon class="icon" />
       <template v-if="section === 'Default'">
         very long default suggestion to test line wrap alignment
       </template>
@@ -36,40 +36,40 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-suggestion',
+      default: 'suggestion',
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-suggestion-sm', 'x-suggestion-md', 'x-suggestion-lg'],
+      default: () => ['suggestion-sm', 'suggestion-md', 'suggestion-lg'],
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
         '',
-        'x-suggestion-neutral',
-        'x-suggestion-lead',
-        'x-suggestion-auxiliary',
-        'x-suggestion-accent',
-        'x-suggestion-highlight',
-        'x-suggestion-success',
-        'x-suggestion-warning',
-        'x-suggestion-error',
+        'suggestion-neutral',
+        'suggestion-lead',
+        'suggestion-auxiliary',
+        'suggestion-accent',
+        'suggestion-highlight',
+        'suggestion-success',
+        'suggestion-warning',
+        'suggestion-error',
       ],
     },
     outlined: {
       type: String,
-      default: 'x-suggestion-outlined',
+      default: 'suggestion-outlined',
     },
     ghost: {
       type: String,
-      default: 'x-suggestion-ghost',
+      default: 'suggestion-ghost',
     },
     combinations: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-suggestion x-suggestion-success x-suggestion-md',
-        'x-suggestion x-suggestion-auxiliary x-suggestion-md',
-        'x-suggestion-tag x-suggestion-error-50 x-suggestion-lg',
+        'suggestion suggestion-success suggestion-md',
+        'suggestion suggestion-auxiliary suggestion-md',
+        'suggestion-tag suggestion-error-50 suggestion-lg',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-tag.vue b/packages/x-tailwindcss/demo/src/components/xds-tag.vue
index 4f03773847..3fb7f55524 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-tag.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-tag.vue
@@ -12,7 +12,7 @@
       @click="copyCssClassesToClipboard"
     >
       {{ removeClassPrefix(cssClass, base) }} tag
-      <PlusIcon class="x-icon" />
+      <PlusIcon class="icon" />
     </button>
   </XdsBaseShowcase>
 </template>
@@ -33,54 +33,54 @@ export default defineComponent({
   props: {
     base: {
       type: String,
-      default: 'x-tag',
+      default: 'tag',
     },
     sizes: {
       type: Array as PropType<string[]>,
-      default: () => ['x-tag-sm', 'x-tag-md', 'x-tag-lg'],
+      default: () => ['tag-sm', 'tag-md', 'tag-lg'],
     },
     colors: {
       type: Array as PropType<string[]>,
       default: () => [
         '',
-        'x-tag-neutral',
-        'x-tag-lead',
-        'x-tag-auxiliary',
-        'x-tag-accent',
-        'x-tag-highlight',
-        'x-tag-success',
-        'x-tag-warning',
-        'x-tag-error',
+        'tag-neutral',
+        'tag-lead',
+        'tag-auxiliary',
+        'tag-accent',
+        'tag-highlight',
+        'tag-success',
+        'tag-warning',
+        'tag-error',
       ],
     },
     selected: {
       type: String,
-      default: 'x-selected',
+      default: 'selected',
     },
     outlined: {
       type: String,
-      default: 'x-tag-outlined',
+      default: 'tag-outlined',
     },
     solid: {
       type: String,
-      default: 'x-tag-solid',
+      default: 'tag-solid',
     },
     ghost: {
       type: String,
-      default: 'x-tag-ghost',
+      default: 'tag-ghost',
     },
     tight: {
       type: String,
-      default: 'x-tag-tight',
+      default: 'tag-tight',
     },
     combinations: {
       type: Array as PropType<string[]>,
       default: () => [
-        'x-tag-lead x-tag-sm',
-        'x-tag-auxiliary x-tag-outlined x-tag-lg x-selected',
-        'x-tag-highlight x-tag-solid x-tag-lg x-selected',
-        'x-tag-success x-tag-tight x-tag-sm x-selected',
-        'x-tag-warning x-tag-ghost x-selected',
+        'tag-lead tag-sm',
+        'tag-auxiliary tag-outlined tag-lg selected',
+        'tag-highlight tag-solid tag-lg selected',
+        'tag-success tag-tight tag-sm selected',
+        'tag-warning tag-ghost selected',
       ],
     },
   },
diff --git a/packages/x-tailwindcss/demo/src/components/xds-typography.vue b/packages/x-tailwindcss/demo/src/components/xds-typography.vue
index d76576919b..a62cb332e0 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-typography.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-typography.vue
@@ -36,28 +36,28 @@ export default defineComponent({
     typography(): Record<string, { base: string; sizes: string[] }> {
       return {
         'Text 1': {
-          base: 'x-text1',
-          sizes: ['x-text1-sm', 'x-text1-md', 'x-text1-lg'],
+          base: 'text1',
+          sizes: ['text1-sm', 'text1-md', 'text1-lg'],
         },
         'Text 2': {
-          base: 'x-text2',
-          sizes: ['x-text2-sm', 'x-text2-md', 'x-text2-lg'],
+          base: 'text2',
+          sizes: ['text2-sm', 'text2-md', 'text2-lg'],
         },
         'Title 1': {
-          base: 'x-title1',
-          sizes: ['x-title1-sm', 'x-title1-md', 'x-title1-lg'],
+          base: 'title1',
+          sizes: ['title1-sm', 'title1-md', 'title1-lg'],
         },
         'Title 2': {
-          base: 'x-title2',
-          sizes: ['x-title2-sm', 'x-title2-md', 'x-title2-lg'],
+          base: 'title2',
+          sizes: ['title2-sm', 'title2-md', 'title2-lg'],
         },
         'Title 3': {
-          base: 'x-title3',
-          sizes: ['x-title3-sm', 'x-title3-md', 'x-title3-lg'],
+          base: 'title3',
+          sizes: ['title3-sm', 'title3-md', 'title3-lg'],
         },
         'Title 4': {
-          base: 'x-title4',
-          sizes: ['x-title4-sm', 'x-title4-md', 'x-title4-lg'],
+          base: 'title4',
+          sizes: ['title4-sm', 'title4-md', 'title4-lg'],
         },
       }
     },
diff --git a/packages/x-tailwindcss/demo/src/css/index.css b/packages/x-tailwindcss/demo/src/css/index.css
new file mode 100644
index 0000000000..27ad69059f
--- /dev/null
+++ b/packages/x-tailwindcss/demo/src/css/index.css
@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+
+@plugin "../../../src/x-tailwind-plugin/plugin";
diff --git a/packages/x-tailwindcss/demo/src/css/index.pcss b/packages/x-tailwindcss/demo/src/css/index.pcss
deleted file mode 100644
index 5e369fcbd4..0000000000
--- a/packages/x-tailwindcss/demo/src/css/index.pcss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@layer components {
-  .x-custom-button {
-    @apply x-button x-button-outlined x-button-highlight x-button-lg x-transition-colors;
-  }
-}
diff --git a/packages/x-tailwindcss/demo/src/main.ts b/packages/x-tailwindcss/demo/src/main.ts
index 5f8475dd52..64dc2f5fe5 100644
--- a/packages/x-tailwindcss/demo/src/main.ts
+++ b/packages/x-tailwindcss/demo/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
 import xdsShowcase from './components/xds-showcase.vue'
-import './css/index.pcss'
+import './css/index.css'
 
 createApp(xdsShowcase).mount('#app')
diff --git a/packages/x-tailwindcss/demo/tailwindcss-nesting.d.ts b/packages/x-tailwindcss/demo/tailwindcss-nesting.d.ts
deleted file mode 100644
index 8ce054772c..0000000000
--- a/packages/x-tailwindcss/demo/tailwindcss-nesting.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module 'tailwindcss/nesting' {
-  import type { PluginCreator } from 'postcss'
-  const plugin: PluginCreator<void>
-  export default plugin
-}
diff --git a/packages/x-tailwindcss/demo/tsconfig.json b/packages/x-tailwindcss/demo/tsconfig.json
index f9411a16e4..a9738d5ac8 100644
--- a/packages/x-tailwindcss/demo/tsconfig.json
+++ b/packages/x-tailwindcss/demo/tsconfig.json
@@ -4,5 +4,5 @@
   "compilerOptions": {
     "experimentalDecorators": true
   },
-  "include": ["./src/**/*.ts", "./src/**/*.vue", "vite.config.ts", "tailwindcss-nesting.d.ts"]
+  "include": ["./src/**/*.ts", "./src/**/*.vue", "vite.config.ts", "tailwind.config.ts"]
 }
diff --git a/packages/x-tailwindcss/demo/vite.config.ts b/packages/x-tailwindcss/demo/vite.config.ts
index 87ac40a03b..55b530adc3 100644
--- a/packages/x-tailwindcss/demo/vite.config.ts
+++ b/packages/x-tailwindcss/demo/vite.config.ts
@@ -1,19 +1,17 @@
 import { resolve } from 'node:path'
+import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
-import autoprefixer from 'autoprefixer'
-import tailwindcss from 'tailwindcss'
-import tailwindcssNesting from 'tailwindcss/nesting'
 import { defineConfig } from 'vite'
-import tailwindConfig from './tailwind.config'
 
 export default defineConfig({
   build: {
     outDir: resolve(__dirname, '../showcase'),
   },
-  css: {
-    postcss: {
-      plugins: [tailwindcss(tailwindConfig), tailwindcssNesting(), autoprefixer()],
-    },
-  },
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    // eslint-disable-next-line ts/no-unsafe-call
+    tailwindcss({
+      config: resolve(__dirname, './tailwind.config.ts'),
+    } as any),
+  ],
 })
diff --git a/packages/x-tailwindcss/package.json b/packages/x-tailwindcss/package.json
index 24ed11cb13..1e2e7d7201 100644
--- a/packages/x-tailwindcss/package.json
+++ b/packages/x-tailwindcss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-tailwindcss",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.21-RC.MM.1",
   "description": "Empathy X Tailwind plugin",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -16,9 +16,21 @@
     "system",
     "empathy"
   ],
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./plugin": {
+      "import": "./dist/esm/x-tailwind-plugin/plugin.js",
+      "require": "./dist/cjs/x-tailwind-plugin/plugin.js"
+    },
+    "./old-ds-plugin": {
+      "import": "./dist/esm/old-ds-plugin/plugin.js",
+      "require": "./dist/cjs/old-ds-plugin/plugin.js"
+    }
+  },
   "files": [
     "dist",
     "showcase"
@@ -46,14 +58,14 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "29.0.0",
+    "@tailwindcss/postcss": "4.1.17",
+    "@tailwindcss/vite": "4.1.17",
+    "@types/tailwindcss": "^3.1.0",
     "@vitejs/plugin-vue": "5.2.4",
-    "autoprefixer": "10.4.23",
-    "postcss": "8.5.6",
-    "postcss-import": "16.1.1",
     "rimraf": "3.0.2",
     "rollup": "4.54.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.1.17",
     "ts-jest": "29.4.6",
     "typescript": "5.9.3",
     "vite": "6.4.1",
diff --git a/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts b/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts
index bc64402c43..a39b6f3b7a 100644
--- a/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts
+++ b/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts
@@ -1,7 +1,6 @@
 import type { Dictionary } from '@empathyco/x-utils'
 import type { TailwindHelpers } from '../types'
 import { reduce } from '@empathyco/x-utils'
-import plugin from 'tailwindcss/plugin'
 
 /**
  * Maps a `Dictionary` to another with the same properties but adding a prefix the keys.
@@ -34,95 +33,99 @@ type PrefixObject<SomeObject extends Dictionary, Prefix extends string> = {
 /**
  * Integrates tailwind theme with the old design system tokens.
  */
-// eslint-disable-next-line ts/unbound-method
-export default plugin(({ addBase, theme }: TailwindHelpers) => {
-  addBase({
-    ':root': {
-      // COLOR
-      ...mapPrefix('--x-color-base-', {
-        lead: theme('x.colors.lead.50'),
-        auxiliary: theme('x.colors.auxiliary.25'),
-        'neutral-10': theme('x.colors.neutral.90'),
-        'neutral-35': theme('x.colors.neutral.75'),
-        'neutral-70': theme('x.colors.neutral.25'),
-        'neutral-95': theme('x.colors.neutral.10'),
-        'neutral-100': theme('x.colors.neutral.0'),
-        accent: theme('x.colors.auxiliary.50'),
-        enable: theme('x.colors.success.50'),
-        disable: theme('x.colors.error.50'),
-      }),
 
-      // SPACING
-      ...mapPrefix('--x-size-base-', {
-        '01': theme('x.spacing.2'),
-        '02': theme('x.spacing.4'),
-        '03': theme('x.spacing.8'),
-        '04': theme('x.spacing.12'),
-        '05': theme('x.spacing.16'),
-        '06': theme('x.spacing.24'),
-        '07': theme('x.spacing.32'),
-        '08': theme('x.spacing.40'),
-        '09': theme('x.spacing.48'),
-        '10': theme('x.spacing.56'),
-        '11': theme('x.spacing.64'),
-        '12': theme('x.spacing.80'),
-        '13': theme('x.spacing.80'),
-        '14': theme('x.spacing.96'),
-        '15': theme('x.spacing.128'),
-        '16': '152px',
-        '17': '184px',
-        '18': '216px',
-        '19': '280px',
-        '20': '344px',
-      }),
+export default {
+  handler: (helpers: TailwindHelpers) => {
+    const addBase = helpers.addBase as (rules: Record<string, any>) => void
+    const theme = helpers.theme
+    addBase({
+      ':root': {
+        // COLOR
+        ...mapPrefix('--x-color-base-', {
+          lead: theme('x.colors.lead.50'),
+          auxiliary: theme('x.colors.auxiliary.25'),
+          'neutral-10': theme('x.colors.neutral.90'),
+          'neutral-35': theme('x.colors.neutral.75'),
+          'neutral-70': theme('x.colors.neutral.25'),
+          'neutral-95': theme('x.colors.neutral.10'),
+          'neutral-100': theme('x.colors.neutral.0'),
+          accent: theme('x.colors.auxiliary.50'),
+          enable: theme('x.colors.success.50'),
+          disable: theme('x.colors.error.50'),
+        }),
 
-      // BORDER
-      ...mapPrefix('--x-size-border-', {
-        'radius-base-pill': theme('x.borderRadius.round'),
-        'width-base': theme('x.borderWidth.1'),
-      }),
+        // SPACING
+        ...mapPrefix('--x-size-base-', {
+          '01': theme('x.spacing.2'),
+          '02': theme('x.spacing.4'),
+          '03': theme('x.spacing.8'),
+          '04': theme('x.spacing.12'),
+          '05': theme('x.spacing.16'),
+          '06': theme('x.spacing.24'),
+          '07': theme('x.spacing.32'),
+          '08': theme('x.spacing.40'),
+          '09': theme('x.spacing.48'),
+          '10': theme('x.spacing.56'),
+          '11': theme('x.spacing.64'),
+          '12': theme('x.spacing.80'),
+          '13': theme('x.spacing.80'),
+          '14': theme('x.spacing.96'),
+          '15': theme('x.spacing.128'),
+          '16': '152px',
+          '17': '184px',
+          '18': '216px',
+          '19': '280px',
+          '20': '344px',
+        }),
 
-      // FONT FAMILY
-      '--x-font-family-base': theme('x.fontFamily.main'),
+        // BORDER
+        ...mapPrefix('--x-size-border-', {
+          'radius-base-pill': theme('x.borderRadius.round'),
+          'width-base': theme('x.borderWidth.1'),
+        }),
 
-      // FONT SIZES
-      ...mapPrefix('--x-size-font-', {
-        'base-xs': theme('x.fontSize.xs'),
-        'base-s': theme('x.fontSize.sm'),
-        'base-m': theme('x.fontSize.md'),
-        'base-l': theme('x.fontSize.lg'),
-        'base-xl': theme('x.fontSize.2xl'),
-      }),
+        // FONT FAMILY
+        '--x-font-family-base': theme('x.fontFamily.main'),
 
-      // FONT WEIGHT
-      ...mapPrefix('--x-number-font-weight-base-', {
-        light: theme('x.fontWeight.light'),
-        regular: theme('x.fontWeight.regular'),
-        bold: theme('x.fontWeight.bold'),
-      }),
+        // FONT SIZES
+        ...mapPrefix('--x-size-font-', {
+          'base-xs': theme('x.fontSize.xs'),
+          'base-s': theme('x.fontSize.sm'),
+          'base-m': theme('x.fontSize.md'),
+          'base-l': theme('x.fontSize.lg'),
+          'base-xl': theme('x.fontSize.2xl'),
+        }),
 
-      // LINE HEIGHT
-      ...mapPrefix('--x-size-line-height-base-', {
-        s: theme('x.lineHeight.sm'),
-        m: theme('x.lineHeight.md'),
-        l: theme('x.lineHeight.lg'),
-      }),
+        // FONT WEIGHT
+        ...mapPrefix('--x-number-font-weight-base-', {
+          light: theme('x.fontWeight.light'),
+          regular: theme('x.fontWeight.regular'),
+          bold: theme('x.fontWeight.bold'),
+        }),
 
-      // TEXT
-      '--x-color-text-default': theme('x.colors.neutral.100'),
-      '--x-font-family-text': theme('x.fontFamily.main'),
-      '--x-size-font-text': theme('x.fontSize.sm'),
-      '--x-number-font-weight-text': theme('x.fontWeight.regular'),
-      '--x-size-line-height-text': theme('x.lineHeight.sm'),
+        // LINE HEIGHT
+        ...mapPrefix('--x-size-line-height-base-', {
+          s: theme('x.lineHeight.sm'),
+          m: theme('x.lineHeight.md'),
+          l: theme('x.lineHeight.lg'),
+        }),
 
-      // TITLE 3
-      '--x-font-family-title3': theme('x.fontFamily.main'),
-      '--x-size-font-title3': theme('x.fontSize.md'),
-      '--x-number-font-weight-title3': theme('x.fontWeight.regular'),
-      '--x-size-line-height-title3': theme('x.lineHeight.md'),
+        // TEXT
+        '--x-color-text-default': theme('x.colors.neutral.100'),
+        '--x-font-family-text': theme('x.fontFamily.main'),
+        '--x-size-font-text': theme('x.fontSize.sm'),
+        '--x-number-font-weight-text': theme('x.fontWeight.regular'),
+        '--x-size-line-height-text': theme('x.lineHeight.sm'),
 
-      // IMAGE
-      '--x-number-aspect-ratio-picture': theme('x.aspectRatio.default'),
-    },
-  })
-})
+        // TITLE 3
+        '--x-font-family-title3': theme('x.fontFamily.main'),
+        '--x-size-font-title3': theme('x.fontSize.md'),
+        '--x-number-font-weight-title3': theme('x.fontWeight.regular'),
+        '--x-size-line-height-title3': theme('x.lineHeight.md'),
+
+        // IMAGE
+        '--x-number-aspect-ratio-picture': theme('x.aspectRatio.default'),
+      },
+    })
+  },
+}
diff --git a/packages/x-tailwindcss/src/types.ts b/packages/x-tailwindcss/src/types.ts
index d5360e6617..8df203a2b5 100644
--- a/packages/x-tailwindcss/src/types.ts
+++ b/packages/x-tailwindcss/src/types.ts
@@ -1,87 +1,51 @@
-import type { ExtractPath } from '@empathyco/x-utils'
-import type { Config } from 'tailwindcss'
-import type { PluginAPI } from 'tailwindcss/types/config'
-import type Theme from './x-tailwind-plugin/theme'
-
 /**
  * Represents a `CSS` variable name.
- *
- * @example
- * ```typescript
- * const leadColor: CssVariable = '--color-lead';
- * ```
- *
- * @internal
  */
 type CssVariable = `--${string}`
 
 /**
- * Represents a `Css` class selector.
- *
- * @example
- * ```typescript
- * const btnClass: CssClassSelector = '.x-btn';
- * ```
- *
- * @internal
+ * Represents a `CSS` class selector.
  */
 type CssClassSelector = `.${string}`
+
 /**
  * Represents a `CSS` nested selector.
- *
- * @example
- * ```typescript
- * const nestedSelector: CssNestedSelector = '&--lead';
- * ```
- *
- * @internal
  */
 type CssNestedSelector = `&${string}`
+
 /**
  * Represents a `CSS` pseudo selector.
- *
- * @example
- * ```typescript
- * const rootSelector: CssPseudoSelector = ':root';
- * ```
- *
- * @internal
  */
 type CssPseudoSelector = `:${string}`
 
 /**
- * Represents the different `CSS` styling options for a component.
- *
- * @example
- * ```typescript
- * const cssOptions: CssStyleOptions = {
- *   '--color-lead': 'blue',
- *   '.x-btn': {
- *     '&--lead': {
- *       color: 'var(--color-lead)',
- *       gap: theme('x.spacing.2')
- *     }
- *   }
- * }
- * ```
- *
- * @public
+ * Represents the different CSS styling options for a component.
  */
 export interface CssStyleOptions {
-  [Key: CssClassSelector | CssNestedSelector | CssPseudoSelector]:
+  [key: CssClassSelector | CssNestedSelector | CssPseudoSelector]:
     | CssStyleOptions
-    | Partial<CSSStyleDeclaration>
-  [Key: CssVariable]: string & Partial<TailwindHelpers>
+    | Record<string, any>
+
+  [key: CssVariable]: string
+}
+
+export interface CSSRuleValue {
+  [key: string]: string | number | CSSRuleValue | undefined
+}
+
+export interface CSSRuleObject {
+  [selector: string]: CSSRuleValue | string | number | undefined
 }
 
 /**
- * All the tailwind helpers provided by the plugin.
- *
- * @public
+ * The helpers provided internally by our Tailwind plugin.
+ * Tailwind CSS 4 no longer exposes `PluginAPI`,
+ * so we recreate the pieces we need.
  */
-export type TailwindHelpers = PluginAPI & {
-  theme: <TDefaultValue = Config['theme']>(
-    path?: ExtractPath<typeof Theme>,
-    defaultValue?: TDefaultValue,
-  ) => TDefaultValue
+export interface TailwindHelpers {
+  theme: (path?: string, defaultValue?: any) => any
+  addUtilities: (utilities: Record<string, any>) => void
+  addComponents: (components: Record<string, any>) => void
+  addBase: (base: Record<string, any>) => void
+  addVariant: (name: string, definition: any) => void
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
index 06e2222e7c..69ff25a3c3 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
@@ -1,5 +1,4 @@
-import type { CSSRuleObject } from 'tailwindcss/types/config'
-import type { TailwindHelpers } from '../types'
+import type { CSSRuleValue, TailwindHelpers } from '../types'
 import { attach } from './components/attach'
 import { badge } from './components/badge'
 import { button } from './components/button'
@@ -19,7 +18,10 @@ import { suggestionGroup } from './components/suggestion-group'
 import { suggestionGroupButton } from './components/suggestion-group/button'
 import { tag } from './components/tag'
 import { typography } from './components/typography'
-import { variables } from './components/variables'
+
+export interface CSSRuleObject {
+  [selector: string]: CSSRuleValue | string | number | undefined
+}
 
 /**
  * Default component styles.
@@ -31,26 +33,24 @@ import { variables } from './components/variables'
  */
 export default function components(helpers: TailwindHelpers) {
   return {
-    ...variables(helpers),
+    ...attach(helpers),
+    ...badge(helpers),
     ...button(helpers),
     ...buttonGroup(helpers),
-    ...icon(helpers),
-    ...suggestion(helpers),
+    ...facetFilter(helpers),
     ...highlight(helpers),
-    ...typography(helpers),
+    ...icon(helpers),
     ...input(helpers),
     ...inputGroup(helpers),
-    ...typography(helpers),
-    ...suggestionGroup(helpers),
-    ...suggestionGroupButton(helpers),
-    ...slidingPanel(helpers),
-    ...picture(helpers),
     ...layout(helpers),
+    ...picture(helpers),
+    ...progressBar(helpers),
     ...scroll(helpers),
+    ...slidingPanel(helpers),
+    ...suggestion(helpers),
+    ...suggestionGroup(helpers),
+    ...suggestionGroupButton(helpers),
     ...tag(helpers),
-    ...badge(helpers),
-    ...facetFilter(helpers),
-    ...progressBar(helpers),
-    ...attach(helpers),
+    ...typography(helpers),
   } as unknown as CSSRuleObject
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts
index 66600a2905..dd31f5bfe2 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts
@@ -8,32 +8,30 @@ import type { TailwindHelpers } from '../../../types'
  */
 export function attach(_helpers: TailwindHelpers) {
   return {
-    '.x-attach-container': {
+    '.attach-container': {
       position: 'relative',
-    },
-    '.x-attach-to': {
-      '&-top-left': {
+      '& > .attach-to-top-left': {
         position: 'absolute',
         top: 0,
         left: 0,
         transform: 'translate(calc(var(--attach-horizontal-offset, 50%) * -1), -50%)',
       },
 
-      '&-top-right': {
+      '& > .attach-to-top-right': {
         position: 'absolute',
         top: 0,
         right: 0,
         transform: 'translate(var(--attach-horizontal-offset, 50%), -50%)',
       },
 
-      '&-bottom-right': {
+      '& > .attach-to-bottom-right': {
         position: 'absolute',
         bottom: 0,
         right: 0,
         transform: 'translate( var(--attach-horizontal-offset, 50%), 50%)',
       },
 
-      '&-bottom-left': {
+      '& > .attach-to-bottom-left': {
         position: 'absolute',
         bottom: 0,
         left: 0,
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts
index 5824cd50a4..820bb4c031 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts
@@ -16,21 +16,21 @@ import { badgeSizes } from './sizes'
  */
 export function badge(helpers: TailwindHelpers) {
   return {
-    '.x-badge': {
+    '.badge': {
       ...badgeDefault(helpers),
-      ...rename(
-        {
-          ...badgeSizes(helpers),
-          ...badgeCircle(helpers),
-          ...badgeColors(helpers),
-          ...badgeOutlined(helpers),
-          ...badgeLight(helpers),
-          ...badgeBright(helpers),
-        },
-        {
-          prefix: '&-',
-        },
-      ),
     },
+    ...rename(
+      {
+        ...badgeSizes(helpers),
+        ...badgeCircle(helpers),
+        ...badgeColors(helpers),
+        ...badgeOutlined(helpers),
+        ...badgeLight(helpers),
+        ...badgeBright(helpers),
+      },
+      {
+        prefix: '.x-badge-',
+      },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts
index 777c5c8f5f..e5eb010f88 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts
@@ -14,16 +14,16 @@ export function buttonGroupDefault(helpers: TailwindHelpers) {
     color: theme('x.colors.neutral.50'),
 
     // We should only remove the left border if the button group doesn't have gap.
-    '&:not([class*="gap"]) > .x-button + .x-button': {
+    '&:not([class*="gap"]) > .button + .button': {
       borderLeft: 'unset',
     },
 
-    '& > :not(.x-button-circle):first-child': {
+    '& > :not(.button-circle):first-child': {
       borderTopLeftRadius: 'inherit',
       borderBottomLeftRadius: 'inherit',
     },
 
-    '& > :not(.x-button-circle):last-child': {
+    '& > :not(.button-circle):last-child': {
       borderTopRightRadius: 'inherit',
       borderBottomRightRadius: 'inherit',
     },
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts
index e750103c86..3addc379e4 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts
@@ -11,9 +11,9 @@ import { buttonGroupDivider } from './divider'
  */
 export function buttonGroup(helpers: TailwindHelpers) {
   return {
-    '.x-button-group': {
+    '.button-group': {
       ...buttonGroupDefault(helpers),
-      ...rename(buttonGroupDivider(helpers), { prefix: '&-' }),
     },
+    ...rename(buttonGroupDivider(helpers), { prefix: '.button-group-' }),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/default.ts
index 3bc272074c..ce5089137c 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/default.ts
@@ -38,7 +38,7 @@ export function buttonDefault(helpers: TailwindHelpers) {
 
     ...buttonSizes(helpers).md,
 
-    '&.x-selected': {
+    '&.selected': {
       backgroundColor: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
       borderColor: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
 
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/disabled.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/disabled.ts
index b7f98369a6..53384cd603 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/disabled.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/disabled.ts
@@ -22,7 +22,7 @@ export function buttonDisabled(helpers: TailwindHelpers) {
       cursor: 'not-allowed',
       ...disabledStyles,
 
-      '&.x-selected': {
+      '&.selected': {
         ...disabledStyles,
       },
     },
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/ghost.ts
index 9f89e97186..be787d4926 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/ghost.ts
@@ -13,7 +13,7 @@ export function buttonGhost(helpers: TailwindHelpers) {
   const { theme } = helpers
   return {
     ghost: deepMerge(noBackground(helpers), backgroundOnHover(helpers), {
-      '&.x-selected': {
+      '&.selected': {
         borderColor: theme('x.colors.neutral.10'),
         backgroundColor: theme('x.colors.neutral.10'),
         color: `var(--button-color-75,${theme('x.colors.neutral.90')})`,
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts
index 506d084f29..2f2edd6dd6 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts
@@ -19,21 +19,18 @@ import { buttonTight } from './tight'
  */
 export function button(helpers: TailwindHelpers) {
   return {
-    '.x-button': deepMerge(
-      buttonDefault(helpers),
-      rename(
-        {
-          ...buttonColors(helpers),
-          ...buttonSizes(helpers),
-          ...buttonLayouts(helpers),
-          ...buttonOutlined(helpers),
-          ...buttonLink(helpers),
-          ...buttonGhost(helpers),
-          ...buttonTight(helpers),
-        },
-        { prefix: '&-' },
-      ),
-      buttonDisabled(helpers),
+    '.button': deepMerge(buttonDefault(helpers), buttonDisabled(helpers)),
+    ...rename(
+      {
+        ...buttonColors(helpers),
+        ...buttonSizes(helpers),
+        ...buttonLayouts(helpers),
+        ...buttonOutlined(helpers),
+        ...buttonLink(helpers),
+        ...buttonGhost(helpers),
+        ...buttonTight(helpers),
+      },
+      { prefix: '.button-' },
     ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/link.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/link.ts
index 4c31ecad01..7099a05c3e 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/link.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/link.ts
@@ -23,7 +23,7 @@ export function buttonLink(helpers: TailwindHelpers) {
       ...noHorizontalPadding(helpers),
       ...noBackground(helpers),
 
-      '&.x-selected': {
+      '&.selected': {
         borderColor: 'transparent',
         backgroundColor: 'transparent',
         color: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/outlined.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/outlined.ts
index 0eef77d15b..c9fa06bc16 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/outlined.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/outlined.ts
@@ -23,7 +23,7 @@ export function buttonOutlined(helpers: TailwindHelpers) {
         color: theme('x.colors.neutral.0'),
       },
 
-      '&.x-selected': {
+      '&.selected': {
         borderColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
         backgroundColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
         color: theme('x.colors.neutral.0'),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/tight.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/tight.ts
index d492b8dd76..882e0cf260 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/tight.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/tight.ts
@@ -13,7 +13,7 @@ export function buttonTight(helpers: TailwindHelpers) {
   const { theme } = helpers
   return {
     tight: deepMerge(noBackground(helpers), noHorizontalPadding(helpers), {
-      '&.x-selected': {
+      '&.selected': {
         borderColor: 'transparent',
         backgroundColor: 'transparent',
         color: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/default.ts
index fedaa75423..69c1b15260 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/default.ts
@@ -37,7 +37,7 @@ export function facetFilterDefault(helpers: TailwindHelpers) {
       color: `var(--filter-color-50, ${theme('x.colors.neutral.50')})`,
     },
 
-    '&.x-selected': {
+    '&.selected': {
       fontWeight: theme('x.fontWeight.bold'),
       letterSpacing: theme('x.letterSpacing.xs'),
       color: `var(--filter-color-50, ${theme('x.colors.neutral.90')})`,
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/ghost.ts
index 1dba1183e7..dc52412b68 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/ghost.ts
@@ -24,7 +24,7 @@ export function facetFilterGhost(helpers: TailwindHelpers) {
         backgroundColor: theme('x.colors.neutral.10'),
         color: theme('x.colors.neutral.90'),
       },
-      '&.x-selected': {
+      '&.selected': {
         fontWeight: theme('x.fontWeight.regular'),
         color: `var(--filter-color-75)`,
         letterSpacing: theme('x.letterSpacing.md'),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts
index a2104f2e95..cfe3c65162 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts
@@ -16,18 +16,16 @@ import { facetFilterUnderline } from './underline'
  */
 export function facetFilter(helpers: TailwindHelpers) {
   return {
-    '.x-facet-filter': deepMerge(
-      facetFilterDefault(helpers),
-      rename(
-        {
-          ...facetFilterSizes(helpers),
-          ...facetFilterColors(helpers),
-          ...facetFilterUnderline(helpers),
-          ...facetFilterGhost(helpers),
-          ...facetFilterSimple(helpers),
-        },
-        { prefix: '&-' },
-      ),
+    '.facet-filter': deepMerge(facetFilterDefault(helpers)),
+    ...rename(
+      {
+        ...facetFilterSizes(helpers),
+        ...facetFilterColors(helpers),
+        ...facetFilterUnderline(helpers),
+        ...facetFilterGhost(helpers),
+        ...facetFilterSimple(helpers),
+      },
+      { prefix: '.facet-filter-' },
     ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/simple.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/simple.ts
index d4924f76a1..a65b0f66af 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/simple.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/simple.ts
@@ -15,7 +15,7 @@ export function facetFilterSimple(helpers: TailwindHelpers) {
         color: theme('x.colors.neutral.90'),
         opacity: '.6',
       },
-      '&.x-selected': {
+      '&.selected': {
         fontWeight: theme('x.fontWeight.regular'),
         letterSpacing: theme('x.letterSpacing.md'),
 
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/underline.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/underline.ts
index 2f51f41f0a..04fbb7866d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/underline.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/underline.ts
@@ -18,7 +18,7 @@ export function facetFilterUnderline(helpers: TailwindHelpers) {
           borderColor: 'transparent',
         },
       },
-      '&.x-selected': {
+      '&.selected': {
         fontWeight: theme('x.fontWeight.regular'),
         letterSpacing: theme('x.letterSpacing.md'),
       },
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts
index 2bda788cc4..ed023cbc1b 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts
@@ -10,7 +10,7 @@ export function highlightDefault(helpers: TailwindHelpers) {
   const { theme } = helpers
   return {
     fontWeight: theme('x.fontWeight.bold'),
-    '&-match': {
+    '& > .highlight-text-match': {
       fontWeight: theme('x.fontWeight.regular'),
     },
   }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts
index 67d1ac2237..86725bebda 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts
@@ -10,7 +10,7 @@ import { highlightDefault } from './default'
  */
 export function highlight(helpers: TailwindHelpers) {
   return {
-    '.x-highlight-text': {
+    '.highlight-text': {
       ...highlightDefault(helpers),
     },
   }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/background-colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/background-colors.ts
index 666fef9c86..136a8fdfab 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/background-colors.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/background-colors.ts
@@ -1,6 +1,5 @@
 import type { TailwindHelpers } from '../../../types'
-import { map, rename } from '@empathyco/x-utils'
-import { mapColors } from '../../utils/map-colors'
+import { mapColorsFlat } from '../../utils/map-colors'
 
 /**
  * Returns the `background color` variants for component `icon`.
@@ -9,23 +8,22 @@ import { mapColors } from '../../utils/map-colors'
  * @returns The {@link CssStyleOptions} for the variant.
  */
 export function iconBackgroundColors(helpers: TailwindHelpers) {
-  return {
-    bg: rename(
-      mapColors(
-        color => ({
-          '[stroke="#fff"]': { stroke: color['50'] },
-          '[fill="#fff"]': { fill: color['50'] },
-          ...rename(
-            map(color, (shadeName, shadeColor) => ({
-              '[stroke="#fff"]': { stroke: shadeColor },
-              '[fill="#fff"]': { fill: shadeColor },
-            })),
-            { prefix: '&-' },
-          ),
-        }),
-        helpers,
+  return mapColorsFlat((color, colorName) => {
+    return {
+      [`bg-${colorName}`]: {
+        '[stroke="#fff"]': { stroke: color['50'] },
+        '[fill="#fff"]': { fill: color['50'] },
+      },
+
+      ...Object.fromEntries(
+        Object.entries(color).map(([shadeName, shadeColor]) => [
+          `bg-${colorName}-${shadeName}`,
+          {
+            '[stroke="#fff"]': { stroke: shadeColor },
+            '[fill="#fff"]': { fill: shadeColor },
+          },
+        ]),
       ),
-      { prefix: '&-' },
-    ),
-  }
+    }
+  }, helpers)
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/colors.ts
index 649238296a..eb5bdccbbb 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/colors.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/colors.ts
@@ -1,6 +1,5 @@
 import type { TailwindHelpers } from '../../../types'
-import { map, rename } from '@empathyco/x-utils'
-import { mapColors } from '../../utils/map-colors'
+import { mapColorsFlat } from '../../utils/map-colors'
 
 /**
  * Returns the `color` variants for component `icon`.
@@ -9,16 +8,20 @@ import { mapColors } from '../../utils/map-colors'
  * @returns The {@link CssStyleOptions} for the variant.
  */
 export function iconColors(helpers: TailwindHelpers) {
-  return mapColors(
-    color => ({
-      color: color[50],
-      ...rename(
-        map(color, (shadeName, shadeColor) => ({
-          color: shadeColor,
-        })),
-        { prefix: '&-' },
+  return mapColorsFlat((color, colorName) => {
+    return {
+      [`${colorName}`]: {
+        color: color[50],
+      },
+
+      ...Object.fromEntries(
+        Object.entries(color).map(([shadeName, shadeColor]) => [
+          `${colorName}-${shadeName}`,
+          {
+            color: shadeColor,
+          },
+        ]),
       ),
-    }),
-    helpers,
-  )
+    }
+  }, helpers)
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts
index fc8de75772..1d88536ebe 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts
@@ -15,18 +15,16 @@ import { iconStrokeWidths } from './stroke-widths'
  */
 export function icon(helpers: TailwindHelpers) {
   return {
-    '.x-icon': Object.assign(
-      iconDefault(helpers),
-      rename(
-        {
-          ...iconColors(helpers),
-          ...iconBackgroundColors(helpers),
-          ...iconSizes(helpers),
-          ...iconSharp(helpers),
-          ...iconStrokeWidths(helpers),
-        },
-        { prefix: '&-' },
-      ),
+    '.icon': Object.assign(iconDefault(helpers)),
+    ...rename(
+      {
+        ...iconColors(helpers),
+        ...iconBackgroundColors(helpers),
+        ...iconSizes(helpers),
+        ...iconSharp(helpers),
+        ...iconStrokeWidths(helpers),
+      },
+      { prefix: '.icon-' },
     ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts
index 03c9054457..5ed412bd37 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts
@@ -13,7 +13,7 @@ export function iconStrokeWidths({ theme }: TailwindHelpers) {
       map(theme('x.strokeWidth'), (width, value) => ({
         '*': { strokeWidth: value },
       })),
-      { prefix: '&-' },
+      { prefix: '&.icon-stroke-width-' },
     ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/default.ts
index f5231d34c5..d9d924aa43 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/default.ts
@@ -29,7 +29,7 @@ export function inputGroupDefault(helpers: TailwindHelpers) {
       marginInlineEnd: theme('x.spacing.16'),
     },
 
-    '.x-input, input': {
+    '.input, input': {
       flex: '1 1 auto',
       minWidth: '0',
       padding: '0',
@@ -39,6 +39,9 @@ export function inputGroupDefault(helpers: TailwindHelpers) {
       fontSize: 'inherit',
       fontWeight: 'inherit',
       outline: 'none',
+      '&:focus,&:focus-within': {
+        outline: 'none',
+      },
     },
   })
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts
index 1f88030aa9..7a3f41e983 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts
@@ -15,17 +15,24 @@ import { inputGroupSizes } from './sizes'
  */
 export function inputGroup(helpers: TailwindHelpers) {
   return {
-    '.x-input-group': deepMerge(
+    '.input-group': deepMerge(
       inputGroupDefault(helpers),
       rename(
         {
           ...inputGroupColors(helpers),
           ...inputGroupSizes(helpers),
           ...inputGroupLine(helpers),
+        },
+        {
+          prefix: '&.input-group-',
+        },
+      ),
+      rename(
+        {
           ...inputGroupButtons(helpers),
         },
         {
-          prefix: '&-',
+          prefix: '& > .input-group-',
         },
       ),
     ),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts
index 7268966d90..b77e9cb61f 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts
@@ -14,7 +14,7 @@ import { inputSizes } from './sizes'
  */
 export function input(helpers: TailwindHelpers) {
   return {
-    '.x-input': deepMerge(
+    '.input': deepMerge(
       inputDefault(helpers),
       rename(
         {
@@ -23,7 +23,7 @@ export function input(helpers: TailwindHelpers) {
           ...inputLine(helpers),
         },
         {
-          prefix: '&-',
+          prefix: '&.input-',
         },
       ),
     ),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts
index f50a332574..51b3de0506 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts
@@ -15,15 +15,15 @@ import { utils } from './utils'
  */
 export function layout(helpers: TailwindHelpers) {
   return {
-    '.x-layout': rename(
+    ...rename(
       {
         ...container(helpers),
-        ...maxWidth(helpers),
-        ...minMargin(helpers),
         ...item(helpers),
       },
-      { prefix: '&-' },
+      { prefix: '.layout-' },
     ),
+    ...minMargin(helpers),
+    ...maxWidth(helpers),
     ...utils(helpers),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/item.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/item.ts
index a46cd6b919..46144f0fea 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/item.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/item.ts
@@ -26,7 +26,7 @@ export function item(_helpers: TailwindHelpers) {
         minWidth: '0',
       },
 
-      '&:not(.x-layout-overlap):not(.x-layout-overlap-from-top) > *': {
+      '&:not(.layout-overlap):not(.layout-overlap-from-top) > *': {
         minHeight: '0',
       },
     },
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts
index 26f59e0e5a..d673dc5008 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts
@@ -10,11 +10,11 @@ import { map, rename } from '@empathyco/x-utils'
 export function maxWidth(helpers: TailwindHelpers) {
   const { theme } = helpers
   return {
-    'max-width': rename(
+    ...rename(
       map(theme('x.layoutMaxWidth'), (maxWidthName, maxWidthValue) => ({
         '--x-layout-max-width': maxWidthValue,
       })),
-      { prefix: '&-' },
+      { prefix: '.layout-max-width-' },
     ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts
index 8c9d1f3070..aa93279ca4 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts
@@ -10,11 +10,11 @@ import { map, rename } from '@empathyco/x-utils'
 export function minMargin(helpers: TailwindHelpers) {
   const { theme } = helpers
   return {
-    'min-margin': rename(
+    ...rename(
       map(theme('x.spacing'), (spacingName, spacingValue) => ({
         '--x-layout-min-margin': spacingValue,
       })),
-      { prefix: '&-' },
+      { prefix: '.layout-min-margin-' },
     ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts
index 3f060b15c6..e434b315ed 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts
@@ -8,7 +8,7 @@ import type { TailwindHelpers } from '../../../types'
  */
 export function utils(_helpers: TailwindHelpers) {
   return {
-    '.x-layout-stack': {
+    '.layout-stack': {
       display: 'grid',
       gridTemplateRows: '1fr',
       gridTemplateColumns: '1fr',
@@ -25,45 +25,45 @@ export function utils(_helpers: TailwindHelpers) {
       },
     },
 
-    '.x-layout-expand': {
+    '.layout-expand': {
       height: '100%',
       flex: '1 1 0',
       minHeight: '0',
     },
 
-    '.x-layout-on-margin-left': {
+    '.layout-item > .layout-on-margin-left': {
       gridColumn: '1 / 2',
     },
-    '.x-layout-on-margin-right': {
+    '.layout-item > .layout-on-margin-right': {
       gridColumn: '-2 / -1',
     },
 
-    '.x-layout-overlap': {
+    '.layout-overlap': {
       height: '0',
       overflow: 'visible',
       alignContent: 'flex-end',
       zIndex: '1',
     },
-    '.x-layout-overlap-from-top': {
+    '.layout-overlap-from-top': {
       height: '0',
       overflow: 'visible',
       zIndex: '1',
       alignContent: 'flex-start',
     },
 
-    '.x-layout-no-margin-left': {
+    '.layout-item.layout-no-margin-left': {
       '--x-margin-left': '0px',
     },
-    '.x-layout-no-margin-right': {
+    '.layout-item.layout-no-margin-right': {
       '--x-margin-right': '0px',
     },
-    '.x-layout-no-margin': {
+    '.layout-item.layout-no-margin': {
       '--x-margin-left': '0px',
       '--x-margin-right': '0px',
     },
 
-    '@media (hover: hover) and (pointer: fine)': {
-      '.x-scroll > .x-layout-item:not(.x-layout-no-margin-right)': {
+    '.scroll > .layout-item:not(.layout-no-margin-right)': {
+      '@media (hover: hover) and (pointer: fine)': {
         '--x-layout-scroll-width': '17px',
       },
     },
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts
index 8c63b1de72..cf955e472b 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts
@@ -12,17 +12,17 @@ import { zoom } from './zoom'
  */
 export function picture(helpers: TailwindHelpers) {
   return {
-    '.x-picture': {
+    '.picture': {
       ...pictureDefault(helpers),
-      ...rename(
-        {
-          ...zoom(),
-          ...overlay(helpers),
-        },
-        {
-          prefix: '&-',
-        },
-      ),
     },
+    ...rename(
+      {
+        ...zoom(),
+        ...overlay(helpers),
+      },
+      {
+        prefix: '.picture-',
+      },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/overlay.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/overlay.ts
index b08cc6a830..ab797bf495 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/overlay.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/overlay.ts
@@ -13,7 +13,7 @@ export function overlay(helpers: TailwindHelpers) {
       '&:hover': {
         mixBlendMode: 'multiply',
       },
-      '.x-picture-image': {
+      '.picture-image': {
         '&:hover': {
           maskImage: `linear-gradient(to top, transparent, 20%, ${theme('x.colors.neutral.100')})`,
         },
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/zoom.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/zoom.ts
index 236116a13c..e43a5f2f7e 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/zoom.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/zoom.ts
@@ -6,7 +6,7 @@
 export function zoom() {
   return {
     zoom: {
-      '.x-picture-image': {
+      '.picture-image': {
         transition: 'transform 0.3s ease-out',
         '&:hover': {
           transform: 'scale(1.1)',
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts
index 0b8c112ee3..278446ed3d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts
@@ -16,7 +16,7 @@ export function progressBarDefault(helpers: TailwindHelpers) {
     backgroundColor: theme('x.colors.neutral.25'),
     overflow: 'hidden',
 
-    '& > &-fill': {
+    '& > .progress-bar-fill': {
       height: '100%',
       backgroundColor: `var(--progress-bar-color-50, ${theme('x.colors.neutral.90')})`,
     },
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts
index 2e53e331cd..c2007fc456 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts
@@ -13,15 +13,13 @@ import { progressBarSizes } from './sizes'
  */
 export function progressBar(helpers: TailwindHelpers) {
   return {
-    '.x-progress-bar': deepMerge(
-      progressBarDefault(helpers),
-      rename(
-        {
-          ...progressBarColors(helpers),
-          ...progressBarSizes(helpers),
-        },
-        { prefix: '&-' },
-      ),
+    '.progress-bar': deepMerge(progressBarDefault(helpers)),
+    ...rename(
+      {
+        ...progressBarColors(helpers),
+        ...progressBarSizes(helpers),
+      },
+      { prefix: '.progress-bar-' },
     ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts
index b8f7df29ec..e894520043 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts
@@ -9,7 +9,7 @@ import { scrollDefault } from './default'
  */
 export function scroll(helpers: TailwindHelpers) {
   return {
-    '.x-scroll': {
+    '.scroll': {
       ...scrollDefault(helpers),
     },
   }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/hover.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/hover.ts
index d4a7958f27..5499c59953 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/hover.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/hover.ts
@@ -5,33 +5,33 @@
  */
 export function slidingPanelButtonsHover() {
   return {
-    '&.x-sliding-panel-at-start': {
-      '.x-sliding-panel-button-left': {
+    '&.sliding-panel-at-start': {
+      '.sliding-panel-button-left': {
         opacity: 0,
         pointerEvents: 'none',
       },
     },
-    '&.x-sliding-panel-at-end': {
-      '.x-sliding-panel-button-right': {
+    '&.sliding-panel-at-end': {
+      '.sliding-panel-button-right': {
         opacity: 0,
         pointerEvents: 'none',
       },
     },
-    '&.x-sliding-panel-show-buttons-on-hover': {
-      '.x-sliding-panel-button-left': {
+    '&.sliding-panel-show-buttons-on-hover': {
+      '.sliding-panel-button-left': {
         opacity: 0,
       },
-      '.x-sliding-panel-button-right': {
+      '.sliding-panel-button-right': {
         opacity: 0,
       },
-      '&:not(.x-sliding-panel-at-start):hover': {
-        '.x-sliding-panel-button-left': {
+      '&:not(.sliding-panel-at-start):hover': {
+        '.sliding-panel-button-left': {
           opacity: 1,
           pointerEvents: 'all',
         },
       },
-      '&:not(.x-sliding-panel-at-end):hover': {
-        '.x-sliding-panel-button-right': {
+      '&:not(.sliding-panel-at-end):hover': {
+        '.sliding-panel-button-right': {
           opacity: 1,
           pointerEvents: 'all',
         },
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts
index 25f6aea2d8..b874f29e7d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts
@@ -9,15 +9,13 @@ import { slidingPanelButtonsPositions } from './positions'
  */
 export function slidingPanelButtons() {
   return {
-    '.x-sliding-panel-button': {
-      '&-left': {
-        ...slidingPanelButtonsDefault(),
-        left: 0,
-      },
-      '&-right': {
-        ...slidingPanelButtonsDefault(),
-        right: 0,
-      },
+    '.sliding-panel-button-left': {
+      ...slidingPanelButtonsDefault(),
+      left: 0,
+    },
+    '.sliding-panel-button-right': {
+      ...slidingPanelButtonsDefault(),
+      right: 0,
     },
     ...slidingPanelButtonsHover(),
     ...slidingPanelButtonsPositions(),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/positions.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/positions.ts
index b7ab8b1a69..5e96185761 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/positions.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/positions.ts
@@ -5,19 +5,19 @@
  */
 export function slidingPanelButtonsPositions() {
   return {
-    '&.x-sliding-panel-buttons-center': {
-      '.x-sliding-panel-button-left': {
+    '&.sliding-panel-buttons-center': {
+      '.sliding-panel-button-left': {
         transform: 'translateX(-50%)',
       },
-      '.x-sliding-panel-button-right': {
+      '.sliding-panel-button-right': {
         transform: 'translateX(50%)',
       },
     },
-    '&.x-sliding-panel-buttons-outside': {
-      '.x-sliding-panel-button-left': {
+    '&.sliding-panel-buttons-outside': {
+      '.sliding-panel-button-left': {
         transform: 'translateX(-100%)',
       },
-      '.x-sliding-panel-button-right': {
+      '.sliding-panel-button-right': {
         transform: 'translateX(100%)',
       },
     },
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts
index 6cb23f174f..68f795a4f1 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts
@@ -13,7 +13,7 @@ export function slidingPanelFade(helpers: TailwindHelpers) {
   const startSizes = fadeStartSizes(helpers)
   const endSizes = fadeEndSizes(helpers)
   return {
-    '.x-sliding-panel-fade': {
+    '.sliding-panel-fade': {
       ...defaultSizes.md,
       ...rename(
         {
@@ -24,36 +24,30 @@ export function slidingPanelFade(helpers: TailwindHelpers) {
         },
       ),
     },
-    '&.x-sliding-panel-at-start': {
-      '.x-sliding-panel-fade': {
-        ...startSizes.md,
-        ...rename(
-          {
-            ...startSizes,
-          },
-          {
-            prefix: '&-',
-          },
-        ),
-      },
+    '&.sliding-panel-at-start': {
+      ...startSizes.md,
+      ...rename(
+        {
+          ...startSizes,
+        },
+        {
+          prefix: '&.sliding-panel-fade-',
+        },
+      ),
     },
-    '&.x-sliding-panel-at-end': {
-      '.x-sliding-panel-fade': {
-        ...endSizes.md,
-        ...rename(
-          {
-            ...endSizes,
-          },
-          {
-            prefix: '&-',
-          },
-        ),
-      },
+    '&.sliding-panel-at-end': {
+      ...endSizes.md,
+      ...rename(
+        {
+          ...endSizes,
+        },
+        {
+          prefix: '&.sliding-panel-fade-',
+        },
+      ),
     },
-    '&.x-sliding-panel-at-start.x-sliding-panel-at-end': {
-      '.x-sliding-panel-fade': {
-        mask: 'none',
-      },
+    '&.sliding-panel-at-start.sliding-panel-at-end': {
+      mask: 'none',
     },
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts
index fcfccd3f4f..a1822cbe66 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts
@@ -11,7 +11,7 @@ import { slidingPanelFade } from './fade'
  */
 export function slidingPanel(helpers: TailwindHelpers) {
   return {
-    '.x-sliding-panel': {
+    '.sliding-panel': {
       ...deepMerge(slidingPanelDefault(), slidingPanelFade(helpers)),
     },
   }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts
index 04c50914f4..d7d850ca4d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts
@@ -14,17 +14,17 @@ import { suggestionGroupButtonRectangle } from './rectangle'
  */
 export function suggestionGroupButton(helpers: TailwindHelpers) {
   return {
-    '.x-suggestion-group-button': {
+    '.suggestion-group-button': {
       ...suggestionGroupButtonDefault(),
-      ...rename(
-        {
-          ...suggestionGroupButtonGhost(helpers),
-          ...suggestionGroupButtonRectangle(helpers),
-          ...suggestionGroupButtonLighter(),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...suggestionGroupButtonGhost(helpers),
+        ...suggestionGroupButtonRectangle(helpers),
+        ...suggestionGroupButtonLighter(),
+      },
+      { prefix: '.suggestion-group-button-' },
+    ),
     ...suggestionGroupLighterColors(helpers),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts
index 89282f9c75..f8c23968b6 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts
@@ -12,12 +12,12 @@ export function suggestionGroupLighterColors(helpers: TailwindHelpers) {
     mapColors(
       color => ({
         '--suggestion-group-button-color-50': color['50'],
-        '.x-suggestion-group-button-lighter:hover': {
+        '.suggestion-group-button-lighter:hover': {
           color: 'var(--suggestion-group-button-color-50)',
         },
       }),
       helpers,
     ),
-    { prefix: '.x-suggestion-group-' },
+    { prefix: '.suggestion-group-lighter-' },
   )
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/colors.ts
index f5f09c80f2..abaa471c26 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/colors.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/colors.ts
@@ -1,6 +1,5 @@
 import type { TailwindHelpers } from '../../../types'
-import { map, rename } from '@empathyco/x-utils'
-import { mapColors } from '../../utils/map-colors'
+import { mapColorsFlat } from '../../utils/map-colors'
 
 /**
  * Returns the `color` variants for component `suggestion group`.
@@ -9,17 +8,21 @@ import { mapColors } from '../../utils/map-colors'
  * @returns The {@link CssStyleOptions} for the variant.
  */
 export function suggestionGroupColors(helpers: TailwindHelpers) {
-  return mapColors(
-    color => ({
-      '--suggestion-group-color-75': color['75'],
-      color: 'var(--suggestion-group-color-75)',
-      ...rename(
-        map(color, (shadeName, shadeColor) => ({
-          color: shadeColor,
-        })),
-        { prefix: '&-' },
+  return mapColorsFlat((color, colorName) => {
+    return {
+      [`${colorName}`]: {
+        '--suggestion-group-color-75': color['75'],
+        color: color['75'],
+      },
+
+      ...Object.fromEntries(
+        Object.entries(color).map(([shadeName, shadeColor]) => [
+          `${colorName}-${shadeName}`,
+          {
+            color: shadeColor,
+          },
+        ]),
       ),
-    }),
-    helpers,
-  )
+    }
+  }, helpers)
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/default.ts
index d74e4c70ad..f689892449 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/default.ts
@@ -35,7 +35,7 @@ export function suggestionGroupDefault(helpers: TailwindHelpers) {
       textDecoration: 'underline',
     },
 
-    '.x-suggestion': {
+    '.suggestion': {
       color: 'currentColor',
       minHeight: 'inherit',
       fontSize: 'inherit',
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts
index cea54d20ee..51bfb4ff67 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts
@@ -14,17 +14,17 @@ import { suggestionGroupSizes } from './sizes'
  */
 export function suggestionGroup(helpers: TailwindHelpers) {
   return {
-    '.x-suggestion-group': {
+    '.suggestion-group': {
       ...suggestionGroupDefault(helpers),
-      ...rename(
-        {
-          ...suggestionGroupColors(helpers),
-          ...suggestionGroupSizes(helpers),
-          ...suggestionGroupGhost(helpers),
-          ...suggestionGroupOutlined(helpers),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...suggestionGroupColors(helpers),
+        ...suggestionGroupSizes(helpers),
+        ...suggestionGroupGhost(helpers),
+        ...suggestionGroupOutlined(helpers),
+      },
+      { prefix: '.suggestion-group-' },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/colors.ts
index d3a0eb972f..44c4273bcf 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/colors.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/colors.ts
@@ -1,6 +1,5 @@
 import type { TailwindHelpers } from '../../../types'
-import { map, rename } from '@empathyco/x-utils'
-import { mapColors } from '../../utils/map-colors'
+import { mapColorsFlat } from '../../utils/map-colors'
 
 /**
  * Returns the `color` variants for component `suggestion`.
@@ -9,16 +8,20 @@ import { mapColors } from '../../utils/map-colors'
  * @returns The {@link CssStyleOptions} for the variant.
  */
 export function suggestionColors(helpers: TailwindHelpers) {
-  return mapColors(
-    color => ({
-      color: color['75'],
-      ...rename(
-        map(color, (shadeName, shadeColor) => ({
-          color: shadeColor,
-        })),
-        { prefix: '&-' },
+  return mapColorsFlat((color, colorName) => {
+    return {
+      [`${colorName}`]: {
+        color: color['75'],
+      },
+
+      ...Object.fromEntries(
+        Object.entries(color).map(([shadeName, shadeColor]) => [
+          `${colorName}-${shadeName}`,
+          {
+            color: shadeColor,
+          },
+        ]),
       ),
-    }),
-    helpers,
-  )
+    }
+  }, helpers)
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts
index 961b66c85e..d299bd57c5 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts
@@ -14,17 +14,17 @@ import { suggestionSizes } from './sizes'
  */
 export function suggestion(helpers: TailwindHelpers) {
   return {
-    '.x-suggestion': {
+    '.suggestion': {
       ...suggestionDefault(helpers),
-      ...rename(
-        {
-          ...suggestionColors(helpers),
-          ...suggestionSizes(helpers),
-          ...suggestionOutlined(helpers),
-          ...suggestionGhost(helpers),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...suggestionColors(helpers),
+        ...suggestionSizes(helpers),
+        ...suggestionOutlined(helpers),
+        ...suggestionGhost(helpers),
+      },
+      { prefix: '.suggestion-' },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/default.ts
index 3d69f35fb2..df3019be42 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/default.ts
@@ -53,7 +53,7 @@ export function tagDefault(helpers: TailwindHelpers) {
     ...tagSizes(helpers).md,
     ...disabledStyles,
 
-    '&.x-selected': {
+    '&.selected': {
       borderColor: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
       borderWidth: theme('x.spacing.2'),
       color: theme('x.colors.neutral.90'),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/ghost.ts
index f074f375c1..773b416102 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/ghost.ts
@@ -33,7 +33,7 @@ export function tagGhost(helpers: TailwindHelpers) {
 
       ...disabledStyles,
 
-      '&.x-selected': {
+      '&.selected': {
         borderColor: 'transparent',
         color: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
         fontWeight: theme('x.fontWeight.bold'),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts
index f70b7ab10f..828cabf77c 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts
@@ -16,19 +16,19 @@ import { tagTight } from './tight'
  */
 export function tag(helpers: TailwindHelpers) {
   return {
-    '.x-tag': {
+    '.tag': {
       ...tagDefault(helpers),
-      ...rename(
-        {
-          ...tagSizes(helpers),
-          ...tagColors(helpers),
-          ...tagOutlined(helpers),
-          ...tagSolid(helpers),
-          ...tagGhost(helpers),
-          ...tagTight(helpers),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...tagSizes(helpers),
+        ...tagColors(helpers),
+        ...tagOutlined(helpers),
+        ...tagSolid(helpers),
+        ...tagGhost(helpers),
+        ...tagTight(helpers),
+      },
+      { prefix: '.tag-' },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/outlined.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/outlined.ts
index 10dab4161b..2091a543eb 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/outlined.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/outlined.ts
@@ -33,7 +33,7 @@ export function tagOutlined(helpers: TailwindHelpers) {
       ...hoverStyles,
       ...disabledStyles,
 
-      '&.x-selected': {
+      '&.selected': {
         backgroundColor: `var(--tag-color-25, ${theme('x.colors.neutral.10')})`,
         borderColor: `var(--tag-color-75, ${theme('x.colors.neutral.75')})`,
         borderWidth: theme('x.spacing.1'),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/solid.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/solid.ts
index 68616f6253..d3bc7135c4 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/solid.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/solid.ts
@@ -32,7 +32,7 @@ export function tagSolid(helpers: TailwindHelpers) {
 
       ...disabledStyles,
 
-      '&.x-selected': {
+      '&.selected': {
         backgroundColor: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
         borderColor: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
         color: theme('x.colors.neutral.0'),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/tight.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/tight.ts
index a253e3324f..d6fb532a05 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/tight.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/tight.ts
@@ -34,7 +34,7 @@ export function tagTight(helpers: TailwindHelpers) {
       ...hoverStyles,
       ...disabledStyles,
 
-      '&.x-selected': {
+      '&.selected': {
         borderColor: 'transparent',
         color: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
         fontWeight: theme('x.fontWeight.bold'),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts
index a4c8135bac..604c8718d1 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts
@@ -11,14 +11,14 @@ import { textSizes } from './sizes'
  */
 export function text1(helpers: TailwindHelpers) {
   return {
-    '.x-text1': {
+    '.text1': {
       ...textDefault(helpers),
-      ...rename(
-        {
-          ...textSizes(helpers),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...textSizes(helpers),
+      },
+      { prefix: '&.text1-' },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts
index 55f88294a3..f052ed60d2 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts
@@ -11,14 +11,14 @@ import { textSizes } from './sizes'
  */
 export function text2(helpers: TailwindHelpers) {
   return {
-    '.x-text2': {
+    '.text2': {
       ...textDefault(helpers),
-      ...rename(
-        {
-          ...textSizes(helpers),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...textSizes(helpers),
+      },
+      { prefix: '&.text2-' },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts
index fb02c37f9c..0ebda3620e 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts
@@ -11,14 +11,14 @@ import { titleSizes } from './sizes'
  */
 export function title1(helpers: TailwindHelpers) {
   return {
-    '.x-title1': {
+    '.title1': {
       ...titleDefault(helpers),
-      ...rename(
-        {
-          ...titleSizes(helpers),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...titleSizes(helpers),
+      },
+      { prefix: '.title1-' },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts
index 724e735597..f843c2f4bc 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts
@@ -11,14 +11,14 @@ import { titleSizes } from './sizes'
  */
 export function title2(helpers: TailwindHelpers) {
   return {
-    '.x-title2': {
+    '.title2': {
       ...titleDefault(helpers),
-      ...rename(
-        {
-          ...titleSizes(helpers),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...titleSizes(helpers),
+      },
+      { prefix: '.title2-' },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts
index 9f2fbc12e2..7c84e692ee 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts
@@ -11,14 +11,14 @@ import { titleSizes } from './sizes'
  */
 export function title3(helpers: TailwindHelpers) {
   return {
-    '.x-title3': {
+    '.title3': {
       ...titleDefault(helpers),
-      ...rename(
-        {
-          ...titleSizes(helpers),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...titleSizes(helpers),
+      },
+      { prefix: '.title3-' },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts
index 19068ebd27..036238f68d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts
@@ -11,14 +11,14 @@ import { titleSizes } from './sizes'
  */
 export function title4(helpers: TailwindHelpers) {
   return {
-    '.x-title4': {
+    '.title4': {
       ...titleDefault(helpers),
-      ...rename(
-        {
-          ...titleSizes(helpers),
-        },
-        { prefix: '&-' },
-      ),
     },
+    ...rename(
+      {
+        ...titleSizes(helpers),
+      },
+      { prefix: '.title4-' },
+    ),
   }
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts
index 54fc2d62ae..2cd3c75066 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts
@@ -16,23 +16,23 @@ export function dynamicLayoutContainer(helpers: TailwindHelpers) {
         ...rename(
           {
             mx: (value: any) => ({
-              '& > .x-layout-item': {
+              '& > .layout-item': {
                 '--x-margin-left': value,
                 '--x-margin-right': value,
               },
             }),
             ml: (value: any) => ({
-              '& > .x-layout-item': {
+              '& > .layout-item': {
                 '--x-margin-left': value,
               },
             }),
             mr: (value: any) => ({
-              '& > .x-layout-item': {
+              '& > .layout-item': {
                 '--x-margin-right': value,
               },
             }),
           },
-          { prefix: 'x-layout-container-' },
+          { prefix: '.layout-container-' },
         ),
       },
       (name, styles) => {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts
index 61ede2de9d..98e53354a4 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts
@@ -11,7 +11,7 @@ import type { TailwindHelpers } from '../types'
 export default function dynamicUtilities({ theme }: TailwindHelpers) {
   return {
     // TODO: replace this example styles with actual design styles
-    'font-util': {
+    '.font-util': {
       styles: (value: any) => ({
         fontSize: value,
       }),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts
index 4b32999d9d..e6a3473872 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts
@@ -1,55 +1,46 @@
+import type { PluginAPI } from 'tailwindcss/plugin'
 import type { TailwindHelpers } from '../types'
+
 import { forEach } from '@empathyco/x-utils'
 import plugin from 'tailwindcss/plugin'
 import components from './components'
+import { variables } from './components/variables'
 import dynamicComponents from './dynamic-components'
+
 import dynamicUtilities from './dynamic-utilities'
 import xTheme from './theme'
 import utilities from './utilities'
 
-/**
- * Defines the x-tailwind plugin as a Tailwind {@link plugin} that can be invoked passing a
- * configuration object to customize it. The plugin is bundled with generated static and dynamic
- * components and utilities, all based on the plugin's theme.
- *
- * @public
- */
-export default plugin.withOptions(
-  () => {
-    /**
-     * Registers the generated CSS for the components and utilities of the plugin to the
-     * respective Tailwind layer. It depends on the plugin's theme, affecting
-     * the color, spacing, etc... Of the styles generated in this step.
-     *
-     * @param helpers - The {@link TailwindHelpers}.
-     * @internal
-     */
-    return function (helpers: TailwindHelpers) {
-      /* Add components */
-      helpers.addComponents(components(helpers), { respectPrefix: false })
-      /* Add dynamic components */
-      forEach(dynamicComponents(helpers), (key, { styles, values }) => {
-        helpers.matchComponents(
-          { [key]: styles },
-          { respectPrefix: false, values: values ?? undefined },
-        )
-      })
-      /* Add dynamic utilities */
-      forEach(dynamicUtilities(helpers), (key, { styles, values }) => {
-        helpers.matchUtilities(
-          { [key]: styles },
-          { respectPrefix: false, values: values ?? undefined },
-        )
-      })
-      /* Add utilities */
-      helpers.addUtilities(utilities(helpers), { respectPrefix: false })
-      /* Add variant to selected */
-      helpers.addVariant('selected', '&.x-selected')
-    }
+function createHelpers(api: PluginAPI): TailwindHelpers & PluginAPI {
+  return api as TailwindHelpers & PluginAPI
+}
+
+const _xTailwindPlugin = plugin(
+  api => {
+    const helpers = createHelpers(api)
+
+    helpers.addBase({ ...variables(helpers) })
+    helpers.addComponents(components(helpers))
+
+    forEach(dynamicComponents(helpers), (key, { styles }) => {
+      helpers.addComponents({ [key]: styles })
+    })
+
+    forEach(dynamicUtilities(helpers), (key, { styles }) => {
+      helpers.addUtilities({ [key]: styles })
+    })
+
+    helpers.addUtilities(utilities(helpers))
+
+    helpers.addVariant('selected', '&.selected')
   },
-  () => {
-    return {
-      theme: { x: xTheme },
-    }
+  {
+    theme: {
+      x: xTheme,
+    },
   },
 )
+
+const xTailwindPlugin: unknown = _xTailwindPlugin
+
+export default xTailwindPlugin
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
index 494f856b56..062cd28734 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
@@ -1,5 +1,4 @@
-import type { CSSRuleObject } from 'tailwindcss/types/config'
-import type { TailwindHelpers } from '../types'
+import type { CSSRuleObject, TailwindHelpers } from '../types'
 
 /**
  * Default utility styles.
@@ -12,13 +11,13 @@ import type { TailwindHelpers } from '../types'
 export default function utilities({ theme }: TailwindHelpers) {
   return {
     // TODO: replace this example styles with actual design styles
-    '.x-border-large': {
+    '.border-large': {
       borderStyle: 'solid',
       borderWidth: theme('x.borderWidth.4'),
       borderColor: theme('x.colors.neutral.100'),
     },
     // This is here to not include it in the bundle if it is not being used
-    '.x-disable-icon-offset *': {
+    '.disable-icon-offset *': {
       '--enableIconOffset': 'var(--OFF)',
     },
   } as unknown as CSSRuleObject
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts
index 1b3de912f8..3440eb6812 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts
@@ -65,3 +65,20 @@ export function mapColors<T extends CssStyleOptions>(
     },
   )
 }
+
+export function mapColorsFlat<T extends CssStyleOptions>(
+  mapperFn: (color: ThemeColor, colorName: string) => Record<string, T>,
+  { theme }: TailwindHelpers,
+) {
+  const colors: Omit<ThemeColors, 'transparent' | 'current'> = theme('x.colors')
+
+  return Object.entries(colors).reduce(
+    (acc, [colorName, color]) => {
+      if (!['transparent', 'current'].includes(colorName)) {
+        Object.assign(acc, mapperFn(color as ThemeColor, colorName))
+      }
+      return acc
+    },
+    {} as Record<string, T>,
+  )
+}
diff --git a/packages/x-tailwindcss/tsconfig.json b/packages/x-tailwindcss/tsconfig.json
index 070c4a19ed..17a9265b8f 100644
--- a/packages/x-tailwindcss/tsconfig.json
+++ b/packages/x-tailwindcss/tsconfig.json
@@ -4,7 +4,10 @@
     "lib": ["esnext", "dom"],
     "module": "esnext",
     "moduleResolution": "node",
-    "types": ["tailwindcss"],
+    "paths": {
+      "tailwindcss/plugin": ["./node_modules/tailwindcss/dist/plugin.d.mts"]
+    },
+    "types": [],
     "strict": true,
     "declaration": true,
     "importHelpers": true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bec7caf1a8..f05ab23c19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     devDependencies:
       '@empathyco/eslint-config':
         specifier: 1.8.0
-        version: 1.8.0(@typescript-eslint/utils@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@vue/compiler-sfc@3.5.26)(jiti@1.21.7)(typescript@5.9.3)
+        version: 1.8.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.26)(jiti@2.6.1)(typescript@5.9.3)
       colors:
         specifier: 1.4.0
         version: 1.4.0
@@ -258,7 +258,7 @@ importers:
         version: 3.0.1(vue@3.5.26(typescript@5.9.3))
       vue-tsc:
         specifier: ~3.2.1
-        version: 3.2.1(typescript@5.9.3)
+        version: 3.2.2(typescript@5.9.3)
     devDependencies:
       '@babel/preset-env':
         specifier: 7.28.5
@@ -281,6 +281,12 @@ importers:
       '@microsoft/api-extractor':
         specifier: 7.55.2
         version: 7.55.2(@types/node@24.10.4)
+      '@tailwindcss/postcss':
+        specifier: 4.1.17
+        version: 4.1.17
+      '@tailwindcss/vite':
+        specifier: 4.1.17
+        version: 4.1.17(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       '@testing-library/jest-dom':
         specifier: 6.9.1
         version: 6.9.1
@@ -295,16 +301,13 @@ importers:
         version: 24.10.4
       '@vitejs/plugin-vue':
         specifier: 5.2.4
-        version: 5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+        version: 5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       '@vue/test-utils':
         specifier: 2.4.6
         version: 2.4.6
       '@vue/vue3-jest':
         specifier: 29.2.6
         version: 29.2.6(@babel/core@7.28.3)(babel-jest@29.7.0(@babel/core@7.28.3))(jest@29.7.0(@types/node@24.10.4)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
-      autoprefixer:
-        specifier: 10.4.23
-        version: 10.4.23(postcss@8.5.6)
       convert-source-map:
         specifier: 2.0.0
         version: 2.0.0
@@ -323,15 +326,6 @@ importers:
       jest-scss-transform:
         specifier: 1.0.4
         version: 1.0.4(babel-jest@29.7.0(@babel/core@7.28.3))
-      postcss:
-        specifier: 8.5.6
-        version: 8.5.6
-      postcss-dir-pseudo-class:
-        specifier: 7.0.2
-        version: 7.0.2(postcss@8.5.6)
-      postcss-logical:
-        specifier: 4.0.2
-        version: 4.0.2
       rimraf:
         specifier: 3.0.2
         version: 3.0.2
@@ -360,8 +354,8 @@ importers:
         specifier: 2.1.3
         version: 2.1.3
       tailwindcss:
-        specifier: 3.4.19
-        version: 3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))
+        specifier: 4.1.17
+        version: 4.1.17
       ts-jest:
         specifier: 29.4.6
         version: 29.4.6(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.28.3))(esbuild@0.27.2)(jest-util@29.7.0)(jest@29.7.0(@types/node@24.10.4)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(typescript@5.9.3)
@@ -373,10 +367,10 @@ importers:
         version: 5.9.3
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
       vite-plugin-vue-inspector:
         specifier: 5.3.2
-        version: 5.3.2(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 5.3.2(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       vue:
         specifier: 3.5.26
         version: 3.5.26(typescript@5.9.3)
@@ -427,18 +421,18 @@ importers:
       '@rollup/plugin-commonjs':
         specifier: 29.0.0
         version: 29.0.0(rollup@4.54.0)
+      '@tailwindcss/postcss':
+        specifier: 4.1.17
+        version: 4.1.17
+      '@tailwindcss/vite':
+        specifier: 4.1.17
+        version: 4.1.17(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@types/tailwindcss':
+        specifier: ^3.1.0
+        version: 3.1.0
       '@vitejs/plugin-vue':
         specifier: 5.2.4
-        version: 5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
-      autoprefixer:
-        specifier: 10.4.23
-        version: 10.4.23(postcss@8.5.6)
-      postcss:
-        specifier: 8.5.6
-        version: 8.5.6
-      postcss-import:
-        specifier: 16.1.1
-        version: 16.1.1(postcss@8.5.6)
+        version: 5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       rimraf:
         specifier: 3.0.2
         version: 3.0.2
@@ -449,17 +443,17 @@ importers:
         specifier: 0.36.0
         version: 0.36.0(rollup@4.54.0)(typescript@5.9.3)
       tailwindcss:
-        specifier: 3.4.19
-        version: 3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))
+        specifier: 4.1.17
+        version: 4.1.17
       ts-jest:
         specifier: 29.4.6
-        version: 29.4.6(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.28.3))(esbuild@0.27.2)(jest-util@29.7.0)(jest@29.7.0(@types/node@24.10.4)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(typescript@5.9.3)
+        version: 29.4.6(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.28.3))(jest-util@29.7.0)(jest@29.7.0(@types/node@24.10.4))(typescript@5.9.3)
       typescript:
         specifier: 5.9.3
         version: 5.9.3
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+        version: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
       vue:
         specifier: 3.5.26
         version: 3.5.26(typescript@5.9.3)
@@ -632,8 +626,16 @@ packages:
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.28.5':
-    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
+  '@babel/code-frame@7.28.6':
+    resolution: {integrity: sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.28.0':
+    resolution: {integrity: sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.28.6':
+    resolution: {integrity: sha512-2lfu57JtzctfIrcGMz992hyLlByuzgIk58+hhGCxjKZ3rWI82NnVLjXcaTqkI2NvlcvOskZaiZ5kjUALo3Lpxg==}
     engines: {node: '>=6.9.0'}
 
   '@babel/core@7.28.3':
@@ -644,8 +646,8 @@ packages:
     resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.28.5':
-    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
+  '@babel/generator@7.28.6':
+    resolution: {integrity: sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-annotate-as-pure@7.27.3':
@@ -656,6 +658,10 @@ packages:
     resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-create-class-features-plugin@7.28.3':
     resolution: {integrity: sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==}
     engines: {node: '>=6.9.0'}
@@ -681,6 +687,10 @@ packages:
     resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-imports@7.27.1':
     resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
     engines: {node: '>=6.9.0'}
@@ -699,6 +709,10 @@ packages:
     resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-remap-async-to-generator@7.27.1':
     resolution: {integrity: sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==}
     engines: {node: '>=6.9.0'}
@@ -711,6 +725,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/helper-replace-supers@7.28.6':
+    resolution: {integrity: sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
     engines: {node: '>=6.9.0'}
@@ -740,6 +760,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.28.6':
+    resolution: {integrity: sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5':
     resolution: {integrity: sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==}
     engines: {node: '>=6.9.0'}
@@ -915,8 +940,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoping@7.28.5':
-    resolution: {integrity: sha512-45DmULpySVvmq9Pj3X9B+62Xe+DJGov27QravQJU1LLcapR6/10i+gYVAucGGJpHBp5mYxIMK4nDAT/QDLr47g==}
+  '@babel/plugin-transform-block-scoping@7.28.6':
+    resolution: {integrity: sha512-tt/7wOtBmwHPNMPu7ax4pdPz6shjFrmHDghvNC+FG9Qvj7D6mJcoRQIF5dy4njmxR941l6rgtvfSB2zX3VlUIw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -933,8 +958,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.12.0
 
-  '@babel/plugin-transform-classes@7.28.4':
-    resolution: {integrity: sha512-cFOlhIYPBv/iBoc+KS3M6et2XPtbT2HiCRfBXWtfpc9OAyostldxIf9YAYB6ypURBBbx+Qv6nyrLzASfJe+hBA==}
+  '@babel/plugin-transform-classes@7.28.6':
+    resolution: {integrity: sha512-EF5KONAqC5zAqT783iMGuM2ZtmEBy+mJMOKl2BCvPZ2lVrwvXnB6o+OBWCS+CoeCCpVRF2sA2RBKUxvT8tQT5Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -981,8 +1006,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-exponentiation-operator@7.28.5':
-    resolution: {integrity: sha512-D4WIMaFtwa2NizOp+dnoFjRez/ClKiC2BqqImwKd1X28nqBtZEyCYJ2ozQrrzlxAFrcrjxo39S6khe9RNDlGzw==}
+  '@babel/plugin-transform-exponentiation-operator@7.28.6':
+    resolution: {integrity: sha512-WitabqiGjV/vJ0aPOLSFfNY1u9U3R7W36B03r5I2KoNix+a3sOhJ3pKFB3R5It9/UiK78NiO0KE9P21cMhlPkw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1017,8 +1042,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-logical-assignment-operators@7.28.5':
-    resolution: {integrity: sha512-axUuqnUTBuXyHGcJEVVh9pORaN6wC5bYfE7FGzPiaWa3syib9m7g+/IT/4VgCOe2Upef43PHzeAvcrVek6QuuA==}
+  '@babel/plugin-transform-logical-assignment-operators@7.28.6':
+    resolution: {integrity: sha512-+anKKair6gpi8VsM/95kmomGNMD0eLz1NQ8+Pfw5sAwWH9fGYXT50E55ZpV0pHUHWf6IUTWPM+f/7AAff+wr9A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1077,8 +1102,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-rest-spread@7.28.4':
-    resolution: {integrity: sha512-373KA2HQzKhQCYiRVIRr+3MjpCObqzDlyrM6u4I201wL8Mp2wHf7uB8GhDwis03k2ti8Zr65Zyyqs1xOxUF/Ew==}
+  '@babel/plugin-transform-object-rest-spread@7.28.6':
+    resolution: {integrity: sha512-5rh+JR4JBC4pGkXLAcYdLHZjXudVxWMXbB6u6+E9lRL5TrGVbHt1TjxGbZ8CkmYw9zjkB7jutzOROArsqtncEA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1095,8 +1120,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-chaining@7.28.5':
-    resolution: {integrity: sha512-N6fut9IZlPnjPwgiQkXNhb+cT8wQKFlJNqcZkWlcTqkcqx6/kU4ynGmLFoa4LViBSirn05YAwk+sQBbPfxtYzQ==}
+  '@babel/plugin-transform-optional-chaining@7.28.6':
+    resolution: {integrity: sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1125,8 +1150,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-regenerator@7.28.4':
-    resolution: {integrity: sha512-+ZEdQlBoRg9m2NnzvEeLgtvBMO4tkFBw5SQIUgLICgTrumLoU7lr+Oghi6km2PFj+dbUt2u1oby2w3BDO9YQnA==}
+  '@babel/plugin-transform-regenerator@7.28.6':
+    resolution: {integrity: sha512-eZhoEZHYQLL5uc1gS5e9/oTknS0sSSAtd5TkKMUp3J+S/CaUjagc0kOUPsEbDmMeva0nC3WWl4SxVY6+OBuxfw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1222,18 +1247,26 @@ packages:
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/traverse@7.28.3':
     resolution: {integrity: sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.28.5':
-    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
+  '@babel/traverse@7.28.6':
+    resolution: {integrity: sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg==}
     engines: {node: '>=6.9.0'}
 
   '@babel/types@7.28.5':
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.28.6':
+    resolution: {integrity: sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==}
+    engines: {node: '>=6.9.0'}
+
   '@badeball/cypress-cucumber-preprocessor@23.2.1':
     resolution: {integrity: sha512-yMEQCdjxhCww+mGhb/xvxlHNYUpsm2oiDuG3xb236+LwNFhfpT/RckvNktip44ETEZKSZe2xqxQDxOYKyXJctA==}
     engines: {node: '>=20.0.0'}
@@ -1353,11 +1386,11 @@ packages:
     resolution: {integrity: sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ==}
     engines: {node: '>=18'}
 
-  '@emnapi/core@1.8.1':
-    resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
+  '@emnapi/core@1.7.1':
+    resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
 
-  '@emnapi/runtime@1.8.1':
-    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
+  '@emnapi/runtime@1.7.1':
+    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
 
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
@@ -1373,10 +1406,6 @@ packages:
     resolution: {integrity: sha512-YAdE/IJSpwbOTiaURNCKECdAwqrJuFiZhylmesBcIRawtYKnBR2wxPhoIewMg+Yu+QuYvHfJNReWpoxGBKOChA==}
     engines: {node: '>=18'}
 
-  '@es-joy/jsdoccomment@0.78.0':
-    resolution: {integrity: sha512-rQkU5u8hNAq2NVRzHnIUUvR6arbO0b6AOlvpTNS48CkiKSn/xtNfOzBK23JE4SiW89DgvU7GtxLVgV4Vn2HBAw==}
-    engines: {node: '>=20.11.0'}
-
   '@esbuild/aix-ppc64@0.25.9':
     resolution: {integrity: sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==}
     engines: {node: '>=18'}
@@ -1922,6 +1951,9 @@ packages:
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -2186,80 +2218,80 @@ packages:
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
-  '@parcel/watcher-android-arm64@2.5.1':
-    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+  '@parcel/watcher-android-arm64@2.5.4':
+    resolution: {integrity: sha512-hoh0vx4v+b3BNI7Cjoy2/B0ARqcwVNrzN/n7DLq9ZB4I3lrsvhrkCViJyfTj/Qi5xM9YFiH4AmHGK6pgH1ss7g==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [android]
 
-  '@parcel/watcher-darwin-arm64@2.5.1':
-    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+  '@parcel/watcher-darwin-arm64@2.5.4':
+    resolution: {integrity: sha512-kphKy377pZiWpAOyTgQYPE5/XEKVMaj6VUjKT5VkNyUJlr2qZAn8gIc7CPzx+kbhvqHDT9d7EqdOqRXT6vk0zw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@parcel/watcher-darwin-x64@2.5.1':
-    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+  '@parcel/watcher-darwin-x64@2.5.4':
+    resolution: {integrity: sha512-UKaQFhCtNJW1A9YyVz3Ju7ydf6QgrpNQfRZ35wNKUhTQ3dxJ/3MULXN5JN/0Z80V/KUBDGa3RZaKq1EQT2a2gg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@parcel/watcher-freebsd-x64@2.5.1':
-    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+  '@parcel/watcher-freebsd-x64@2.5.4':
+    resolution: {integrity: sha512-Dib0Wv3Ow/m2/ttvLdeI2DBXloO7t3Z0oCp4bAb2aqyqOjKPPGrg10pMJJAQ7tt8P4V2rwYwywkDhUia/FgS+Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  '@parcel/watcher-linux-arm-glibc@2.5.1':
-    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+  '@parcel/watcher-linux-arm-glibc@2.5.4':
+    resolution: {integrity: sha512-I5Vb769pdf7Q7Sf4KNy8Pogl/URRCKu9ImMmnVKYayhynuyGYMzuI4UOWnegQNa2sGpsPSbzDsqbHNMyeyPCgw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
 
-  '@parcel/watcher-linux-arm-musl@2.5.1':
-    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+  '@parcel/watcher-linux-arm-musl@2.5.4':
+    resolution: {integrity: sha512-kGO8RPvVrcAotV4QcWh8kZuHr9bXi9a3bSZw7kFarYR0+fGliU7hd/zevhjw8fnvIKG3J9EO5G6sXNGCSNMYPQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
-    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+  '@parcel/watcher-linux-arm64-glibc@2.5.4':
+    resolution: {integrity: sha512-KU75aooXhqGFY2W5/p8DYYHt4hrjHZod8AhcGAmhzPn/etTa+lYCDB2b1sJy3sWJ8ahFVTdy+EbqSBvMx3iFlw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
-    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+  '@parcel/watcher-linux-arm64-musl@2.5.4':
+    resolution: {integrity: sha512-Qx8uNiIekVutnzbVdrgSanM+cbpDD3boB1f8vMtnuG5Zau4/bdDbXyKwIn0ToqFhIuob73bcxV9NwRm04/hzHQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
-    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+  '@parcel/watcher-linux-x64-glibc@2.5.4':
+    resolution: {integrity: sha512-UYBQvhYmgAv61LNUn24qGQdjtycFBKSK3EXr72DbJqX9aaLbtCOO8+1SkKhD/GNiJ97ExgcHBrukcYhVjrnogA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-musl@2.5.1':
-    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+  '@parcel/watcher-linux-x64-musl@2.5.4':
+    resolution: {integrity: sha512-YoRWCVgxv8akZrMhdyVi6/TyoeeMkQ0PGGOf2E4omODrvd1wxniXP+DBynKoHryStks7l+fDAMUBRzqNHrVOpg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-win32-arm64@2.5.1':
-    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+  '@parcel/watcher-win32-arm64@2.5.4':
+    resolution: {integrity: sha512-iby+D/YNXWkiQNYcIhg8P5hSjzXEHaQrk2SLrWOUD7VeC4Ohu0WQvmV+HDJokZVJ2UjJ4AGXW3bx7Lls9Ln4TQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  '@parcel/watcher-win32-ia32@2.5.1':
-    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+  '@parcel/watcher-win32-ia32@2.5.4':
+    resolution: {integrity: sha512-vQN+KIReG0a2ZDpVv8cgddlf67J8hk1WfZMMP7sMeZmJRSmEax5xNDNWKdgqSe2brOKTQQAs3aCCUal2qBHAyg==}
     engines: {node: '>= 10.0.0'}
     cpu: [ia32]
     os: [win32]
 
-  '@parcel/watcher-win32-x64@2.5.1':
-    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+  '@parcel/watcher-win32-x64@2.5.4':
+    resolution: {integrity: sha512-3A6efb6BOKwyw7yk9ro2vus2YTt2nvcd56AuzxdMiVOxL9umDyN5PKkKfZ/gZ9row41SjVmTVQNWQhaRRGpOKw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
@@ -2268,8 +2300,8 @@ packages:
     resolution: {integrity: sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==}
     engines: {node: '>= 10.0.0'}
 
-  '@parcel/watcher@2.5.1':
-    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+  '@parcel/watcher@2.5.4':
+    resolution: {integrity: sha512-WYa2tUVV5HiArWPB3ydlOc4R2ivq0IDrlqhMi3l7mVsFEXNcTfxYFPIHXHXIh/ca/y/V5N4E1zecyxdIBjYnkQ==}
     engines: {node: '>= 10.0.0'}
 
   '@pkgjs/parseargs@0.11.0':
@@ -2476,6 +2508,99 @@ packages:
     peerDependencies:
       eslint: '>=9.0.0'
 
+  '@tailwindcss/node@4.1.17':
+    resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    resolution: {integrity: sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    resolution: {integrity: sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    resolution: {integrity: sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    resolution: {integrity: sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    resolution: {integrity: sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    resolution: {integrity: sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.17':
+    resolution: {integrity: sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.17':
+    resolution: {integrity: sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==}
+
+  '@tailwindcss/vite@4.1.17':
+    resolution: {integrity: sha512-4+9w8ZHOiGnpcGI6z1TVVfWaX/koK7fKeSYF3qlYg2xpBtbteP2ddBxiarL+HVgfSJGeK5RIxRQmKm4rTJJAwA==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
   '@teppeis/multimaps@3.0.0':
     resolution: {integrity: sha512-ID7fosbc50TbT0MK0EG12O+gAP3W3Aa/Pz4DaTtQtEvlc9Odaqi0de+xuZ7Li2GtK4HzEX7IuRWS/JmZLksR3Q==}
     engines: {node: '>=14'}
@@ -2610,6 +2735,10 @@ packages:
   '@types/strip-json-comments@0.0.30':
     resolution: {integrity: sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==}
 
+  '@types/tailwindcss@3.1.0':
+    resolution: {integrity: sha512-JxPzrm609hzvF4nmOI3StLjbBEP3WWQxDDJESqR1nh94h7gyyy3XSl0hn5RBMJ9mPudlLjtaXs5YEBtLw7CnPA==}
+    deprecated: This is a stub types definition. tailwindcss provides its own type definitions, so you do not need this installed.
+
   '@types/tmp@0.2.6':
     resolution: {integrity: sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==}
 
@@ -2634,63 +2763,63 @@ packages:
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
-  '@typescript-eslint/eslint-plugin@8.51.0':
-    resolution: {integrity: sha512-XtssGWJvypyM2ytBnSnKtHYOGT+4ZwTnBVl36TA4nRO2f4PRNGz5/1OszHzcZCvcBMh+qb7I06uoCmLTRdR9og==}
+  '@typescript-eslint/eslint-plugin@8.49.0':
+    resolution: {integrity: sha512-JXij0vzIaTtCwu6SxTh8qBc66kmf1xs7pI4UOiMDFVct6q86G0Zs7KRcEoJgY3Cav3x5Tq0MF5jwgpgLqgKG3A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.51.0
+      '@typescript-eslint/parser': ^8.49.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.51.0':
-    resolution: {integrity: sha512-3xP4XzzDNQOIqBMWogftkwxhg5oMKApqY0BAflmLZiFYHqyhSOxv/cd/zPQLTcCXr4AkaKb25joocY0BD1WC6A==}
+  '@typescript-eslint/parser@8.49.0':
+    resolution: {integrity: sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.51.0':
-    resolution: {integrity: sha512-Luv/GafO07Z7HpiI7qeEW5NW8HUtZI/fo/kE0YbtQEFpJRUuR0ajcWfCE5bnMvL7QQFrmT/odMe8QZww8X2nfQ==}
+  '@typescript-eslint/project-service@8.49.0':
+    resolution: {integrity: sha512-/wJN0/DKkmRUMXjZUXYZpD1NEQzQAAn9QWfGwo+Ai8gnzqH7tvqS7oNVdTjKqOcPyVIdZdyCMoqN66Ia789e7g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.51.0':
-    resolution: {integrity: sha512-JhhJDVwsSx4hiOEQPeajGhCWgBMBwVkxC/Pet53EpBVs7zHHtayKefw1jtPaNRXpI9RA2uocdmpdfE7T+NrizA==}
+  '@typescript-eslint/scope-manager@8.49.0':
+    resolution: {integrity: sha512-npgS3zi+/30KSOkXNs0LQXtsg9ekZ8OISAOLGWA/ZOEn0ZH74Ginfl7foziV8DT+D98WfQ5Kopwqb/PZOaIJGg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.51.0':
-    resolution: {integrity: sha512-Qi5bSy/vuHeWyir2C8u/uqGMIlIDu8fuiYWv48ZGlZ/k+PRPHtaAu7erpc7p5bzw2WNNSniuxoMSO4Ar6V9OXw==}
+  '@typescript-eslint/tsconfig-utils@8.49.0':
+    resolution: {integrity: sha512-8prixNi1/6nawsRYxet4YOhnbW+W9FK/bQPxsGB1D3ZrDzbJ5FXw5XmzxZv82X3B+ZccuSxo/X8q9nQ+mFecWA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.51.0':
-    resolution: {integrity: sha512-0XVtYzxnobc9K0VU7wRWg1yiUrw4oQzexCG2V2IDxxCxhqBMSMbjB+6o91A+Uc0GWtgjCa3Y8bi7hwI0Tu4n5Q==}
+  '@typescript-eslint/type-utils@8.49.0':
+    resolution: {integrity: sha512-KTExJfQ+svY8I10P4HdxKzWsvtVnsuCifU5MvXrRwoP2KOlNZ9ADNEWWsQTJgMxLzS5VLQKDjkCT/YzgsnqmZg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.51.0':
-    resolution: {integrity: sha512-TizAvWYFM6sSscmEakjY3sPqGwxZRSywSsPEiuZF6d5GmGD9Gvlsv0f6N8FvAAA0CD06l3rIcWNbsN1e5F/9Ag==}
+  '@typescript-eslint/types@8.49.0':
+    resolution: {integrity: sha512-e9k/fneezorUo6WShlQpMxXh8/8wfyc+biu6tnAqA81oWrEic0k21RHzP9uqqpyBBeBKu4T+Bsjy9/b8u7obXQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.51.0':
-    resolution: {integrity: sha512-1qNjGqFRmlq0VW5iVlcyHBbCjPB7y6SxpBkrbhNWMy/65ZoncXCEPJxkRZL8McrseNH6lFhaxCIaX+vBuFnRng==}
+  '@typescript-eslint/typescript-estree@8.49.0':
+    resolution: {integrity: sha512-jrLdRuAbPfPIdYNppHJ/D0wN+wwNfJ32YTAm10eJVsFmrVpXQnDWBn8niCSMlWjvml8jsce5E/O+86IQtTbJWA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.51.0':
-    resolution: {integrity: sha512-11rZYxSe0zabiKaCP2QAwRf/dnmgFgvTmeDTtZvUvXG3UuAdg/GU02NExmmIXzz3vLGgMdtrIosI84jITQOxUA==}
+  '@typescript-eslint/utils@8.49.0':
+    resolution: {integrity: sha512-N3W7rJw7Rw+z1tRsHZbK395TWSYvufBXumYtEGzypgMUthlg0/hmCImeA8hgO2d2G4pd7ftpxxul2J8OdtdaFA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.51.0':
-    resolution: {integrity: sha512-mM/JRQOzhVN1ykejrvwnBRV3+7yTKK8tVANVN3o1O0t0v7o+jqdVu9crPy5Y9dov15TJk/FTIgoUGHrTOVL3Zg==}
+  '@typescript-eslint/visitor-keys@8.49.0':
+    resolution: {integrity: sha512-LlKaciDe3GmZFphXIc79THF/YYBugZ7FS1pO581E/edlVVNbZKDy93evqmrfQ9/Y4uN0vVhX4iuchq26mK/iiA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@unrs/resolver-binding-android-arm-eabi@1.11.1':
@@ -2795,8 +2924,8 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
-  '@vitest/eslint-plugin@1.6.5':
-    resolution: {integrity: sha512-+wKYGmvXQJjq58qBx/AwiZr5bFfMiWBdgHViSQoFW/+wl5MQhJeOGP/3HM7GO7W1+AoiW9Gcyy2Hdwcao4LnfQ==}
+  '@vitest/eslint-plugin@1.5.2':
+    resolution: {integrity: sha512-2t1F2iecXB/b1Ox4U137lhD3chihEE3dRVtu3qMD35tc6UqUjg1VGRJoS1AkFKwpT8zv8OQInzPQO06hrRkeqw==}
     engines: {node: '>=18'}
     peerDependencies:
       eslint: '>=8.57.0'
@@ -2863,8 +2992,8 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
-  '@vue/language-core@3.2.1':
-    resolution: {integrity: sha512-g6oSenpnGMtpxHGAwKuu7HJJkNZpemK/zg3vZzZbJ6cnnXq1ssxuNrXSsAHYM3NvH8p4IkTw+NLmuxyeYz4r8A==}
+  '@vue/language-core@3.2.2':
+    resolution: {integrity: sha512-5DAuhxsxBN9kbriklh3Q5AMaJhyOCNiQJvCskN9/30XOpdLiqZU9Q+WvjArP17ubdGEyZtBzlIeG5nIjEbNOrQ==}
 
   '@vue/reactivity@3.5.26':
     resolution: {integrity: sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ==}
@@ -3149,13 +3278,6 @@ packages:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
     engines: {node: '>= 4.0.0'}
 
-  autoprefixer@10.4.23:
-    resolution: {integrity: sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -3262,6 +3384,11 @@ packages:
   browser-stdout@1.3.1:
     resolution: {integrity: sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==}
 
+  browserslist@4.25.3:
+    resolution: {integrity: sha512-cDGv1kkDI4/0e5yON9yM5G/0A5u8sf5TnmdX5C9qHzI9PPu++sQ9zjm1k9NiOrf3riY4OkK0zSGqfvJyJsgCBQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
   browserslist@4.28.1:
     resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -3329,10 +3456,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase-keys@6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
     engines: {node: '>=8'}
@@ -3348,6 +3471,9 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
+  caniuse-lite@1.0.30001737:
+    resolution: {integrity: sha512-BiloLiXtQNrY5UyF0+1nSJLXUENuhka2pzy2Fx5pGxqavdrxSCW4U6Pn/PoG3Efspi2frRbHpBV2XsrPE6EDlw==}
+
   caniuse-lite@1.0.30001760:
     resolution: {integrity: sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==}
 
@@ -3549,10 +3675,6 @@ packages:
     resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
     engines: {node: '>=20'}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   commander@6.2.1:
     resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
     engines: {node: '>= 6'}
@@ -3912,10 +4034,9 @@ packages:
     resolution: {integrity: sha512-rlpvsxUtM0PQvy9iZe640/IWwWYyBsTApREbA1pHOpmOUIl9MkP/U4z7vTtg4Oaojvqhxt7sdufnT0EzGaR31g==}
     engines: {node: '>=4'}
 
-  detect-libc@1.0.3:
-    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
-    engines: {node: '>=0.10'}
-    hasBin: true
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
 
   detect-newline@3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
@@ -3967,9 +4088,6 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff-sequences@27.5.1:
     resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -3994,9 +4112,6 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   doctypes@1.1.0:
     resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
 
@@ -4059,6 +4174,9 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
+  electron-to-chromium@1.5.209:
+    resolution: {integrity: sha512-Xoz0uMrim9ZETCQt8UgM5FxQF9+imA7PBpokoGcZloA1uw2LeHzTlip5cb5KOAsXZLjh/moN2vReN3ZjJmjI9A==}
+
   electron-to-chromium@1.5.267:
     resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
 
@@ -4227,8 +4345,8 @@ packages:
     peerDependencies:
       eslint: '*'
 
-  eslint-plugin-command@3.4.0:
-    resolution: {integrity: sha512-EW4eg/a7TKEhG0s5IEti72kh3YOTlnhfFNuctq5WnB1fst37/IHTd5OkD+vnlRf3opTvUcSRihAateP6bT5ZcA==}
+  eslint-plugin-command@3.3.1:
+    resolution: {integrity: sha512-fBVTXQ2y48TVLT0+4A6PFINp7GcdIailHAXbvPBixE7x+YpYnNQhFZxTdvnb+aWk+COgNebQKen/7m4dmgyWAw==}
     peerDependencies:
       eslint: '*'
 
@@ -4325,8 +4443,8 @@ packages:
       '@typescript-eslint/parser':
         optional: true
 
-  eslint-plugin-yml@1.19.1:
-    resolution: {integrity: sha512-bYkOxyEiXh9WxUhVYPELdSHxGG5pOjCSeJOVkfdIyj6tuiHDxrES2WAW1dBxn3iaZQey57XflwLtCYRcNPOiOg==}
+  eslint-plugin-yml@1.19.0:
+    resolution: {integrity: sha512-S+4GbcCWksFKAvFJtf0vpdiCkZZvDJCV4Zsi9ahmYkYOYcf+LRqqzvzkb/ST7vTYV6sFwXOvawzYyL/jFT2nQA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
@@ -4590,9 +4708,6 @@ packages:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
 
-  fraction.js@5.3.4:
-    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
-
   from@0.1.7:
     resolution: {integrity: sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==}
 
@@ -5430,8 +5545,8 @@ packages:
       node-notifier:
         optional: true
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
   jju@1.4.0:
@@ -5482,10 +5597,6 @@ packages:
     resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
     engines: {node: '>=12.0.0'}
 
-  jsdoc-type-pratt-parser@7.0.0:
-    resolution: {integrity: sha512-c7YbokssPOSHmqTbSAmTtnVgAVa/7lumWNYqomgd5KOMyPrRve2anx6lonfOsXEQacqF9FKVUj7bLg4vRSvdYA==}
-    engines: {node: '>=20.0.0'}
-
   jsdom@20.0.3:
     resolution: {integrity: sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==}
     engines: {node: '>=14'}
@@ -5617,14 +5728,80 @@ packages:
     resolution: {integrity: sha512-mMntrhVwut5prP4rJ228eEbEyvIzLWhqFuY90j5QeXBCTT2pWSMno7Yo2S2qplPUr02zPurGH4heGLZ+wORczg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  lightningcss-android-arm64@1.30.2:
+    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
+    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.2:
+    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.2:
+    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.2:
+    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.2:
+    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
-
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -6153,6 +6330,9 @@ packages:
   node-int64@0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
 
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+
   node-releases@2.0.27:
     resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
@@ -6295,10 +6475,6 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -6514,9 +6690,6 @@ packages:
   performance-now@2.1.0:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
 
-  picocolors@0.2.1:
-    resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -6586,12 +6759,6 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-dir-pseudo-class@7.0.2:
-    resolution: {integrity: sha512-cMnslilYxBf9k3qejnovrUONZx1rXeUZJw06fgIUBzABJe3D2LiLL5WAER7Imt3nrkaIgG05XZBztueLEf5P8w==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss: ^8.4
-
   postcss-discard-comments@5.1.2:
     resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -6616,40 +6783,6 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-import@16.1.1:
-    resolution: {integrity: sha512-2xVS1NCZAfjtVdvXiyegxzJ447GyqCeEI5V7ApgQVOWnros1p5lGNovJNapwPpMombyFBfqDwt7AD3n2l0KOfQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
-  postcss-logical@4.0.2:
-    resolution: {integrity: sha512-tlX1n19np6/JznvyymZM6SIe0FymD5Ngwcg2j825vNKhADu0p1PTgEmsCjakCbvn78kaIFzYTI32NpgOEwgifQ==}
-    engines: {node: '>=8.0.0'}
-
   postcss-merge-longhand@5.1.7:
     resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -6710,12 +6843,6 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-normalize-charset@5.1.0:
     resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -6817,9 +6944,9 @@ packages:
     peerDependencies:
       postcss: ^8.2.9
 
-  postcss@7.0.39:
-    resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==}
-    engines: {node: '>=6.0.0'}
+  postcss@8.4.12:
+    resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==}
+    engines: {node: ^10 || ^12 || >=14}
 
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
@@ -7065,9 +7192,6 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   read-cmd-shim@3.0.0:
     resolution: {integrity: sha512-KQDVjGqhZk92PPNRj9ZEXEuqg8bUobSKRw+q0YQ3TKI5xkce7bUJobL4Z/OtiEbAAv70yEpYIXp4iQ9L8oPVog==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -7671,11 +7795,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -7704,8 +7823,8 @@ packages:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  systeminformation@5.29.1:
-    resolution: {integrity: sha512-bBroZc2we1tpgTBKZL7JguBdObC1OY+eXAoEBdsTp3utfcCa8+jUf+Wq/intTCJmiKJcuLEPsjCU6uMye0qvsQ==}
+  systeminformation@5.30.3:
+    resolution: {integrity: sha512-NgHJUpA+y7j4asLQa9jgBt+Eb2piyQIXQ+YjOyd2K0cHNwbNJ6I06F5afOqOiaCuV/wrEyGrb0olg4aFLlJD+A==}
     engines: {node: '>=8.0.0'}
     os: [darwin, linux, win32, freebsd, openbsd, netbsd, sunos, android]
     hasBin: true
@@ -7714,10 +7833,8 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
-  tailwindcss@3.4.19:
-    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.1.17:
+    resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==}
 
   tapable@2.2.3:
     resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
@@ -7808,8 +7925,8 @@ packages:
   token-stream@1.0.0:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
 
-  toml-eslint-parser@0.10.1:
-    resolution: {integrity: sha512-9mjy3frhioGIVGcwamlVlUyJ9x+WHw/TXiz9R4YOlmsIuBN43r9Dp8HZ35SF9EKjHrn3BUZj04CF+YqZ2oJ+7w==}
+  toml-eslint-parser@0.10.0:
+    resolution: {integrity: sha512-khrZo4buq4qVmsGzS5yQjKe/WsFvV8fGfOjDQN0q4iy9FjRfPWRgTFrU8u1R2iu/SfWLhY9WnCi4Jhdrcbtg+g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
   toposort@2.0.2:
@@ -7842,8 +7959,8 @@ packages:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
 
-  ts-api-utils@2.4.0:
-    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
     peerDependencies:
       typescript: '>=4.8.4'
@@ -7857,9 +7974,6 @@ packages:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   ts-jest@29.4.6:
     resolution: {integrity: sha512-fSpWtOO/1AjSNQguk43hb/JCo16oJDnMJf3CdEGNkqsEX3t0KX96xvyX1D7PfLCpVoKu4MfVrqUkFyblYoY4lA==}
     engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0}
@@ -8092,6 +8206,12 @@ packages:
     resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
     engines: {node: '>=4'}
 
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
   update-browserslist-db@1.2.2:
     resolution: {integrity: sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==}
     hasBin: true
@@ -8232,7 +8352,6 @@ packages:
   vue-i18n@9.14.5:
     resolution: {integrity: sha512-0jQ9Em3ymWngyiIkj0+c/k7WgaPO+TNzjKSNq9BvBQaKJECqn9cd9fL4tkDhB5G1QBskGl9YxxbDAhgbFtpe2g==}
     engines: {node: '>= 16'}
-    deprecated: v9 and v10 no longer supported. please migrate to v11. about maintenance status, see https://vue-i18n.intlify.dev/guide/maintenance.html
     peerDependencies:
       vue: ^3.0.0
 
@@ -8246,8 +8365,8 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  vue-tsc@3.2.1:
-    resolution: {integrity: sha512-I23Rk8dkQfmcSbxDO0dmg9ioMLjKA1pjlU3Lz6Jfk2pMGu3Uryu9810XkcZH24IzPbhzPCnkKo2rEMRX0skSrw==}
+  vue-tsc@3.2.2:
+    resolution: {integrity: sha512-r9YSia/VgGwmbbfC06hDdAatH634XJ9nVl6Zrnz1iK4ucp8Wu78kawplXnIDa3MSu1XdQQePTHLXYwPDWn+nyQ==}
     hasBin: true
     peerDependencies:
       typescript: '>=5.0.0'
@@ -8293,7 +8412,6 @@ packages:
   whatwg-encoding@2.0.0:
     resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
     engines: {node: '>=12'}
-    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
   whatwg-mimetype@3.0.0:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
@@ -8497,44 +8615,44 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.30
 
-  '@antfu/eslint-config@4.6.0(@typescript-eslint/utils@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@vue/compiler-sfc@3.5.26)(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@antfu/eslint-config@4.6.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.26)(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@antfu/install-pkg': 1.1.0
       '@clack/prompts': 0.10.1
-      '@eslint-community/eslint-plugin-eslint-comments': 4.5.0(eslint@9.21.0(jiti@1.21.7))
+      '@eslint-community/eslint-plugin-eslint-comments': 4.5.0(eslint@9.21.0(jiti@2.6.1))
       '@eslint/markdown': 6.6.0
-      '@stylistic/eslint-plugin': 4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/eslint-plugin': 8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      '@vitest/eslint-plugin': 1.6.5(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      '@vitest/eslint-plugin': 1.5.2(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
       ansis: 3.17.0
       cac: 6.7.14
-      eslint: 9.21.0(jiti@1.21.7)
-      eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@1.21.7))
+      eslint: 9.21.0(jiti@2.6.1)
+      eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@2.6.1))
       eslint-flat-config-utils: 2.1.4
-      eslint-merge-processors: 2.0.0(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-antfu: 3.1.1(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-command: 3.4.0(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-jsdoc: 50.8.0(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-jsonc: 2.21.0(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-n: 17.23.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
+      eslint-merge-processors: 2.0.0(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-antfu: 3.1.1(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-command: 3.3.1(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-jsdoc: 50.8.0(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-jsonc: 2.21.0(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-n: 17.23.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
       eslint-plugin-no-only-tests: 3.3.0
-      eslint-plugin-perfectionist: 4.15.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      eslint-plugin-pnpm-catalogs: 0.1.0(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-regexp: 2.10.0(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-toml: 0.12.0(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-unicorn: 57.0.0(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-unused-imports: 4.3.0(@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))
-      eslint-plugin-vue: 10.6.2(@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/parser@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@1.21.7)))
-      eslint-plugin-yml: 1.19.1(eslint@9.21.0(jiti@1.21.7))
-      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.26)(eslint@9.21.0(jiti@1.21.7))
+      eslint-plugin-perfectionist: 4.15.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-pnpm-catalogs: 0.1.0(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-regexp: 2.10.0(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-toml: 0.12.0(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-unicorn: 57.0.0(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-unused-imports: 4.3.0(@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))
+      eslint-plugin-vue: 10.6.2(@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@2.6.1)))
+      eslint-plugin-yml: 1.19.0(eslint@9.21.0(jiti@2.6.1))
+      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.26)(eslint@9.21.0(jiti@2.6.1))
       globals: 16.5.0
       jsonc-eslint-parser: 2.4.2
       local-pkg: 1.1.2
       parse-gitignore: 2.0.0
-      toml-eslint-parser: 0.10.1
-      vue-eslint-parser: 10.2.0(eslint@9.21.0(jiti@1.21.7))
+      toml-eslint-parser: 0.10.0
+      vue-eslint-parser: 10.2.0(eslint@9.21.0(jiti@2.6.1))
       yaml-eslint-parser: 1.3.2
     transitivePeerDependencies:
       - '@eslint/json'
@@ -8556,7 +8674,15 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.28.5': {}
+  '@babel/code-frame@7.28.6':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.28.0': {}
+
+  '@babel/compat-data@7.28.6': {}
 
   '@babel/core@7.28.3':
     dependencies:
@@ -8586,10 +8712,10 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.30
       jsesc: 3.1.0
 
-  '@babel/generator@7.28.5':
+  '@babel/generator@7.28.6':
     dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
+      '@babel/parser': 7.28.6
+      '@babel/types': 7.28.6
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.30
       jsesc: 3.1.0
@@ -8600,7 +8726,15 @@ snapshots:
 
   '@babel/helper-compilation-targets@7.27.2':
     dependencies:
-      '@babel/compat-data': 7.28.5
+      '@babel/compat-data': 7.28.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.25.3
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.28.6
       '@babel/helper-validator-option': 7.27.1
       browserslist: 4.28.1
       lru-cache: 5.1.1
@@ -8641,7 +8775,14 @@ snapshots:
 
   '@babel/helper-member-expression-to-functions@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.5
+      '@babel/traverse': 7.28.3
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    dependencies:
+      '@babel/traverse': 7.28.6
       '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
@@ -8668,6 +8809,8 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.27.1': {}
 
+  '@babel/helper-plugin-utils@7.28.6': {}
+
   '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.3)':
     dependencies:
       '@babel/core': 7.28.3
@@ -8682,7 +8825,16 @@ snapshots:
       '@babel/core': 7.28.3
       '@babel/helper-member-expression-to-functions': 7.27.1
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.5
+      '@babel/traverse': 7.28.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-replace-supers@7.28.6(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
@@ -8716,11 +8868,15 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.5
 
+  '@babel/parser@7.28.6':
+    dependencies:
+      '@babel/types': 7.28.6
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5(@babel/core@7.28.3)':
     dependencies:
       '@babel/core': 7.28.3
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.5
+      '@babel/traverse': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
@@ -8739,7 +8895,7 @@ snapshots:
       '@babel/core': 7.28.3
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.3)
+      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.28.3)
     transitivePeerDependencies:
       - supports-color
 
@@ -8893,10 +9049,10 @@ snapshots:
       '@babel/core': 7.28.3
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-block-scoping@7.28.5(@babel/core@7.28.3)':
+  '@babel/plugin-transform-block-scoping@7.28.6(@babel/core@7.28.3)':
     dependencies:
       '@babel/core': 7.28.3
-      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-plugin-utils': 7.28.6
 
   '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.3)':
     dependencies:
@@ -8914,15 +9070,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.28.3)':
+  '@babel/plugin-transform-classes@7.28.6(@babel/core@7.28.3)':
     dependencies:
       '@babel/core': 7.28.3
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-compilation-targets': 7.28.6
       '@babel/helper-globals': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.3)
-      '@babel/traverse': 7.28.5
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.28.3)
+      '@babel/traverse': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
@@ -8936,7 +9092,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.28.3
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.5
+      '@babel/traverse': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
@@ -8970,10 +9126,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-exponentiation-operator@7.28.5(@babel/core@7.28.3)':
+  '@babel/plugin-transform-exponentiation-operator@7.28.6(@babel/core@7.28.3)':
     dependencies:
       '@babel/core': 7.28.3
-      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-plugin-utils': 7.28.6
 
   '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.28.3)':
     dependencies:
@@ -9007,10 +9163,10 @@ snapshots:
       '@babel/core': 7.28.3
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-logical-assignment-operators@7.28.5(@babel/core@7.28.3)':
+  '@babel/plugin-transform-logical-assignment-operators@7.28.6(@babel/core@7.28.3)':
     dependencies:
       '@babel/core': 7.28.3
-      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-plugin-utils': 7.28.6
 
   '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.28.3)':
     dependencies:
@@ -9039,7 +9195,7 @@ snapshots:
       '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.3)
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.28.5
+      '@babel/traverse': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
@@ -9072,14 +9228,14 @@ snapshots:
       '@babel/core': 7.28.3
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-object-rest-spread@7.28.4(@babel/core@7.28.3)':
+  '@babel/plugin-transform-object-rest-spread@7.28.6(@babel/core@7.28.3)':
     dependencies:
       '@babel/core': 7.28.3
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
       '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.3)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.3)
-      '@babel/traverse': 7.28.5
+      '@babel/traverse': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
@@ -9096,10 +9252,10 @@ snapshots:
       '@babel/core': 7.28.3
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.3)':
+  '@babel/plugin-transform-optional-chaining@7.28.6(@babel/core@7.28.3)':
     dependencies:
       '@babel/core': 7.28.3
-      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
@@ -9131,10 +9287,10 @@ snapshots:
       '@babel/core': 7.28.3
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.3)':
+  '@babel/plugin-transform-regenerator@7.28.6(@babel/core@7.28.3)':
     dependencies:
       '@babel/core': 7.28.3
-      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-plugin-utils': 7.28.6
 
   '@babel/plugin-transform-regexp-modifiers@7.27.1(@babel/core@7.28.3)':
     dependencies:
@@ -9211,7 +9367,7 @@ snapshots:
 
   '@babel/preset-env@7.28.5(@babel/core@7.28.3)':
     dependencies:
-      '@babel/compat-data': 7.28.5
+      '@babel/compat-data': 7.28.6
       '@babel/core': 7.28.3
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
@@ -9229,10 +9385,10 @@ snapshots:
       '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.3)
       '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.28.3)
+      '@babel/plugin-transform-block-scoping': 7.28.6(@babel/core@7.28.3)
       '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-class-static-block': 7.28.3(@babel/core@7.28.3)
-      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.3)
+      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.28.3)
       '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.3)
       '@babel/plugin-transform-dotall-regex': 7.27.1(@babel/core@7.28.3)
@@ -9240,13 +9396,13 @@ snapshots:
       '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-explicit-resource-management': 7.28.0(@babel/core@7.28.3)
-      '@babel/plugin-transform-exponentiation-operator': 7.28.5(@babel/core@7.28.3)
+      '@babel/plugin-transform-exponentiation-operator': 7.28.6(@babel/core@7.28.3)
       '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-json-strings': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-logical-assignment-operators': 7.28.5(@babel/core@7.28.3)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.6(@babel/core@7.28.3)
       '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.3)
@@ -9256,15 +9412,15 @@ snapshots:
       '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.3)
+      '@babel/plugin-transform-object-rest-spread': 7.28.6(@babel/core@7.28.3)
       '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.3)
+      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.28.3)
       '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.3)
       '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.28.3)
-      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.3)
+      '@babel/plugin-transform-regenerator': 7.28.6(@babel/core@7.28.3)
       '@babel/plugin-transform-regexp-modifiers': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.28.3)
       '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.3)
@@ -9300,6 +9456,12 @@ snapshots:
       '@babel/parser': 7.28.5
       '@babel/types': 7.28.5
 
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.28.6
+      '@babel/parser': 7.28.6
+      '@babel/types': 7.28.6
+
   '@babel/traverse@7.28.3':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -9312,14 +9474,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/traverse@7.28.5':
+  '@babel/traverse@7.28.6':
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
+      '@babel/code-frame': 7.28.6
+      '@babel/generator': 7.28.6
       '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
+      '@babel/parser': 7.28.6
+      '@babel/template': 7.28.6
+      '@babel/types': 7.28.6
       debug: 4.4.3(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
@@ -9329,6 +9491,11 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@babel/types@7.28.6':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
   '@badeball/cypress-cucumber-preprocessor@23.2.1(@babel/core@7.28.3)(cypress@15.8.1)(typescript@5.9.3)':
     dependencies:
       '@cucumber/ci-environment': 10.0.1
@@ -9400,7 +9567,7 @@ snapshots:
       '@cucumber/ci-environment': 12.0.0
       '@cucumber/cucumber-expressions': 18.0.1
       '@cucumber/gherkin': 37.0.0
-      '@cucumber/gherkin-streams': 6.0.0(@cucumber/gherkin@37.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@31.0.0))(@cucumber/messages@31.0.0)
+      '@cucumber/gherkin-streams': 6.0.0(@cucumber/gherkin@37.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@30.1.0))(@cucumber/messages@31.0.0)
       '@cucumber/gherkin-utils': 10.0.0
       '@cucumber/html-formatter': 22.2.0(@cucumber/messages@31.0.0)
       '@cucumber/junit-xml-formatter': 0.9.0(@cucumber/messages@31.0.0)
@@ -9438,7 +9605,7 @@ snapshots:
       yaml: 2.8.2
       yup: 1.7.1
 
-  '@cucumber/gherkin-streams@6.0.0(@cucumber/gherkin@37.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@31.0.0))(@cucumber/messages@31.0.0)':
+  '@cucumber/gherkin-streams@6.0.0(@cucumber/gherkin@37.0.0)(@cucumber/message-streams@4.0.1(@cucumber/messages@30.1.0))(@cucumber/messages@31.0.0)':
     dependencies:
       '@cucumber/gherkin': 37.0.0
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@31.0.0)
@@ -9573,13 +9740,13 @@ snapshots:
       gonzales-pe: 4.3.0
       node-source-walk: 7.0.1
 
-  '@emnapi/core@1.8.1':
+  '@emnapi/core@1.7.1':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.8.1':
+  '@emnapi/runtime@1.7.1':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -9589,10 +9756,10 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@empathyco/eslint-config@1.8.0(@typescript-eslint/utils@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@vue/compiler-sfc@3.5.26)(jiti@1.21.7)(typescript@5.9.3)':
+  '@empathyco/eslint-config@1.8.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.26)(jiti@2.6.1)(typescript@5.9.3)':
     dependencies:
-      '@antfu/eslint-config': 4.6.0(@typescript-eslint/utils@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@vue/compiler-sfc@3.5.26)(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.21.0(jiti@1.21.7)
+      '@antfu/eslint-config': 4.6.0(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.26)(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.21.0(jiti@2.6.1)
       prettier: 3.5.3
       prettier-plugin-tailwindcss: 0.6.11(prettier@3.5.3)
     transitivePeerDependencies:
@@ -9638,19 +9805,11 @@ snapshots:
   '@es-joy/jsdoccomment@0.50.2':
     dependencies:
       '@types/estree': 1.0.8
-      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/types': 8.49.0
       comment-parser: 1.4.1
       esquery: 1.6.0
       jsdoc-type-pratt-parser: 4.1.0
 
-  '@es-joy/jsdoccomment@0.78.0':
-    dependencies:
-      '@types/estree': 1.0.8
-      '@typescript-eslint/types': 8.51.0
-      comment-parser: 1.4.1
-      esquery: 1.6.0
-      jsdoc-type-pratt-parser: 7.0.0
-
   '@esbuild/aix-ppc64@0.25.9':
     optional: true
 
@@ -9807,22 +9966,22 @@ snapshots:
   '@esbuild/win32-x64@0.27.2':
     optional: true
 
-  '@eslint-community/eslint-plugin-eslint-comments@4.5.0(eslint@9.21.0(jiti@1.21.7))':
+  '@eslint-community/eslint-plugin-eslint-comments@4.5.0(eslint@9.21.0(jiti@2.6.1))':
     dependencies:
       escape-string-regexp: 4.0.0
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       ignore: 5.3.2
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.21.0(jiti@1.21.7))':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.21.0(jiti@2.6.1))':
     dependencies:
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/compat@1.3.2(eslint@9.21.0(jiti@1.21.7))':
+  '@eslint/compat@1.3.2(eslint@9.21.0(jiti@2.6.1))':
     optionalDependencies:
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
 
   '@eslint/config-array@0.19.2':
     dependencies:
@@ -10137,6 +10296,11 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.5
       '@jridgewell/trace-mapping': 0.3.30
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.30
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
@@ -10296,8 +10460,8 @@ snapshots:
 
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
-      '@emnapi/core': 1.8.1
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/core': 1.7.1
+      '@emnapi/runtime': 1.7.1
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -10595,43 +10759,43 @@ snapshots:
 
   '@one-ini/wasm@0.1.1': {}
 
-  '@parcel/watcher-android-arm64@2.5.1':
+  '@parcel/watcher-android-arm64@2.5.4':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.5.1':
+  '@parcel/watcher-darwin-arm64@2.5.4':
     optional: true
 
-  '@parcel/watcher-darwin-x64@2.5.1':
+  '@parcel/watcher-darwin-x64@2.5.4':
     optional: true
 
-  '@parcel/watcher-freebsd-x64@2.5.1':
+  '@parcel/watcher-freebsd-x64@2.5.4':
     optional: true
 
-  '@parcel/watcher-linux-arm-glibc@2.5.1':
+  '@parcel/watcher-linux-arm-glibc@2.5.4':
     optional: true
 
-  '@parcel/watcher-linux-arm-musl@2.5.1':
+  '@parcel/watcher-linux-arm-musl@2.5.4':
     optional: true
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+  '@parcel/watcher-linux-arm64-glibc@2.5.4':
     optional: true
 
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
+  '@parcel/watcher-linux-arm64-musl@2.5.4':
     optional: true
 
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
+  '@parcel/watcher-linux-x64-glibc@2.5.4':
     optional: true
 
-  '@parcel/watcher-linux-x64-musl@2.5.1':
+  '@parcel/watcher-linux-x64-musl@2.5.4':
     optional: true
 
-  '@parcel/watcher-win32-arm64@2.5.1':
+  '@parcel/watcher-win32-arm64@2.5.4':
     optional: true
 
-  '@parcel/watcher-win32-ia32@2.5.1':
+  '@parcel/watcher-win32-ia32@2.5.4':
     optional: true
 
-  '@parcel/watcher-win32-x64@2.5.1':
+  '@parcel/watcher-win32-x64@2.5.4':
     optional: true
 
   '@parcel/watcher@2.0.4':
@@ -10639,26 +10803,26 @@ snapshots:
       node-addon-api: 3.2.1
       node-gyp-build: 4.8.4
 
-  '@parcel/watcher@2.5.1':
+  '@parcel/watcher@2.5.4':
     dependencies:
-      detect-libc: 1.0.3
+      detect-libc: 2.1.2
       is-glob: 4.0.3
-      micromatch: 4.0.8
       node-addon-api: 7.1.1
+      picomatch: 4.0.3
     optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.5.1
-      '@parcel/watcher-darwin-arm64': 2.5.1
-      '@parcel/watcher-darwin-x64': 2.5.1
-      '@parcel/watcher-freebsd-x64': 2.5.1
-      '@parcel/watcher-linux-arm-glibc': 2.5.1
-      '@parcel/watcher-linux-arm-musl': 2.5.1
-      '@parcel/watcher-linux-arm64-glibc': 2.5.1
-      '@parcel/watcher-linux-arm64-musl': 2.5.1
-      '@parcel/watcher-linux-x64-glibc': 2.5.1
-      '@parcel/watcher-linux-x64-musl': 2.5.1
-      '@parcel/watcher-win32-arm64': 2.5.1
-      '@parcel/watcher-win32-ia32': 2.5.1
-      '@parcel/watcher-win32-x64': 2.5.1
+      '@parcel/watcher-android-arm64': 2.5.4
+      '@parcel/watcher-darwin-arm64': 2.5.4
+      '@parcel/watcher-darwin-x64': 2.5.4
+      '@parcel/watcher-freebsd-x64': 2.5.4
+      '@parcel/watcher-linux-arm-glibc': 2.5.4
+      '@parcel/watcher-linux-arm-musl': 2.5.4
+      '@parcel/watcher-linux-arm64-glibc': 2.5.4
+      '@parcel/watcher-linux-arm64-musl': 2.5.4
+      '@parcel/watcher-linux-x64-glibc': 2.5.4
+      '@parcel/watcher-linux-x64-musl': 2.5.4
+      '@parcel/watcher-win32-arm64': 2.5.4
+      '@parcel/watcher-win32-ia32': 2.5.4
+      '@parcel/watcher-win32-x64': 2.5.4
     optional: true
 
   '@pkgjs/parseargs@0.11.0':
@@ -10829,10 +10993,10 @@ snapshots:
 
   '@standard-schema/spec@1.0.0': {}
 
-  '@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/utils': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.21.0(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.21.0(jiti@2.6.1)
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
       estraverse: 5.3.0
@@ -10841,6 +11005,82 @@ snapshots:
       - supports-color
       - typescript
 
+  '@tailwindcss/node@4.1.17':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.17
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.17':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-x64': 4.1.17
+      '@tailwindcss/oxide-freebsd-x64': 4.1.17
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.17
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.17
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.17
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.17
+
+  '@tailwindcss/postcss@4.1.17':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      postcss: 8.5.6
+      tailwindcss: 4.1.17
+
+  '@tailwindcss/vite@4.1.17(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      tailwindcss: 4.1.17
+      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+
   '@teppeis/multimaps@3.0.0': {}
 
   '@testing-library/jest-dom@6.9.1':
@@ -10901,9 +11141,9 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.5
 
-  '@types/cssnano@5.1.3(postcss@8.5.6)':
+  '@types/cssnano@5.1.3(postcss@8.4.12)':
     dependencies:
-      cssnano: 5.1.15(postcss@8.5.6)
+      cssnano: 5.1.15(postcss@8.4.12)
     transitivePeerDependencies:
       - postcss
 
@@ -10981,6 +11221,10 @@ snapshots:
 
   '@types/strip-json-comments@0.0.30': {}
 
+  '@types/tailwindcss@3.1.0':
+    dependencies:
+      tailwindcss: 4.1.17
+
   '@types/tmp@0.2.6': {}
 
   '@types/tough-cookie@4.0.5': {}
@@ -11002,95 +11246,95 @@ snapshots:
       '@types/node': 24.10.4
     optional: true
 
-  '@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/type-utils': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.51.0
-      eslint: 9.21.0(jiti@1.21.7)
+      '@typescript-eslint/parser': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.49.0
+      '@typescript-eslint/type-utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.49.0
+      eslint: 9.21.0(jiti@2.6.1)
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.4.0(typescript@5.9.3)
+      ts-api-utils: 2.1.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.51.0
+      '@typescript-eslint/scope-manager': 8.49.0
+      '@typescript-eslint/types': 8.49.0
+      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.49.0
       debug: 4.4.3(supports-color@8.1.1)
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.51.0(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.49.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.49.0
       debug: 4.4.3(supports-color@8.1.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.51.0':
+  '@typescript-eslint/scope-manager@8.49.0':
     dependencies:
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/visitor-keys': 8.51.0
+      '@typescript-eslint/types': 8.49.0
+      '@typescript-eslint/visitor-keys': 8.49.0
 
-  '@typescript-eslint/tsconfig-utils@8.51.0(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.49.0(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.49.0
+      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.3(supports-color@8.1.1)
-      eslint: 9.21.0(jiti@1.21.7)
-      ts-api-utils: 2.4.0(typescript@5.9.3)
+      eslint: 9.21.0(jiti@2.6.1)
+      ts-api-utils: 2.1.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.51.0': {}
+  '@typescript-eslint/types@8.49.0': {}
 
-  '@typescript-eslint/typescript-estree@8.51.0(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.49.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/visitor-keys': 8.51.0
+      '@typescript-eslint/project-service': 8.49.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.49.0
+      '@typescript-eslint/visitor-keys': 8.49.0
       debug: 4.4.3(supports-color@8.1.1)
       minimatch: 9.0.5
       semver: 7.7.3
       tinyglobby: 0.2.15
-      ts-api-utils: 2.4.0(typescript@5.9.3)
+      ts-api-utils: 2.1.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7))
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
-      eslint: 9.21.0(jiti@1.21.7)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.49.0
+      '@typescript-eslint/types': 8.49.0
+      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
+      eslint: 9.21.0(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.51.0':
+  '@typescript-eslint/visitor-keys@8.49.0':
     dependencies:
-      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/types': 8.49.0
       eslint-visitor-keys: 4.2.1
 
   '@unrs/resolver-binding-android-arm-eabi@1.11.1':
@@ -11152,16 +11396,16 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
-      vite: 6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
-  '@vitest/eslint-plugin@1.6.5(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@vitest/eslint-plugin@1.5.2(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/utils': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.21.0(jiti@1.21.7)
+      '@typescript-eslint/scope-manager': 8.49.0
+      '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.21.0(jiti@2.6.1)
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -11272,7 +11516,7 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/language-core@3.2.1':
+  '@vue/language-core@3.2.2':
     dependencies:
       '@volar/language-core': 2.4.27
       '@vue/compiler-dom': 3.5.25
@@ -11539,15 +11783,6 @@ snapshots:
 
   at-least-node@1.0.0: {}
 
-  autoprefixer@10.4.23(postcss@8.5.6):
-    dependencies:
-      browserslist: 4.28.1
-      caniuse-lite: 1.0.30001760
-      fraction.js: 5.3.4
-      picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-value-parser: 4.2.0
-
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.1.0
@@ -11596,7 +11831,7 @@ snapshots:
 
   babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.3):
     dependencies:
-      '@babel/compat-data': 7.28.5
+      '@babel/compat-data': 7.28.6
       '@babel/core': 7.28.3
       '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.3)
       semver: 6.3.1
@@ -11695,6 +11930,13 @@ snapshots:
 
   browser-stdout@1.3.1: {}
 
+  browserslist@4.25.3:
+    dependencies:
+      caniuse-lite: 1.0.30001737
+      electron-to-chromium: 1.5.209
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.3(browserslist@4.25.3)
+
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.6
@@ -11791,8 +12033,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase-css@2.0.1: {}
-
   camelcase-keys@6.2.2:
     dependencies:
       camelcase: 5.3.1
@@ -11806,10 +12046,12 @@ snapshots:
   caniuse-api@3.0.0:
     dependencies:
       browserslist: 4.28.1
-      caniuse-lite: 1.0.30001760
+      caniuse-lite: 1.0.30001737
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
+  caniuse-lite@1.0.30001737: {}
+
   caniuse-lite@1.0.30001760: {}
 
   capital-case@1.0.4:
@@ -11988,8 +12230,6 @@ snapshots:
 
   commander@14.0.2: {}
 
-  commander@4.1.1: {}
-
   commander@6.2.1: {}
 
   commander@7.2.0: {}
@@ -12184,9 +12424,9 @@ snapshots:
 
   crypto-random-string@2.0.0: {}
 
-  css-declaration-sorter@6.4.1(postcss@8.5.6):
+  css-declaration-sorter@6.4.1(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
 
   css-select@4.3.0:
     dependencies:
@@ -12212,48 +12452,48 @@ snapshots:
 
   cssesc@3.0.0: {}
 
-  cssnano-preset-default@5.2.14(postcss@8.5.6):
-    dependencies:
-      css-declaration-sorter: 6.4.1(postcss@8.5.6)
-      cssnano-utils: 3.1.0(postcss@8.5.6)
-      postcss: 8.5.6
-      postcss-calc: 8.2.4(postcss@8.5.6)
-      postcss-colormin: 5.3.1(postcss@8.5.6)
-      postcss-convert-values: 5.1.3(postcss@8.5.6)
-      postcss-discard-comments: 5.1.2(postcss@8.5.6)
-      postcss-discard-duplicates: 5.1.0(postcss@8.5.6)
-      postcss-discard-empty: 5.1.1(postcss@8.5.6)
-      postcss-discard-overridden: 5.1.0(postcss@8.5.6)
-      postcss-merge-longhand: 5.1.7(postcss@8.5.6)
-      postcss-merge-rules: 5.1.4(postcss@8.5.6)
-      postcss-minify-font-values: 5.1.0(postcss@8.5.6)
-      postcss-minify-gradients: 5.1.1(postcss@8.5.6)
-      postcss-minify-params: 5.1.4(postcss@8.5.6)
-      postcss-minify-selectors: 5.2.1(postcss@8.5.6)
-      postcss-normalize-charset: 5.1.0(postcss@8.5.6)
-      postcss-normalize-display-values: 5.1.0(postcss@8.5.6)
-      postcss-normalize-positions: 5.1.1(postcss@8.5.6)
-      postcss-normalize-repeat-style: 5.1.1(postcss@8.5.6)
-      postcss-normalize-string: 5.1.0(postcss@8.5.6)
-      postcss-normalize-timing-functions: 5.1.0(postcss@8.5.6)
-      postcss-normalize-unicode: 5.1.1(postcss@8.5.6)
-      postcss-normalize-url: 5.1.0(postcss@8.5.6)
-      postcss-normalize-whitespace: 5.1.1(postcss@8.5.6)
-      postcss-ordered-values: 5.1.3(postcss@8.5.6)
-      postcss-reduce-initial: 5.1.2(postcss@8.5.6)
-      postcss-reduce-transforms: 5.1.0(postcss@8.5.6)
-      postcss-svgo: 5.1.0(postcss@8.5.6)
-      postcss-unique-selectors: 5.1.1(postcss@8.5.6)
-
-  cssnano-utils@3.1.0(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-
-  cssnano@5.1.15(postcss@8.5.6):
-    dependencies:
-      cssnano-preset-default: 5.2.14(postcss@8.5.6)
+  cssnano-preset-default@5.2.14(postcss@8.4.12):
+    dependencies:
+      css-declaration-sorter: 6.4.1(postcss@8.4.12)
+      cssnano-utils: 3.1.0(postcss@8.4.12)
+      postcss: 8.4.12
+      postcss-calc: 8.2.4(postcss@8.4.12)
+      postcss-colormin: 5.3.1(postcss@8.4.12)
+      postcss-convert-values: 5.1.3(postcss@8.4.12)
+      postcss-discard-comments: 5.1.2(postcss@8.4.12)
+      postcss-discard-duplicates: 5.1.0(postcss@8.4.12)
+      postcss-discard-empty: 5.1.1(postcss@8.4.12)
+      postcss-discard-overridden: 5.1.0(postcss@8.4.12)
+      postcss-merge-longhand: 5.1.7(postcss@8.4.12)
+      postcss-merge-rules: 5.1.4(postcss@8.4.12)
+      postcss-minify-font-values: 5.1.0(postcss@8.4.12)
+      postcss-minify-gradients: 5.1.1(postcss@8.4.12)
+      postcss-minify-params: 5.1.4(postcss@8.4.12)
+      postcss-minify-selectors: 5.2.1(postcss@8.4.12)
+      postcss-normalize-charset: 5.1.0(postcss@8.4.12)
+      postcss-normalize-display-values: 5.1.0(postcss@8.4.12)
+      postcss-normalize-positions: 5.1.1(postcss@8.4.12)
+      postcss-normalize-repeat-style: 5.1.1(postcss@8.4.12)
+      postcss-normalize-string: 5.1.0(postcss@8.4.12)
+      postcss-normalize-timing-functions: 5.1.0(postcss@8.4.12)
+      postcss-normalize-unicode: 5.1.1(postcss@8.4.12)
+      postcss-normalize-url: 5.1.0(postcss@8.4.12)
+      postcss-normalize-whitespace: 5.1.1(postcss@8.4.12)
+      postcss-ordered-values: 5.1.3(postcss@8.4.12)
+      postcss-reduce-initial: 5.1.2(postcss@8.4.12)
+      postcss-reduce-transforms: 5.1.0(postcss@8.4.12)
+      postcss-svgo: 5.1.0(postcss@8.4.12)
+      postcss-unique-selectors: 5.1.1(postcss@8.4.12)
+
+  cssnano-utils@3.1.0(postcss@8.4.12):
+    dependencies:
+      postcss: 8.4.12
+
+  cssnano@5.1.15(postcss@8.4.12):
+    dependencies:
+      cssnano-preset-default: 5.2.14(postcss@8.4.12)
       lilconfig: 2.1.0
-      postcss: 8.5.6
+      postcss: 8.4.12
       yaml: 1.10.2
 
   csso@4.2.0:
@@ -12309,7 +12549,7 @@ snapshots:
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
       supports-color: 8.1.1
-      systeminformation: 5.29.1
+      systeminformation: 5.30.3
       tmp: 0.2.5
       tree-kill: 1.2.2
       untildify: 4.0.0
@@ -12449,8 +12689,7 @@ snapshots:
 
   detect-indent@5.0.0: {}
 
-  detect-libc@1.0.3:
-    optional: true
+  detect-libc@2.1.2: {}
 
   detect-newline@3.1.0: {}
 
@@ -12490,7 +12729,7 @@ snapshots:
 
   detective-typescript@14.0.0(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.3)
       ast-module-types: 6.0.1
       node-source-walk: 7.0.1
       typescript: 5.9.3
@@ -12514,8 +12753,6 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  didyoumean@1.2.2: {}
-
   diff-sequences@27.5.1: {}
 
   diff-sequences@29.6.3: {}
@@ -12530,8 +12767,6 @@ snapshots:
     dependencies:
       path-type: 4.0.0
 
-  dlv@1.1.3: {}
-
   doctypes@1.1.0: {}
 
   dom-accessibility-api@0.6.3: {}
@@ -12598,6 +12833,8 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
+  electron-to-chromium@1.5.209: {}
+
   electron-to-chromium@1.5.267: {}
 
   emittery@0.13.1: {}
@@ -12754,20 +12991,20 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-compat-utils@0.5.1(eslint@9.21.0(jiti@1.21.7)):
+  eslint-compat-utils@0.5.1(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       semver: 7.7.3
 
-  eslint-compat-utils@0.6.5(eslint@9.21.0(jiti@1.21.7)):
+  eslint-compat-utils@0.6.5(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       semver: 7.7.3
 
-  eslint-config-flat-gitignore@2.1.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-config-flat-gitignore@2.1.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      '@eslint/compat': 1.3.2(eslint@9.21.0(jiti@1.21.7))
-      eslint: 9.21.0(jiti@1.21.7)
+      '@eslint/compat': 1.3.2(eslint@9.21.0(jiti@2.6.1))
+      eslint: 9.21.0(jiti@2.6.1)
 
   eslint-flat-config-utils@2.1.4:
     dependencies:
@@ -12780,38 +13017,38 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-json-compat-utils@0.2.1(eslint@9.21.0(jiti@1.21.7))(jsonc-eslint-parser@2.4.2):
+  eslint-json-compat-utils@0.2.1(eslint@9.21.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.2):
     dependencies:
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       esquery: 1.6.0
       jsonc-eslint-parser: 2.4.2
 
-  eslint-merge-processors@2.0.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-merge-processors@2.0.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
 
-  eslint-plugin-antfu@3.1.1(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-antfu@3.1.1(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
 
-  eslint-plugin-command@3.4.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-command@3.3.1(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      '@es-joy/jsdoccomment': 0.78.0
-      eslint: 9.21.0(jiti@1.21.7)
+      '@es-joy/jsdoccomment': 0.50.2
+      eslint: 9.21.0(jiti@2.6.1)
 
-  eslint-plugin-es-x@7.8.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-es-x@7.8.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
-      eslint: 9.21.0(jiti@1.21.7)
-      eslint-compat-utils: 0.5.1(eslint@9.21.0(jiti@1.21.7))
+      eslint: 9.21.0(jiti@2.6.1)
+      eslint-compat-utils: 0.5.1(eslint@9.21.0(jiti@2.6.1))
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/types': 8.49.0
       comment-parser: 1.4.1
       debug: 4.4.3(supports-color@8.1.1)
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       is-glob: 4.0.3
       minimatch: 10.1.1
@@ -12819,18 +13056,18 @@ snapshots:
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
-      '@typescript-eslint/utils': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-jsdoc@50.8.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.4.3(supports-color@8.1.1)
       escape-string-regexp: 4.0.0
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       espree: 10.4.0
       esquery: 1.6.0
       parse-imports-exports: 0.2.4
@@ -12839,13 +13076,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsonc@2.21.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-jsonc@2.21.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1))
       diff-sequences: 27.5.1
-      eslint: 9.21.0(jiti@1.21.7)
-      eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@1.21.7))
-      eslint-json-compat-utils: 0.2.1(eslint@9.21.0(jiti@1.21.7))(jsonc-eslint-parser@2.4.2)
+      eslint: 9.21.0(jiti@2.6.1)
+      eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@2.6.1))
+      eslint-json-compat-utils: 0.2.1(eslint@9.21.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.2)
       espree: 10.4.0
       graphemer: 1.4.0
       jsonc-eslint-parser: 2.4.2
@@ -12854,12 +13091,12 @@ snapshots:
     transitivePeerDependencies:
       - '@eslint/json'
 
-  eslint-plugin-n@17.23.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3):
+  eslint-plugin-n@17.23.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1))
       enhanced-resolve: 5.18.3
-      eslint: 9.21.0(jiti@1.21.7)
-      eslint-plugin-es-x: 7.8.0(eslint@9.21.0(jiti@1.21.7))
+      eslint: 9.21.0(jiti@2.6.1)
+      eslint-plugin-es-x: 7.8.0(eslint@9.21.0(jiti@2.6.1))
       get-tsconfig: 4.13.0
       globals: 15.15.0
       globrex: 0.1.2
@@ -12871,52 +13108,52 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.3.0: {}
 
-  eslint-plugin-perfectionist@4.15.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3):
+  eslint-plugin-perfectionist@4.15.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/utils': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.21.0(jiti@1.21.7)
+      '@typescript-eslint/types': 8.49.0
+      '@typescript-eslint/utils': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.21.0(jiti@2.6.1)
       natural-orderby: 5.0.0
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-pnpm-catalogs@0.1.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-pnpm-catalogs@0.1.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       find-up-simple: 1.0.1
       jsonc-eslint-parser: 2.4.2
       pnpm-catalogs-utils: 0.1.0
 
-  eslint-plugin-regexp@2.10.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-regexp@2.10.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
       comment-parser: 1.4.1
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       jsdoc-type-pratt-parser: 4.8.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-toml@0.12.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-toml@0.12.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3(supports-color@8.1.1)
-      eslint: 9.21.0(jiti@1.21.7)
-      eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@1.21.7))
+      eslint: 9.21.0(jiti@2.6.1)
+      eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@2.6.1))
       lodash: 4.17.21
-      toml-eslint-parser: 0.10.1
+      toml-eslint-parser: 0.10.0
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unicorn@57.0.0(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-unicorn@57.0.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1))
       ci-info: 4.3.1
       clean-regexp: 1.0.0
       core-js-compat: 3.47.0
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       esquery: 1.6.0
       globals: 15.15.0
       indent-string: 5.0.0
@@ -12929,42 +13166,42 @@ snapshots:
       semver: 7.7.3
       strip-indent: 4.1.1
 
-  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vue@10.6.2(@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/parser@8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.21.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@1.21.7))):
+  eslint-plugin-vue@10.6.2(@stylistic/eslint-plugin@4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.21.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@2.6.1))):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7))
-      eslint: 9.21.0(jiti@1.21.7)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1))
+      eslint: 9.21.0(jiti@2.6.1)
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 7.1.0
       semver: 7.7.3
-      vue-eslint-parser: 10.2.0(eslint@9.21.0(jiti@1.21.7))
+      vue-eslint-parser: 10.2.0(eslint@9.21.0(jiti@2.6.1))
       xml-name-validator: 4.0.0
     optionalDependencies:
-      '@stylistic/eslint-plugin': 4.4.1(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.51.0(eslint@9.21.0(jiti@1.21.7))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 4.4.1(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.49.0(eslint@9.21.0(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-yml@1.19.1(eslint@9.21.0(jiti@1.21.7)):
+  eslint-plugin-yml@1.19.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3(supports-color@8.1.1)
       diff-sequences: 27.5.1
       escape-string-regexp: 4.0.0
-      eslint: 9.21.0(jiti@1.21.7)
-      eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@1.21.7))
+      eslint: 9.21.0(jiti@2.6.1)
+      eslint-compat-utils: 0.6.5(eslint@9.21.0(jiti@2.6.1))
       natural-compare: 1.4.0
       yaml-eslint-parser: 1.3.2
     transitivePeerDependencies:
       - supports-color
 
-  eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.26)(eslint@9.21.0(jiti@1.21.7)):
+  eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.26)(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
       '@vue/compiler-sfc': 3.5.26
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -12975,9 +13212,9 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.21.0(jiti@1.21.7):
+  eslint@9.21.0(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.21.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.19.2
       '@eslint/core': 0.12.0
@@ -13012,7 +13249,7 @@ snapshots:
       natural-compare: 1.4.0
       optionator: 0.9.4
     optionalDependencies:
-      jiti: 1.21.7
+      jiti: 2.6.1
     transitivePeerDependencies:
       - supports-color
 
@@ -13306,8 +13543,6 @@ snapshots:
 
   format@0.2.2: {}
 
-  fraction.js@5.3.4: {}
-
   from@0.1.7: {}
 
   fs-constants@1.0.0: {}
@@ -13702,9 +13937,9 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  icss-utils@5.1.0(postcss@8.5.6):
+  icss-utils@5.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
 
   ieee754@1.2.1: {}
 
@@ -14371,7 +14606,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jiti@1.21.7: {}
+  jiti@2.6.1: {}
 
   jju@1.4.0: {}
 
@@ -14420,8 +14655,6 @@ snapshots:
 
   jsdoc-type-pratt-parser@4.8.0: {}
 
-  jsdoc-type-pratt-parser@7.0.0: {}
-
   jsdom@20.0.3:
     dependencies:
       abab: 2.0.6
@@ -14653,9 +14886,56 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  lilconfig@2.1.0: {}
+  lightningcss-android-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.2:
+    optional: true
 
-  lilconfig@3.1.3: {}
+  lightningcss-freebsd-x64@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    optional: true
+
+  lightningcss@1.30.2:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
+
+  lilconfig@2.1.0: {}
 
   lines-and-columns@1.2.4: {}
 
@@ -15416,6 +15696,8 @@ snapshots:
 
   node-int64@0.4.0: {}
 
+  node-releases@2.0.19: {}
+
   node-releases@2.0.27: {}
 
   node-source-walk@7.0.1:
@@ -15643,8 +15925,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.4: {}
 
   object-is@1.1.6:
@@ -15897,8 +16177,6 @@ snapshots:
 
   performance-now@2.1.0: {}
 
-  picocolors@0.2.1: {}
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -15939,203 +16217,162 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-calc@8.2.4(postcss@8.5.6):
+  postcss-calc@8.2.4(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-selector-parser: 6.1.2
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@5.3.1(postcss@8.5.6):
+  postcss-colormin@5.3.1(postcss@8.4.12):
     dependencies:
-      browserslist: 4.28.1
+      browserslist: 4.25.3
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.5.6
-      postcss-value-parser: 4.2.0
-
-  postcss-convert-values@5.1.3(postcss@8.5.6):
-    dependencies:
-      browserslist: 4.28.1
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-dir-pseudo-class@7.0.2(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-      postcss-selector-parser: 6.1.2
-
-  postcss-discard-comments@5.1.2(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-
-  postcss-discard-duplicates@5.1.0(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-
-  postcss-discard-empty@5.1.1(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-
-  postcss-discard-overridden@5.1.0(postcss@8.5.6):
+  postcss-convert-values@5.1.3(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
-
-  postcss-import@15.1.0(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
+      browserslist: 4.25.3
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.11
 
-  postcss-import@16.1.1(postcss@8.5.6):
+  postcss-discard-comments@5.1.2(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.11
+      postcss: 8.4.12
 
-  postcss-js@4.0.1(postcss@8.5.6):
+  postcss-discard-duplicates@5.1.0(postcss@8.4.12):
     dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.6
+      postcss: 8.4.12
 
-  postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)):
+  postcss-discard-empty@5.1.1(postcss@8.4.12):
     dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.8.2
-    optionalDependencies:
-      postcss: 8.5.6
-      ts-node: 10.9.2(@types/node@24.10.4)(typescript@5.9.3)
+      postcss: 8.4.12
 
-  postcss-logical@4.0.2:
+  postcss-discard-overridden@5.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 7.0.39
+      postcss: 8.4.12
 
-  postcss-merge-longhand@5.1.7(postcss@8.5.6):
+  postcss-merge-longhand@5.1.7(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
-      stylehacks: 5.1.1(postcss@8.5.6)
+      stylehacks: 5.1.1(postcss@8.4.12)
 
-  postcss-merge-rules@5.1.4(postcss@8.5.6):
+  postcss-merge-rules@5.1.4(postcss@8.4.12):
     dependencies:
-      browserslist: 4.28.1
+      browserslist: 4.25.3
       caniuse-api: 3.0.0
-      cssnano-utils: 3.1.0(postcss@8.5.6)
-      postcss: 8.5.6
+      cssnano-utils: 3.1.0(postcss@8.4.12)
+      postcss: 8.4.12
       postcss-selector-parser: 6.1.2
 
-  postcss-minify-font-values@5.1.0(postcss@8.5.6):
+  postcss-minify-font-values@5.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@5.1.1(postcss@8.5.6):
+  postcss-minify-gradients@5.1.1(postcss@8.4.12):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 3.1.0(postcss@8.5.6)
-      postcss: 8.5.6
+      cssnano-utils: 3.1.0(postcss@8.4.12)
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@5.1.4(postcss@8.5.6):
+  postcss-minify-params@5.1.4(postcss@8.4.12):
     dependencies:
-      browserslist: 4.28.1
-      cssnano-utils: 3.1.0(postcss@8.5.6)
-      postcss: 8.5.6
+      browserslist: 4.25.3
+      cssnano-utils: 3.1.0(postcss@8.4.12)
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-minify-selectors@5.2.1(postcss@8.5.6):
+  postcss-minify-selectors@5.2.1(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-selector-parser: 6.1.2
 
-  postcss-modules-extract-imports@3.1.0(postcss@8.5.6):
+  postcss-modules-extract-imports@3.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
 
-  postcss-modules-local-by-default@4.2.0(postcss@8.5.6):
+  postcss-modules-local-by-default@4.2.0(postcss@8.4.12):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.6)
-      postcss: 8.5.6
+      icss-utils: 5.1.0(postcss@8.4.12)
+      postcss: 8.4.12
       postcss-selector-parser: 7.1.0
       postcss-value-parser: 4.2.0
 
-  postcss-modules-scope@3.2.1(postcss@8.5.6):
+  postcss-modules-scope@3.2.1(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-selector-parser: 7.1.0
 
-  postcss-modules-values@4.0.0(postcss@8.5.6):
+  postcss-modules-values@4.0.0(postcss@8.4.12):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.6)
-      postcss: 8.5.6
+      icss-utils: 5.1.0(postcss@8.4.12)
+      postcss: 8.4.12
 
-  postcss-nested@6.2.0(postcss@8.5.6):
+  postcss-normalize-charset@5.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
-      postcss-selector-parser: 6.1.2
-
-  postcss-normalize-charset@5.1.0(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
 
-  postcss-normalize-display-values@5.1.0(postcss@8.5.6):
+  postcss-normalize-display-values@5.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@5.1.1(postcss@8.5.6):
+  postcss-normalize-positions@5.1.1(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@5.1.1(postcss@8.5.6):
+  postcss-normalize-repeat-style@5.1.1(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@5.1.0(postcss@8.5.6):
+  postcss-normalize-string@5.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@5.1.0(postcss@8.5.6):
+  postcss-normalize-timing-functions@5.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@5.1.1(postcss@8.5.6):
+  postcss-normalize-unicode@5.1.1(postcss@8.4.12):
     dependencies:
-      browserslist: 4.28.1
-      postcss: 8.5.6
+      browserslist: 4.25.3
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@5.1.0(postcss@8.5.6):
+  postcss-normalize-url@5.1.0(postcss@8.4.12):
     dependencies:
       normalize-url: 6.1.0
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@5.1.1(postcss@8.5.6):
+  postcss-normalize-whitespace@5.1.1(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-ordered-values@5.1.3(postcss@8.5.6):
+  postcss-ordered-values@5.1.3(postcss@8.4.12):
     dependencies:
-      cssnano-utils: 3.1.0(postcss@8.5.6)
-      postcss: 8.5.6
+      cssnano-utils: 3.1.0(postcss@8.4.12)
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
-  postcss-reduce-initial@5.1.2(postcss@8.5.6):
+  postcss-reduce-initial@5.1.2(postcss@8.4.12):
     dependencies:
-      browserslist: 4.28.1
+      browserslist: 4.25.3
       caniuse-api: 3.0.0
-      postcss: 8.5.6
+      postcss: 8.4.12
 
-  postcss-reduce-transforms@5.1.0(postcss@8.5.6):
+  postcss-reduce-transforms@5.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
 
   postcss-selector-parser@6.1.2:
@@ -16148,15 +16385,15 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-svgo@5.1.0(postcss@8.5.6):
+  postcss-svgo@5.1.0(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-value-parser: 4.2.0
       svgo: 2.8.0
 
-  postcss-unique-selectors@5.1.1(postcss@8.5.6):
+  postcss-unique-selectors@5.1.1(postcss@8.4.12):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-selector-parser: 6.1.2
 
   postcss-value-parser@4.2.0: {}
@@ -16168,10 +16405,11 @@ snapshots:
       postcss: 8.5.6
       quote-unquote: 1.0.0
 
-  postcss@7.0.39:
+  postcss@8.4.12:
     dependencies:
-      picocolors: 0.2.1
-      source-map: 0.6.1
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
 
   postcss@8.5.6:
     dependencies:
@@ -16380,10 +16618,6 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   read-cmd-shim@3.0.0: {}
 
   read-cmd-shim@4.0.0: {}
@@ -16636,18 +16870,18 @@ snapshots:
   rollup-plugin-styles@4.0.0(rollup@4.54.0):
     dependencies:
       '@rollup/pluginutils': 4.2.1
-      '@types/cssnano': 5.1.3(postcss@8.5.6)
+      '@types/cssnano': 5.1.3(postcss@8.4.12)
       cosmiconfig: 7.1.0
-      cssnano: 5.1.15(postcss@8.5.6)
+      cssnano: 5.1.15(postcss@8.4.12)
       fs-extra: 10.1.0
-      icss-utils: 5.1.0(postcss@8.5.6)
+      icss-utils: 5.1.0(postcss@8.4.12)
       mime-types: 2.1.35
       p-queue: 6.6.2
-      postcss: 8.5.6
-      postcss-modules-extract-imports: 3.1.0(postcss@8.5.6)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.6)
-      postcss-modules-scope: 3.2.1(postcss@8.5.6)
-      postcss-modules-values: 4.0.0(postcss@8.5.6)
+      postcss: 8.4.12
+      postcss-modules-extract-imports: 3.1.0(postcss@8.4.12)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.4.12)
+      postcss-modules-scope: 3.2.1(postcss@8.4.12)
+      postcss-modules-values: 4.0.0(postcss@8.4.12)
       postcss-value-parser: 4.2.0
       query-string: 7.1.3
       resolve: 1.22.10
@@ -16739,7 +16973,7 @@ snapshots:
       immutable: 5.1.4
       source-map-js: 1.2.1
     optionalDependencies:
-      '@parcel/watcher': 2.5.1
+      '@parcel/watcher': 2.5.4
 
   saxes@6.0.0:
     dependencies:
@@ -17072,26 +17306,16 @@ snapshots:
       minimist: 1.2.8
       through: 2.3.8
 
-  stylehacks@5.1.1(postcss@8.5.6):
+  stylehacks@5.1.1(postcss@8.4.12):
     dependencies:
       browserslist: 4.28.1
-      postcss: 8.5.6
+      postcss: 8.4.12
       postcss-selector-parser: 6.1.2
 
   stylus-lookup@6.1.0:
     dependencies:
       commander: 12.1.0
 
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      commander: 4.1.1
-      glob: 10.5.0
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.7
-      ts-interface-checker: 0.1.13
-
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -17122,36 +17346,11 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.9
 
-  systeminformation@5.29.1: {}
+  systeminformation@5.30.3: {}
 
   tagged-tag@1.0.0: {}
 
-  tailwindcss@3.4.19(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-import: 15.1.0(postcss@8.5.6)
-      postcss-js: 4.0.1(postcss@8.5.6)
-      postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3))
-      postcss-nested: 6.2.0(postcss@8.5.6)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.11
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.1.17: {}
 
   tapable@2.2.3: {}
 
@@ -17244,7 +17443,7 @@ snapshots:
 
   token-stream@1.0.0: {}
 
-  toml-eslint-parser@0.10.1:
+  toml-eslint-parser@0.10.0:
     dependencies:
       eslint-visitor-keys: 3.4.3
 
@@ -17273,7 +17472,7 @@ snapshots:
 
   trim-newlines@3.0.1: {}
 
-  ts-api-utils@2.4.0(typescript@5.9.3):
+  ts-api-utils@2.1.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
 
@@ -17284,8 +17483,6 @@ snapshots:
 
   ts-dedent@2.2.0: {}
 
-  ts-interface-checker@0.1.13: {}
-
   ts-jest@29.4.6(@babel/core@7.28.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.28.3))(esbuild@0.27.2)(jest-util@29.7.0)(jest@29.7.0(@types/node@24.10.4)(ts-node@10.9.2(@types/node@24.10.4)(typescript@5.9.3)))(typescript@5.9.3):
     dependencies:
       bs-logger: 0.2.6
@@ -17520,6 +17717,12 @@ snapshots:
 
   upath@2.0.1: {}
 
+  update-browserslist-db@1.1.3(browserslist@4.25.3):
+    dependencies:
+      browserslist: 4.25.3
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
   update-browserslist-db@1.2.2(browserslist@4.28.1):
     dependencies:
       browserslist: 4.28.1
@@ -17580,7 +17783,7 @@ snapshots:
       core-util-is: 1.0.2
       extsprintf: 1.3.0
 
-  vite-plugin-vue-inspector@5.3.2(vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
+  vite-plugin-vue-inspector@5.3.2(vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       '@babel/core': 7.28.3
       '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.3)
@@ -17591,11 +17794,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.25
       kolorist: 1.8.0
       magic-string: 0.30.21
-      vite: 6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  vite@6.4.1(@types/node@24.10.4)(jiti@1.21.7)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2):
+  vite@6.4.1(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.9
       fdir: 6.5.0(picomatch@4.0.3)
@@ -17606,7 +17809,8 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.10.4
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.6.1
+      lightningcss: 1.30.2
       sass: 1.97.1
       tsx: 4.21.0
       yaml: 2.8.2
@@ -17645,10 +17849,10 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@1.21.7)):
+  vue-eslint-parser@10.2.0(eslint@9.21.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3(supports-color@8.1.1)
-      eslint: 9.21.0(jiti@1.21.7)
+      eslint: 9.21.0(jiti@2.6.1)
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
@@ -17678,10 +17882,10 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.26(typescript@5.9.3)
 
-  vue-tsc@3.2.1(typescript@5.9.3):
+  vue-tsc@3.2.2(typescript@5.9.3):
     dependencies:
       '@volar/typescript': 2.4.27
-      '@vue/language-core': 3.2.1
+      '@vue/language-core': 3.2.2
       typescript: 5.9.3
 
   vue@3.5.26(typescript@5.9.3):
diff --git a/scripts/publish-release.js b/scripts/publish-release.js
index 6c18fbf213..9c616cb0d1 100644
--- a/scripts/publish-release.js
+++ b/scripts/publish-release.js
@@ -1,12 +1,12 @@
-const { exec } = require('./utils');
+const { exec } = require('./utils')
 
-addVersionTagForChangedPackages();
+addVersionTagForChangedPackages()
 
 function addVersionTagForChangedPackages() {
-  const changedPackages = JSON.parse(exec('lerna changed --json'));
-  exec(`lerna publish from-package --yes`);
+  const changedPackages = JSON.parse(exec('lerna changed --json'))
+  exec(`lerna publish from-package --yes`)
   changedPackages.forEach(changed => {
-    const tag = `${changed.name}@${changed.version}`;
-    exec(`git tag -a ${tag} -m "${tag}"`);
-  });
+    const tag = `${changed.name}@${changed.version}-RC-MM`
+    exec(`git tag -a ${tag} -m "${tag}"`)
+  })
 }