From 2fdfe2f13e714f19118d612ace9f4b583fd08628 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Sat, 15 Jun 2024 07:14:31 +0100
Subject: [PATCH] Fixed #5898 - Themes are installed by the wrong package

---
 package.json                                  |   1 +
 packages/auto-import-resolver/package.json    |   5 +-
 packages/core/package.json                    |   7 +-
 packages/core/rollup.config.mjs               |   5 +-
 packages/core/src/base/style/BaseStyle.js     |   2 +-
 .../core/src/basecomponent/BaseComponent.vue  |   2 +-
 .../core/src/basedirective/BaseDirective.js   |   2 +-
 packages/core/src/config/PrimeVue.js          |   2 +-
 packages/core/src/utils/DomHandler.js         |   2 +-
 packages/core/tsconfig.json                   |   3 +-
 packages/icons/package.json                   |   5 +-
 packages/metadata/package.json                |   5 +-
 packages/nuxt-module/package.json             |   3 +-
 packages/nuxt-module/src/module.ts            |   5 +-
 packages/primevue/package.json                |   5 +-
 packages/primevue/rollup.config.mjs           |   5 +-
 packages/primevue/scripts/prebuild.mjs        |   2 +-
 .../src/confirmpopup/ConfirmPopup.vue         |   2 +-
 packages/primevue/src/knob/BaseKnob.vue       |   2 +-
 packages/primevue/src/popover/Popover.vue     |   2 +-
 packages/primevue/src/primevue.js             |   2 +-
 packages/primevue/src/speeddial/SpeedDial.vue |   2 +-
 packages/themes/package.json                  |  22 +-
 .../themes/src/core/actions/definePreset.js   |   3 -
 packages/themes/src/core/actions/index.js     |   6 -
 .../themes/src/core/actions/updatePreset.js   |  10 -
 .../src/core/actions/updatePrimaryPalette.js  |   3 -
 .../src/core/actions/updateSurfacePalette.js  |   3 -
 packages/themes/src/core/actions/usePreset.js |  10 -
 packages/themes/src/core/actions/useTheme.js  |   3 -
 packages/themes/src/core/config/index.js      | 145 ---------
 .../themes/src/core/helpers/color/index.js    |   4 -
 packages/themes/src/core/helpers/color/mix.js |  39 ---
 .../themes/src/core/helpers/color/palette.js  |  14 -
 .../themes/src/core/helpers/color/shade.js    |   3 -
 .../themes/src/core/helpers/color/tint.js     |   3 -
 packages/themes/src/core/helpers/css.js       |   4 -
 packages/themes/src/core/helpers/dt.js        |  34 ---
 packages/themes/src/core/helpers/index.js     |   5 -
 packages/themes/src/core/helpers/t.js         |  66 ----
 .../themes/src/core/helpers/toVariables.js    |  38 ---
 packages/themes/src/core/service/index.js     |  40 ---
 packages/themes/src/core/utils/index.js       |   2 -
 packages/themes/src/core/utils/sharedUtils.js | 225 --------------
 packages/themes/src/core/utils/themeUtils.js  | 283 ------------------
 packages/themes/src/index.d.ts                |   8 +-
 packages/themes/src/index.js                  |   6 +-
 47 files changed, 57 insertions(+), 993 deletions(-)
 delete mode 100644 packages/themes/src/core/actions/definePreset.js
 delete mode 100644 packages/themes/src/core/actions/index.js
 delete mode 100644 packages/themes/src/core/actions/updatePreset.js
 delete mode 100644 packages/themes/src/core/actions/updatePrimaryPalette.js
 delete mode 100644 packages/themes/src/core/actions/updateSurfacePalette.js
 delete mode 100644 packages/themes/src/core/actions/usePreset.js
 delete mode 100644 packages/themes/src/core/actions/useTheme.js
 delete mode 100644 packages/themes/src/core/config/index.js
 delete mode 100644 packages/themes/src/core/helpers/color/index.js
 delete mode 100644 packages/themes/src/core/helpers/color/mix.js
 delete mode 100644 packages/themes/src/core/helpers/color/palette.js
 delete mode 100644 packages/themes/src/core/helpers/color/shade.js
 delete mode 100644 packages/themes/src/core/helpers/color/tint.js
 delete mode 100644 packages/themes/src/core/helpers/css.js
 delete mode 100644 packages/themes/src/core/helpers/dt.js
 delete mode 100644 packages/themes/src/core/helpers/index.js
 delete mode 100644 packages/themes/src/core/helpers/t.js
 delete mode 100644 packages/themes/src/core/helpers/toVariables.js
 delete mode 100644 packages/themes/src/core/service/index.js
 delete mode 100644 packages/themes/src/core/utils/index.js
 delete mode 100644 packages/themes/src/core/utils/sharedUtils.js
 delete mode 100644 packages/themes/src/core/utils/themeUtils.js

diff --git a/package.json b/package.json
index 09091ef05..382a9633a 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     },
     "scripts": {
         "setup": "rm -rf **/node_modules **/**/node_modules **/dist ./pnpm-lock.yaml && pnpm install",
+        "link": "pnpm --filter './packages/*' dev:link",
         "release": "pnpm run build && pnpm recursive publish --filter './packages/*' --no-git-checks",
         "release:beta": "pnpm run build && pnpm recursive publish --filter './packages/*' --no-git-checks --tag beta",
         "release:rc": "pnpm run build && pnpm recursive publish --filter './packages/*' --no-git-checks --tag rc",
diff --git a/packages/auto-import-resolver/package.json b/packages/auto-import-resolver/package.json
index 8a108d4e0..1a8b0ab2f 100644
--- a/packages/auto-import-resolver/package.json
+++ b/packages/auto-import-resolver/package.json
@@ -33,7 +33,8 @@
         "build": "NODE_ENV=production INPUT_DIR=./ OUTPUT_DIR=dist/ pnpm run build:package",
         "build:package": "pnpm run build:prebuild && tsup && pnpm run build:postbuild",
         "build:prebuild": "node ./scripts/prebuild.mjs",
-        "build:postbuild": "node ./scripts/postbuild.mjs"
+        "build:postbuild": "node ./scripts/postbuild.mjs",
+        "dev:link": "pnpm link --global && npm link"
     },
     "dependencies": {
         "@primevue/metadata": "workspace:*"
@@ -45,4 +46,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/core/package.json b/packages/core/package.json
index 544021301..9c2813720 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -44,10 +44,11 @@
         "build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
         "build:package": "pnpm run build:prebuild && rollup -c && pnpm run build:postbuild",
         "build:prebuild": "node ./scripts/prebuild.mjs",
-        "build:postbuild": "node ./scripts/postbuild.mjs"
+        "build:postbuild": "node ./scripts/postbuild.mjs",
+        "dev:link": "pnpm link --global && npm link"
     },
     "dependencies": {
-        "@primevue/themes": "workspace:*"
+        "@primeuix/styled": "^0.0.1"
     },
     "peerDependencies": {
         "vue": "^3.0.0"
@@ -55,4 +56,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/core/rollup.config.mjs b/packages/core/rollup.config.mjs
index 14d3af25c..3bc246257 100644
--- a/packages/core/rollup.config.mjs
+++ b/packages/core/rollup.config.mjs
@@ -19,7 +19,7 @@ const GLOBALS = {
 
 // externals
 const GLOBAL_EXTERNALS = ['vue'];
-const INLINE_EXTERNALS = [/@primevue\/themes\/.*/];
+const INLINE_EXTERNALS = ['@primeuix/styled'];
 const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS];
 
 // alias
@@ -42,8 +42,7 @@ const ALIAS_ENTRIES = [
 
             return targetFile ? path.join(folderPath, targetFile) : null;
         }
-    },
-    { find: '@primevue/themes', replacement: path.resolve(__dirname, '../themes/src/index.js') }
+    }
 ];
 
 // plugins
diff --git a/packages/core/src/base/style/BaseStyle.js b/packages/core/src/base/style/BaseStyle.js
index 711484320..923dc8c50 100644
--- a/packages/core/src/base/style/BaseStyle.js
+++ b/packages/core/src/base/style/BaseStyle.js
@@ -1,6 +1,6 @@
+import { Theme, dt } from '@primeuix/styled';
 import { useStyle } from '@primevue/core/usestyle';
 import { ObjectUtils } from '@primevue/core/utils';
-import { Theme, dt } from '@primevue/themes';
 
 const theme = ({ dt }) => `
 * {
diff --git a/packages/core/src/basecomponent/BaseComponent.vue b/packages/core/src/basecomponent/BaseComponent.vue
index 226853c9b..851049329 100644
--- a/packages/core/src/basecomponent/BaseComponent.vue
+++ b/packages/core/src/basecomponent/BaseComponent.vue
@@ -2,7 +2,7 @@
 import Base from '@primevue/core/base';
 import BaseStyle from '@primevue/core/base/style';
 import { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils';
-import { Theme, ThemeService } from '@primevue/themes';
+import { Theme, ThemeService } from '@primeuix/styled';
 import { mergeProps } from 'vue';
 import BaseComponentStyle from './style/BaseComponentStyle';
 
diff --git a/packages/core/src/basedirective/BaseDirective.js b/packages/core/src/basedirective/BaseDirective.js
index c65e01a34..a53b22640 100644
--- a/packages/core/src/basedirective/BaseDirective.js
+++ b/packages/core/src/basedirective/BaseDirective.js
@@ -1,8 +1,8 @@
+import { Theme, ThemeService } from '@primeuix/styled';
 import Base from '@primevue/core/base';
 import BaseStyle from '@primevue/core/base/style';
 import PrimeVueService from '@primevue/core/service';
 import { ObjectUtils, UniqueComponentId } from '@primevue/core/utils';
-import { Theme, ThemeService } from '@primevue/themes';
 import { mergeProps } from 'vue';
 
 const BaseDirective = {
diff --git a/packages/core/src/config/PrimeVue.js b/packages/core/src/config/PrimeVue.js
index 9ac6d667b..dd0ae78ec 100644
--- a/packages/core/src/config/PrimeVue.js
+++ b/packages/core/src/config/PrimeVue.js
@@ -1,7 +1,7 @@
+import { Theme, ThemeService } from '@primeuix/styled';
 import { FilterMatchMode } from '@primevue/core/api';
 import BaseStyle from '@primevue/core/base/style';
 import PrimeVueService from '@primevue/core/service';
-import { Theme, ThemeService } from '@primevue/themes';
 import { inject, reactive, ref, watch } from 'vue';
 
 export const defaultOptions = {
diff --git a/packages/core/src/utils/DomHandler.js b/packages/core/src/utils/DomHandler.js
index e2014201e..95b68c429 100755
--- a/packages/core/src/utils/DomHandler.js
+++ b/packages/core/src/utils/DomHandler.js
@@ -1,4 +1,4 @@
-import { $dt } from '@primevue/themes';
+import { $dt } from '@primeuix/styled';
 
 export default {
     innerWidth(el) {
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index 76795a0f6..1b48fe61a 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -16,8 +16,7 @@
         "incremental": true,
         "baseUrl": ".",
         "paths": {
-            "@primevue/core/*": ["./src/*"],
-            "primevue/themes/*": ["../../packages/themes/src/*"]
+            "@primevue/core/*": ["./src/*"]
         }
     },
     "include": ["**/*.ts", "src/*"],
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 1b3027516..60044cb47 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -35,7 +35,8 @@
         "build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
         "build:package": "pnpm run build:prebuild && rollup -c && pnpm run build:postbuild",
         "build:prebuild": "node ./scripts/prebuild.mjs",
-        "build:postbuild": "node ./scripts/postbuild.mjs"
+        "build:postbuild": "node ./scripts/postbuild.mjs",
+        "dev:link": "pnpm link --global && npm link"
     },
     "dependencies": {
         "@primevue/core": "workspace:*"
@@ -43,4 +44,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/metadata/package.json b/packages/metadata/package.json
index ad3eb3db3..97c557c7d 100644
--- a/packages/metadata/package.json
+++ b/packages/metadata/package.json
@@ -34,7 +34,8 @@
         "build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
         "build:package": "pnpm run build:prebuild && tsup && pnpm run build:postbuild",
         "build:prebuild": "node ./scripts/prebuild.mjs",
-        "build:postbuild": "node ./scripts/postbuild.mjs"
+        "build:postbuild": "node ./scripts/postbuild.mjs",
+        "dev:link": "pnpm link --global && npm link"
     },
     "devDependencies": {
         "tsup": "^8.1.0"
@@ -42,4 +43,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/nuxt-module/package.json b/packages/nuxt-module/package.json
index c576e6ea8..03330e811 100644
--- a/packages/nuxt-module/package.json
+++ b/packages/nuxt-module/package.json
@@ -51,6 +51,7 @@
         "dev": "nuxi dev playground",
         "dev:build": "nuxi build playground",
         "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground",
+        "dev:link": "pnpm link --global && npm link",
         "test": "vitest run",
         "test:watch": "vitest watch"
     },
@@ -75,4 +76,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/nuxt-module/src/module.ts b/packages/nuxt-module/src/module.ts
index 29e922dd8..b412d94e9 100644
--- a/packages/nuxt-module/src/module.ts
+++ b/packages/nuxt-module/src/module.ts
@@ -53,15 +53,12 @@ export default defineNuxtModule<ModuleOptions>({
 
         //nuxt.options.build.transpile.push('nuxt');
         nuxt.options.build.transpile.push('primevue');
-        /*nuxt.options.build.transpile.push('@primevue/core');
-        nuxt.options.build.transpile.push('@primevue/icons');
-        nuxt.options.build.transpile.push('@primevue/themes');*/
 
         const styleContent = () => `
 ${registered.styles.map((style: any) => `import ${style.as} from '${style.from}';`).join('\n')}
 ${
     hasTheme
-        ? `import { Theme } from '@primevue/themes';
+        ? `import { Theme } from '@primeuix/styled';
 import ${importTheme.as} from '${normalize(importTheme.from)}';\n`
         : ''
 }
diff --git a/packages/primevue/package.json b/packages/primevue/package.json
index 4a2ad7631..09f58cff2 100644
--- a/packages/primevue/package.json
+++ b/packages/primevue/package.json
@@ -318,7 +318,8 @@
         "build:package": "pnpm run build:prebuild && pnpm run build:api && rollup -c && pnpm run build:postbuild",
         "build:api": "node ./scripts/build-api.js",
         "build:prebuild": "node ./scripts/prebuild.mjs",
-        "build:postbuild": "node ./scripts/postbuild.mjs"
+        "build:postbuild": "node ./scripts/postbuild.mjs",
+        "dev:link": "pnpm link --global && npm link"
     },
     "dependencies": {
         "@primevue/core": "workspace:*",
@@ -327,4 +328,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/primevue/rollup.config.mjs b/packages/primevue/rollup.config.mjs
index 550570ba6..8a6e869ed 100644
--- a/packages/primevue/rollup.config.mjs
+++ b/packages/primevue/rollup.config.mjs
@@ -19,7 +19,7 @@ const GLOBALS = {
 
 // externals
 const GLOBAL_EXTERNALS = ['vue', 'chart.js/auto', 'quill'];
-const INLINE_EXTERNALS = [/@primevue\/core\/.*/, /@primevue\/icons\/.*/];
+const INLINE_EXTERNALS = [/@primevue\/core\/.*/, /@primevue\/icons\/.*/, '@primeuix/styled'];
 const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS];
 
 // alias
@@ -56,8 +56,7 @@ const ALIAS_ENTRIES = [
     { find: '@primevue/core/utils', replacement: path.resolve(__dirname, '../core/src/utils/Utils.js') },
     { find: '@primevue/core', replacement: path.resolve(__dirname, '../core/src/index.js') },
     { find: '@primevue/icons/baseicon/style', replacement: path.resolve(__dirname, '../icons/src/baseicon/style/BaseIconStyle.js') },
-    { find: '@primevue/icons/baseicon', replacement: path.resolve(__dirname, '../icons/src/baseicon/BaseIcon.vue') },
-    { find: '@primevue/themes', replacement: path.resolve(__dirname, '../themes/src/index.js') }
+    { find: '@primevue/icons/baseicon', replacement: path.resolve(__dirname, '../icons/src/baseicon/BaseIcon.vue') }
 ];
 
 // plugins
diff --git a/packages/primevue/scripts/prebuild.mjs b/packages/primevue/scripts/prebuild.mjs
index 8a03b2606..250b47e7b 100644
--- a/packages/primevue/scripts/prebuild.mjs
+++ b/packages/primevue/scripts/prebuild.mjs
@@ -23,7 +23,7 @@ export { default as BaseIcon } from '@primevue/icons/baseicon';
 export { default as BaseIconStyle } from '@primevue/icons/baseicon/style';
 
 // Themes
-export * from '@primevue/themes';
+export * from '@primeuix/styled';
 
 // UseConfirm
 export * from './useconfirm/UseConfirm.js';
diff --git a/packages/primevue/src/confirmpopup/ConfirmPopup.vue b/packages/primevue/src/confirmpopup/ConfirmPopup.vue
index 823acdd9a..395e88545 100644
--- a/packages/primevue/src/confirmpopup/ConfirmPopup.vue
+++ b/packages/primevue/src/confirmpopup/ConfirmPopup.vue
@@ -59,7 +59,7 @@
 
 <script>
 import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from '@primevue/core/utils';
-import { $dt } from '@primevue/themes';
+import { $dt } from '@primeuix/styled';
 import Button from 'primevue/button';
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
 import FocusTrap from 'primevue/focustrap';
diff --git a/packages/primevue/src/knob/BaseKnob.vue b/packages/primevue/src/knob/BaseKnob.vue
index 5175183a1..8a859a2d6 100644
--- a/packages/primevue/src/knob/BaseKnob.vue
+++ b/packages/primevue/src/knob/BaseKnob.vue
@@ -1,6 +1,6 @@
 <script>
 import BaseComponent from '@primevue/core/basecomponent';
-import { $dt } from '@primevue/themes';
+import { $dt } from '@primeuix/styled';
 import KnobStyle from 'primevue/knob/style';
 
 export default {
diff --git a/packages/primevue/src/popover/Popover.vue b/packages/primevue/src/popover/Popover.vue
index 86ad02182..4a3a9661b 100755
--- a/packages/primevue/src/popover/Popover.vue
+++ b/packages/primevue/src/popover/Popover.vue
@@ -15,7 +15,7 @@
 
 <script>
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils';
-import { $dt } from '@primevue/themes';
+import { $dt } from '@primeuix/styled';
 import FocusTrap from 'primevue/focustrap';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
diff --git a/packages/primevue/src/primevue.js b/packages/primevue/src/primevue.js
index 16f7829da..1c394bf4f 100644
--- a/packages/primevue/src/primevue.js
+++ b/packages/primevue/src/primevue.js
@@ -6,7 +6,7 @@ export { default as BaseIcon } from '@primevue/icons/baseicon';
 export { default as BaseIconStyle } from '@primevue/icons/baseicon/style';
 
 // Themes
-export * from '@primevue/themes';
+export * from '@primeuix/styled';
 
 // UseConfirm
 export * from './useconfirm/UseConfirm.js';
diff --git a/packages/primevue/src/speeddial/SpeedDial.vue b/packages/primevue/src/speeddial/SpeedDial.vue
index 5b6edf1eb..56cf7eda1 100644
--- a/packages/primevue/src/speeddial/SpeedDial.vue
+++ b/packages/primevue/src/speeddial/SpeedDial.vue
@@ -66,7 +66,7 @@
 <script>
 import { DomHandler, UniqueComponentId } from '@primevue/core/utils';
 import PlusIcon from '@primevue/icons/plus';
-import { $dt } from '@primevue/themes';
+import { $dt } from '@primeuix/styled';
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
diff --git a/packages/themes/package.json b/packages/themes/package.json
index 744c1b2ea..b832eaf65 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -20,7 +20,19 @@
         ".": "./src/index.js",
         "./aura": "./src/presets/aura/index.js",
         "./lara": "./src/presets/lara/index.js",
-        "./nora": "./src/presets/nora/index.js"
+        "./nora": "./src/presets/nora/index.js",
+        "./aura/*": {
+            "types": "./types/*/index.d.ts",
+            "import": "./src/presets/aura/*/index.js"
+        },
+        "./lara/*": {
+            "types": "./types/*/index.d.ts",
+            "import": "./src/presets/lara/*/index.js"
+        },
+        "./nora/*": {
+            "types": "./types/*/index.d.ts",
+            "import": "./src/presets/nora/*/index.js"
+        }
     },
     "publishConfig": {
         "main": "./index.mjs",
@@ -57,9 +69,13 @@
         "build:package": "pnpm run build:prebuild && pnpm run build:tokens && rollup -c && pnpm run build:postbuild",
         "build:tokens": "node ./scripts/build-tokens.js",
         "build:prebuild": "node ./scripts/prebuild.mjs",
-        "build:postbuild": "node ./scripts/postbuild.mjs"
+        "build:postbuild": "node ./scripts/postbuild.mjs",
+        "dev:link": "pnpm link --global && npm link"
+    },
+    "peerDependencies": {
+        "@primeuix/styled": "^0.0.1"
     },
     "engines": {
         "node": ">=12.11.0"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/themes/src/core/actions/definePreset.js b/packages/themes/src/core/actions/definePreset.js
deleted file mode 100644
index eeea2e5d0..000000000
--- a/packages/themes/src/core/actions/definePreset.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SharedUtils } from '../utils/index.js';
-
-export default (...presets) => SharedUtils.object.mergeKeys(...presets);
diff --git a/packages/themes/src/core/actions/index.js b/packages/themes/src/core/actions/index.js
deleted file mode 100644
index 80b4352ea..000000000
--- a/packages/themes/src/core/actions/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as definePreset } from './definePreset';
-export { default as updatePreset } from './updatePreset';
-export { default as updatePrimaryPalette } from './updatePrimaryPalette';
-export { default as updateSurfacePalette } from './updateSurfacePalette';
-export { default as usePreset } from './usePreset';
-export { default as useTheme } from './useTheme';
diff --git a/packages/themes/src/core/actions/updatePreset.js b/packages/themes/src/core/actions/updatePreset.js
deleted file mode 100644
index 4424593cd..000000000
--- a/packages/themes/src/core/actions/updatePreset.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Theme from '../config/index.js';
-import { SharedUtils } from '../utils/index.js';
-
-export default (...presets) => {
-    const newPreset = SharedUtils.object.mergeKeys(Theme.getPreset(), ...presets);
-
-    Theme.setPreset(newPreset);
-
-    return newPreset;
-};
diff --git a/packages/themes/src/core/actions/updatePrimaryPalette.js b/packages/themes/src/core/actions/updatePrimaryPalette.js
deleted file mode 100644
index aa8c49a18..000000000
--- a/packages/themes/src/core/actions/updatePrimaryPalette.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { $t } from '../helpers/index.js';
-
-export default (primary) => $t().primaryPalette(primary).update().preset;
diff --git a/packages/themes/src/core/actions/updateSurfacePalette.js b/packages/themes/src/core/actions/updateSurfacePalette.js
deleted file mode 100644
index eafa37f0e..000000000
--- a/packages/themes/src/core/actions/updateSurfacePalette.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { $t } from '../helpers/index.js';
-
-export default (surface) => $t().surfacePalette(surface).update().preset;
diff --git a/packages/themes/src/core/actions/usePreset.js b/packages/themes/src/core/actions/usePreset.js
deleted file mode 100644
index 81735a533..000000000
--- a/packages/themes/src/core/actions/usePreset.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Theme from '../config/index.js';
-import { SharedUtils } from '../utils/index.js';
-
-export default (...presets) => {
-    const newPreset = SharedUtils.object.mergeKeys(...presets);
-
-    Theme.setPreset(newPreset);
-
-    return newPreset;
-};
diff --git a/packages/themes/src/core/actions/useTheme.js b/packages/themes/src/core/actions/useTheme.js
deleted file mode 100644
index adc03dcf6..000000000
--- a/packages/themes/src/core/actions/useTheme.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { $t } from '../helpers/index.js';
-
-export default (theme) => $t(theme).update({ mergePresets: false });
diff --git a/packages/themes/src/core/config/index.js b/packages/themes/src/core/config/index.js
deleted file mode 100644
index dd736a141..000000000
--- a/packages/themes/src/core/config/index.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import ThemeService from '../service/index.js';
-import { ThemeUtils } from '../utils/index.js';
-
-export default {
-    defaults: {
-        variable: {
-            prefix: 'p',
-            selector: ':root',
-            excludedKeyRegex: /^(primitive|semantic|components|directives|variables|colorscheme|light|dark|common|root|states)$/gi
-        },
-        options: {
-            prefix: 'p',
-            darkModeSelector: 'system',
-            cssLayer: false
-        }
-    },
-    _theme: undefined,
-    _layerNames: new Set(),
-    _loadedStyleNames: new Set(),
-    _loadingStyles: new Set(),
-    _tokens: {},
-    update(newValues = {}) {
-        const { theme } = newValues;
-
-        if (theme) {
-            this._theme = {
-                ...theme,
-                options: {
-                    ...this.defaults.options,
-                    ...theme.options
-                }
-            };
-            this._tokens = ThemeUtils.createTokens(this.preset, this.defaults);
-            this.clearLoadedStyleNames();
-        }
-    },
-    get theme() {
-        return this._theme;
-    },
-    get preset() {
-        return this.theme?.preset || {};
-    },
-    get options() {
-        return this.theme?.options || {};
-    },
-    get tokens() {
-        return this._tokens;
-    },
-    getTheme() {
-        return this.theme;
-    },
-    setTheme(newValue) {
-        this.update({ theme: newValue });
-        ThemeService.emit('theme:change', newValue);
-    },
-    getPreset() {
-        return this.preset;
-    },
-    setPreset(newValue) {
-        this._theme = { ...this.theme, preset: newValue };
-        this._tokens = ThemeUtils.createTokens(newValue, this.defaults);
-
-        this.clearLoadedStyleNames();
-        ThemeService.emit('preset:change', newValue);
-        ThemeService.emit('theme:change', this.theme);
-    },
-    getOptions() {
-        return this.options;
-    },
-    setOptions(newValue) {
-        this._theme = { ...this.theme, options: newValue };
-
-        this.clearLoadedStyleNames();
-        ThemeService.emit('options:change', newValue);
-        ThemeService.emit('theme:change', this.theme);
-    },
-    getLayerNames() {
-        return [...this._layerNames];
-    },
-    setLayerNames(layerName) {
-        this._layerNames.add(layerName);
-    },
-    getLoadedStyleNames() {
-        return this._loadedStyleNames;
-    },
-    isStyleNameLoaded(name) {
-        return this._loadedStyleNames.has(name);
-    },
-    setLoadedStyleName(name) {
-        this._loadedStyleNames.add(name);
-    },
-    deleteLoadedStyleName(name) {
-        this._loadedStyleNames.delete(name);
-    },
-    clearLoadedStyleNames() {
-        this._loadedStyleNames.clear();
-    },
-    getTokenValue(tokenPath) {
-        return ThemeUtils.getTokenValue(this.tokens, tokenPath, this.defaults);
-    },
-    getCommon(name = '', params) {
-        return ThemeUtils.getCommon({ name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
-    },
-    getComponent(name = '', params) {
-        const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
-
-        return ThemeUtils.getPresetC(options);
-    },
-    getDirective(name = '', params) {
-        const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
-
-        return ThemeUtils.getPresetD(options);
-    },
-    getCustomPreset(name = '', preset, selector, params) {
-        const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
-
-        return ThemeUtils.getPreset(options);
-    },
-    getLayerOrderCSS(name = '') {
-        return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
-    },
-    transformCSS(name = '', css, type = 'style', mode) {
-        return ThemeUtils.transformCSS(name, css, mode, type, this.options, { layerNames: this.setLayerNames.bind(this) }, this.defaults);
-    },
-    getCommonStyleSheet(name = '', params, props = {}) {
-        return ThemeUtils.getCommonStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
-    },
-    getStyleSheet(name, params, props = {}) {
-        return ThemeUtils.getStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
-    },
-    onStyleMounted(name) {
-        this._loadingStyles.add(name);
-    },
-    onStyleUpdated(name) {
-        this._loadingStyles.add(name);
-    },
-    onStyleLoaded(event, { name }) {
-        if (this._loadingStyles.size) {
-            this._loadingStyles.delete(name);
-
-            ThemeService.emit(`theme:${name}:load`, event); // Exp: ThemeService.emit('theme:panel-style:load', event)
-            !this._loadingStyles.size && ThemeService.emit('theme:load');
-        }
-    }
-};
diff --git a/packages/themes/src/core/helpers/color/index.js b/packages/themes/src/core/helpers/color/index.js
deleted file mode 100644
index 1a8a0749e..000000000
--- a/packages/themes/src/core/helpers/color/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as mix } from './mix';
-export { default as palette } from './palette';
-export { default as shade } from './shade';
-export { default as tint } from './tint';
diff --git a/packages/themes/src/core/helpers/color/mix.js b/packages/themes/src/core/helpers/color/mix.js
deleted file mode 100644
index eed69f35a..000000000
--- a/packages/themes/src/core/helpers/color/mix.js
+++ /dev/null
@@ -1,39 +0,0 @@
-function normalizeColor(color) {
-    if (color.length === 4) {
-        color = `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
-    }
-
-    return color;
-}
-
-function hexToRgb(hex) {
-    var bigint = parseInt(hex.substring(1), 16);
-    var r = (bigint >> 16) & 255;
-    var g = (bigint >> 8) & 255;
-    var b = bigint & 255;
-
-    return { r, g, b };
-}
-
-function rgbToHex(r, g, b) {
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-}
-
-export default (color1, color2, weight) => {
-    color1 = normalizeColor(color1);
-    color2 = normalizeColor(color2);
-
-    var p = weight / 100;
-    var w = p * 2 - 1;
-    var w1 = (w + 1) / 2.0;
-    var w2 = 1 - w1;
-
-    var rgb1 = hexToRgb(color1);
-    var rgb2 = hexToRgb(color2);
-
-    var r = Math.round(rgb1.r * w1 + rgb2.r * w2);
-    var g = Math.round(rgb1.g * w1 + rgb2.g * w2);
-    var b = Math.round(rgb1.b * w1 + rgb2.b * w2);
-
-    return rgbToHex(r, g, b);
-};
diff --git a/packages/themes/src/core/helpers/color/palette.js b/packages/themes/src/core/helpers/color/palette.js
deleted file mode 100644
index 66f799ae1..000000000
--- a/packages/themes/src/core/helpers/color/palette.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import shade from './shade';
-import tint from './tint';
-
-const scales = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-
-export default (color) => {
-    if (/{([^}]*)}/g.test(color)) {
-        const token = color.replace(/{|}/g, '');
-
-        return scales.reduce((acc, scale) => ((acc[scale] = `{${token}.${scale}}`), acc), {});
-    }
-
-    return typeof color === 'string' ? scales.reduce((acc, scale, i) => ((acc[scale] = i <= 5 ? tint(color, (5 - i) * 19) : shade(color, (i - 5) * 15)), acc), {}) : color;
-};
diff --git a/packages/themes/src/core/helpers/color/shade.js b/packages/themes/src/core/helpers/color/shade.js
deleted file mode 100644
index 8c65119df..000000000
--- a/packages/themes/src/core/helpers/color/shade.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import mix from './mix';
-
-export default (color, percent) => mix('#000000', color, percent);
diff --git a/packages/themes/src/core/helpers/color/tint.js b/packages/themes/src/core/helpers/color/tint.js
deleted file mode 100644
index f5f8f8ea6..000000000
--- a/packages/themes/src/core/helpers/color/tint.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import mix from './mix';
-
-export default (color, percent) => mix('#ffffff', color, percent);
diff --git a/packages/themes/src/core/helpers/css.js b/packages/themes/src/core/helpers/css.js
deleted file mode 100644
index 0d39b2b5e..000000000
--- a/packages/themes/src/core/helpers/css.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { SharedUtils } from '../utils/index.js';
-import { dt } from './dt';
-
-export const css = (style) => SharedUtils.object.getItemValue(style, { dt });
diff --git a/packages/themes/src/core/helpers/dt.js b/packages/themes/src/core/helpers/dt.js
deleted file mode 100644
index 9d0e0c3c9..000000000
--- a/packages/themes/src/core/helpers/dt.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Theme from '../config/index.js';
-import { SharedUtils } from '../utils/index.js';
-
-export const $dt = (tokenPath) => {
-    const theme = Theme.getTheme();
-
-    const variable = dtwt(theme, tokenPath, undefined, 'variable');
-    const name = variable.match(/--[\w-]+/g)?.[0];
-    const value = dtwt(theme, tokenPath, undefined, 'value');
-
-    return {
-        name,
-        variable,
-        value
-    };
-};
-
-export const dt = (...args) => {
-    return dtwt(Theme.getTheme(), ...args);
-};
-
-export const dtwt = (theme = {}, tokenPath, fallback, type = 'variable') => {
-    if (tokenPath) {
-        const { variable: VARIABLE, options: OPTIONS } = Theme.defaults || {};
-        const { prefix, transform } = theme?.options || OPTIONS || {};
-        const regex = /{([^}]*)}/g;
-        const token = SharedUtils.object.test(regex, tokenPath) ? tokenPath : `{${tokenPath}}`;
-        const isStrictTransform = type === 'value' || transform === 'strict'; // @todo - TRANSFORM: strict | lenient(default)
-
-        return isStrictTransform ? Theme.getTokenValue(tokenPath) : SharedUtils.object.getVariableValue(token, undefined, prefix, [VARIABLE.excludedKeyRegex], fallback);
-    }
-
-    return '';
-};
diff --git a/packages/themes/src/core/helpers/index.js b/packages/themes/src/core/helpers/index.js
deleted file mode 100644
index 8bfba38ab..000000000
--- a/packages/themes/src/core/helpers/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './color/index.js';
-export * from './css';
-export * from './dt';
-export * from './t';
-export { default as toVariables } from './toVariables';
diff --git a/packages/themes/src/core/helpers/t.js b/packages/themes/src/core/helpers/t.js
deleted file mode 100644
index 7f424ad45..000000000
--- a/packages/themes/src/core/helpers/t.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import Theme from '../config/index.js';
-import { SharedUtils } from '../utils/index.js';
-
-export const $t = (theme = {}) => {
-    let { preset: _preset, options: _options } = theme;
-
-    return {
-        preset(value) {
-            _preset = _preset ? SharedUtils.object.mergeKeys(_preset, value) : value;
-
-            return this;
-        },
-        options(value) {
-            _options = _options ? { ..._options, ...value } : value;
-
-            return this;
-        },
-        // features
-        primaryPalette(primary) {
-            const { semantic } = _preset || {};
-
-            _preset = { ..._preset, semantic: { ...semantic, primary } };
-
-            return this;
-        },
-        surfacePalette(surface) {
-            const { semantic } = _preset || {};
-            const lightSurface = surface?.hasOwnProperty('light') ? surface?.light : surface;
-            const darkSurface = surface?.hasOwnProperty('dark') ? surface?.dark : surface;
-            const newColorScheme = {
-                colorScheme: {
-                    light: { ...semantic?.colorScheme?.light, ...(!!lightSurface && { surface: lightSurface }) },
-                    dark: { ...semantic?.colorScheme?.dark, ...(!!darkSurface && { surface: darkSurface }) }
-                }
-            };
-
-            _preset = { ..._preset, semantic: { ...semantic, ...newColorScheme } };
-
-            return this;
-        },
-        // actions
-        define({ useDefaultPreset = false, useDefaultOptions = false } = {}) {
-            return {
-                preset: useDefaultPreset ? Theme.getPreset() : _preset,
-                options: useDefaultOptions ? Theme.getOptions() : _options
-            };
-        },
-        update({ mergePresets = true, mergeOptions = true } = {}) {
-            const newTheme = {
-                preset: mergePresets ? SharedUtils.object.mergeKeys(Theme.getPreset(), _preset) : _preset,
-                options: mergeOptions ? { ...Theme.getOptions(), ..._options } : _options
-            };
-
-            Theme.setTheme(newTheme);
-
-            return newTheme;
-        },
-        use(options) {
-            const newTheme = this.define(options);
-
-            Theme.setTheme(newTheme);
-
-            return newTheme;
-        }
-    };
-};
diff --git a/packages/themes/src/core/helpers/toVariables.js b/packages/themes/src/core/helpers/toVariables.js
deleted file mode 100644
index 4fd1f1b92..000000000
--- a/packages/themes/src/core/helpers/toVariables.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Theme from '../config/index.js';
-import { SharedUtils } from '../utils/index.js';
-
-export default function (theme, options = {}) {
-    const VARIABLE = Theme.defaults.variable;
-    const { prefix = VARIABLE.prefix, selector = VARIABLE.selector, excludedKeyRegex = VARIABLE.excludedKeyRegex } = options;
-
-    const _toVariables = (_theme, _prefix = '') => {
-        return Object.entries(_theme).reduce(
-            (acc, [key, value]) => {
-                const px = SharedUtils.object.test(excludedKeyRegex, key) ? SharedUtils.object.toNormalizeVariable(_prefix) : SharedUtils.object.toNormalizeVariable(_prefix, SharedUtils.object.toKebabCase(key));
-                const v = SharedUtils.object.toValue(value);
-
-                if (SharedUtils.object.isObject(v)) {
-                    const { variables, tokens } = _toVariables(v, px);
-
-                    SharedUtils.object.merge(acc['tokens'], tokens);
-                    SharedUtils.object.merge(acc['variables'], variables);
-                } else {
-                    acc['tokens'].push((prefix ? px.replace(`${prefix}-`, '') : px).replaceAll('-', '.'));
-                    SharedUtils.object.setProperty(acc['variables'], SharedUtils.object.getVariableName(px), SharedUtils.object.getVariableValue(v, px, prefix, [excludedKeyRegex]));
-                }
-
-                return acc;
-            },
-            { variables: [], tokens: [] }
-        );
-    };
-
-    const { variables, tokens } = _toVariables(theme, prefix);
-
-    return {
-        value: variables,
-        tokens,
-        declarations: variables.join(''),
-        css: SharedUtils.object.getRule(selector, variables.join(''))
-    };
-}
diff --git a/packages/themes/src/core/service/index.js b/packages/themes/src/core/service/index.js
deleted file mode 100644
index bdde31000..000000000
--- a/packages/themes/src/core/service/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-function createService() {
-    const allHandlers = new Map();
-
-    return {
-        on(type, handler) {
-            let handlers = allHandlers.get(type);
-
-            if (!handlers) handlers = [handler];
-            else handlers.push(handler);
-
-            allHandlers.set(type, handlers);
-
-            return this;
-        },
-
-        off(type, handler) {
-            let handlers = allHandlers.get(type);
-
-            if (handlers) {
-                handlers.splice(handlers.indexOf(handler) >>> 0, 1);
-            }
-
-            return this;
-        },
-
-        emit(type, evt) {
-            let handlers = allHandlers.get(type);
-
-            if (handlers) {
-                handlers.slice().map((handler) => {
-                    handler(evt);
-                });
-            }
-        }
-    };
-}
-
-const ThemeService = createService();
-
-export default ThemeService;
diff --git a/packages/themes/src/core/utils/index.js b/packages/themes/src/core/utils/index.js
deleted file mode 100644
index 885be7b97..000000000
--- a/packages/themes/src/core/utils/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as SharedUtils } from './sharedUtils';
-export { default as ThemeUtils } from './themeUtils';
diff --git a/packages/themes/src/core/utils/sharedUtils.js b/packages/themes/src/core/utils/sharedUtils.js
deleted file mode 100644
index 2af8b6aa9..000000000
--- a/packages/themes/src/core/utils/sharedUtils.js
+++ /dev/null
@@ -1,225 +0,0 @@
-export default {
-    object: {
-        isEmpty(value) {
-            return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0);
-        },
-        isNotEmpty(value) {
-            return !this.isEmpty(value);
-        },
-        isFunction(value) {
-            return !!(value && value.constructor && value.call && value.apply);
-        },
-        isObject(value, empty = true) {
-            return value instanceof Object && value.constructor === Object && (empty || Object.keys(value).length !== 0);
-        },
-        isArray(value, empty = true) {
-            return Array.isArray(value) && (empty || value.length !== 0);
-        },
-        isString(value, empty = true) {
-            return typeof value === 'string' && (empty || value !== '');
-        },
-        isNumber(value) {
-            return !isNaN(value);
-        },
-        toFlatCase(str) {
-            // convert snake, kebab, camel and pascal cases to flat case
-            return this.isString(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
-        },
-        toKebabCase(str) {
-            // convert snake, camel and pascal cases to kebab case
-            return this.isString(str)
-                ? str
-                      .replace(/(_)/g, '-')
-                      .replace(/[A-Z]/g, (c, i) => (i === 0 ? c : '-' + c.toLowerCase()))
-                      .toLowerCase()
-                : str;
-        },
-        toTokenKey(str) {
-            return this.isString(str) ? str.replace(/[A-Z]/g, (c, i) => (i === 0 ? c : '.' + c.toLowerCase())).toLowerCase() : str;
-        },
-        merge(value1, value2) {
-            if (this.isArray(value1)) {
-                value1.push(...(value2 || []));
-            } else if (this.isObject(value1)) {
-                Object.assign(value1, value2);
-            }
-        },
-        mergeKeysByRegex(target = {}, source = {}, regex) {
-            const mergedObj = { ...target };
-
-            Object.keys(source).forEach((key) => {
-                if (this.test(regex, key)) {
-                    if (this.isObject(source[key]) && key in target && this.isObject(target[key])) {
-                        mergedObj[key] = this.mergeKeysByRegex(target[key], source[key], regex);
-                    } else {
-                        mergedObj[key] = source[key];
-                    }
-                } else {
-                    mergedObj[key] = source[key];
-                }
-            });
-
-            return mergedObj;
-        },
-        mergeKeys(...args) {
-            const _mergeKeys = (target = {}, source = {}) => {
-                const mergedObj = { ...target };
-
-                Object.keys(source).forEach((key) => {
-                    if (this.isObject(source[key]) && key in target && this.isObject(target[key])) {
-                        mergedObj[key] = _mergeKeys(target[key], source[key]);
-                    } else {
-                        mergedObj[key] = source[key];
-                    }
-                });
-
-                return mergedObj;
-            };
-
-            return args.reduce((acc, obj, i) => (i === 0 ? obj : _mergeKeys(acc, obj)), {});
-        },
-        getItemValue(obj, ...params) {
-            return this.isFunction(obj) ? obj(...params) : obj;
-        },
-        getOptionValue(options, key = '', params = {}) {
-            const fKeys = this.toFlatCase(key).split('.');
-            const fKey = fKeys.shift();
-
-            return fKey
-                ? this.isObject(options)
-                    ? this.getOptionValue(this.getItemValue(options[Object.keys(options).find((k) => this.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
-                    : undefined
-                : this.getItemValue(options, params);
-        },
-        test(regex, str) {
-            if (regex) {
-                const match = regex.test(str);
-
-                regex.lastIndex = 0;
-
-                return match;
-            }
-
-            return false;
-        },
-        toValue(value) {
-            // Check for Figma (value-type)
-            return this.isObject(value) && value.hasOwnProperty('value') && value.hasOwnProperty('type') ? value.value : value;
-        },
-        toUnit(value, variable = '') {
-            const excludedProperties = ['opacity', 'z-index', 'line-height', 'font-weight', 'flex', 'flex-grow', 'flex-shrink', 'order'];
-
-            if (!excludedProperties.some((property) => variable.endsWith(property))) {
-                const val = `${value}`.trim();
-                const valArr = val.split(' ');
-
-                return valArr.map((v) => (this.isNumber(v) ? `${v}px` : v)).join(' ');
-            }
-
-            return value;
-        },
-        toNormalizePrefix(prefix) {
-            return prefix.replaceAll(/ /g, '').replace(/[^\w]/g, '-');
-        },
-        toNormalizeVariable(prefix = '', variable = '') {
-            return this.toNormalizePrefix(`${this.isString(prefix, false) && this.isString(variable, false) ? `${prefix}-` : prefix}${variable}`);
-        },
-        getVariableName(prefix = '', variable = '') {
-            return `--${this.toNormalizeVariable(prefix, variable)}`;
-        },
-        getVariableValue(value, variable = '', prefix = '', excludedKeyRegexes = [], fallback) {
-            if (this.isString(value)) {
-                const regex = /{([^}]*)}/g;
-                const val = value.trim();
-
-                if (this.test(regex, val)) {
-                    const _val = val.replaceAll(regex, (v) => {
-                        const path = v.replace(/{|}/g, '');
-                        const keys = path.split('.').filter((_v) => !excludedKeyRegexes.some((_r) => this.test(_r, _v)));
-
-                        return `var(${this.getVariableName(prefix, this.toKebabCase(keys.join('-')))}${this.isNotEmpty(fallback) ? `, ${fallback}` : ''})`;
-                    });
-
-                    const calculationRegex = /(\d+\s+[\+\-\*\/]\s+\d+)/g;
-                    const cleanedVarRegex = /var\([^)]+\)/g;
-
-                    return this.test(calculationRegex, _val.replace(cleanedVarRegex, '0')) ? `calc(${_val})` : _val;
-                }
-
-                return this.toUnit(val, variable);
-            } else if (this.isNumber(value)) {
-                return this.toUnit(value, variable);
-            }
-
-            return undefined;
-        },
-        getComputedValue(obj = {}, value) {
-            if (this.isString(value)) {
-                const regex = /{([^}]*)}/g;
-                const val = value.trim();
-
-                return this.test(regex, val) ? val.replaceAll(regex, (v) => this.getOptionValue(obj, v.replace(/{|}/g, ''))) : val;
-            } else if (this.isNumber(value)) {
-                return value;
-            }
-
-            return undefined;
-        },
-        setProperty(properties, key, value) {
-            if (this.isString(key, false)) {
-                properties.push(`${key}:${value};`);
-            }
-        },
-        getRule(selector, properties) {
-            if (selector) {
-                return `${selector}{${properties}}`;
-            }
-
-            return '';
-        },
-        minifyCSS(css) {
-            return css
-                ? css
-                      .replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '')
-                      .replace(/ {2,}/g, ' ')
-                      .replace(/ ([{:}]) /g, '$1')
-                      .replace(/([;,]) /g, '$1')
-                      .replace(/ !/g, '!')
-                      .replace(/: /g, ':')
-                : css;
-        }
-    },
-    dom: {
-        isClient() {
-            return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-        },
-        addClass(element, className) {
-            if (element && className && !this.hasClass(element, className)) {
-                if (element.classList) element.classList.add(className);
-                else element.className += ' ' + className;
-            }
-        },
-        removeClass(element, className) {
-            if (element && className) {
-                if (element.classList) element.classList.remove(className);
-                else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-            }
-        },
-        hasClass(element, className) {
-            if (element) {
-                if (element.classList) return element.classList.contains(className);
-                else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
-            }
-
-            return false;
-        },
-        removeMultipleClasses(element, classNames) {
-            if (element && classNames) {
-                [classNames]
-                    .flat()
-                    .filter(Boolean)
-                    .forEach((cNames) => cNames.split(' ').forEach((className) => this.removeClass(element, className)));
-            }
-        }
-    }
-};
diff --git a/packages/themes/src/core/utils/themeUtils.js b/packages/themes/src/core/utils/themeUtils.js
deleted file mode 100644
index 3676f73c0..000000000
--- a/packages/themes/src/core/utils/themeUtils.js
+++ /dev/null
@@ -1,283 +0,0 @@
-import { toVariables } from '../helpers/index.js';
-import SharedUtils from './sharedUtils';
-
-export default {
-    regex: {
-        rules: {
-            class: {
-                pattern: /^\.([a-zA-Z][\w-]*)$/,
-                resolve(value) {
-                    return { type: 'class', selector: value, matched: this.pattern.test(value.trim()) };
-                }
-            },
-            attr: {
-                pattern: /^\[(.*)\]$/,
-                resolve(value) {
-                    return { type: 'attr', selector: `:root${value}`, matched: this.pattern.test(value.trim()) };
-                }
-            },
-            media: {
-                pattern: /^@media (.*)$/,
-                resolve(value) {
-                    return { type: 'media', selector: `${value}{:root{[CSS]}}`, matched: this.pattern.test(value.trim()) };
-                }
-            },
-            system: {
-                pattern: /^system$/,
-                resolve(value) {
-                    return { type: 'system', selector: '@media (prefers-color-scheme: dark){:root{[CSS]}}', matched: this.pattern.test(value.trim()) };
-                }
-            },
-            custom: {
-                resolve(value) {
-                    return { type: 'custom', selector: value, matched: true };
-                }
-            }
-        },
-        resolve(value) {
-            const rules = Object.keys(this.rules)
-                .filter((k) => k !== 'custom')
-                .map((r) => this.rules[r]);
-
-            return [value].flat().map((v) => rules.map((r) => r.resolve(v)).find((rr) => rr.matched) ?? this.rules.custom.resolve(v));
-        }
-    },
-    _toVariables(theme, options) {
-        return toVariables(theme, { prefix: options?.prefix });
-    },
-    getCommon({ name = '', theme = {}, params, set, defaults }) {
-        const { preset, options } = theme;
-        let primitive_css, primitive_tokens, semantic_css, semantic_tokens;
-
-        if (SharedUtils.object.isNotEmpty(preset)) {
-            const { primitive, semantic } = preset;
-            const { colorScheme, ...sRest } = semantic || {};
-            const { dark, ...csRest } = colorScheme || {};
-            const prim_var = SharedUtils.object.isNotEmpty(primitive) ? this._toVariables({ primitive }, options) : {};
-            const sRest_var = SharedUtils.object.isNotEmpty(sRest) ? this._toVariables({ semantic: sRest }, options) : {};
-            const csRest_var = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options) : {};
-            const dark_var = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark }, options) : {};
-
-            const [prim_css, prim_tokens] = [prim_var.declarations ?? '', prim_var.tokens];
-            const [sRest_css, sRest_tokens] = [sRest_var.declarations ?? '', sRest_var.tokens || []];
-            const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? '', csRest_var.tokens || []];
-            const [dark_css, dark_tokens] = [dark_var.declarations ?? '', dark_var.tokens || []];
-
-            primitive_css = this.transformCSS(name, prim_css, 'light', 'variable', options, set, defaults);
-            primitive_tokens = prim_tokens;
-
-            const semantic_light_css = this.transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults);
-            const semantic_dark_css = this.transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, set, defaults);
-
-            semantic_css = `${semantic_light_css}${semantic_dark_css}`;
-            semantic_tokens = [...new Set([...sRest_tokens, ...csRest_tokens, ...dark_tokens])];
-        }
-
-        return {
-            primitive: {
-                css: primitive_css,
-                tokens: primitive_tokens
-            },
-            semantic: {
-                css: semantic_css,
-                tokens: semantic_tokens
-            }
-        };
-    },
-    getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) {
-        const _name = name.replace('-directive', '');
-        const { colorScheme, ...vRest } = preset;
-        const { dark, ...csRest } = colorScheme || {};
-        const vRest_var = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [_name]: vRest }, options) : {};
-        const csRest_var = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [_name]: csRest }, options) : {};
-        const dark_var = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [_name]: dark }, options) : {};
-
-        const [vRest_css, vRest_tokens] = [vRest_var.declarations ?? '', vRest_var.tokens || []];
-        const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? '', csRest_var.tokens || []];
-        const [dark_css, dark_tokens] = [dark_var.declarations ?? '', dark_var.tokens || []];
-        const tokens = [...new Set([...vRest_tokens, ...csRest_tokens, ...dark_tokens])];
-
-        const light_variable_css = this.transformCSS(_name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector);
-        const dark_variable_css = this.transformCSS(_name, dark_css, 'dark', 'variable', options, set, defaults, selector);
-
-        return {
-            css: `${light_variable_css}${dark_variable_css}`,
-            tokens
-        };
-    },
-    getPresetC({ name = '', theme = {}, params, set, defaults }) {
-        const { preset, options } = theme;
-        const cPreset = preset?.components?.[name];
-
-        return this.getPreset({ name, preset: cPreset, options, params, set, defaults });
-    },
-    getPresetD({ name = '', theme = {}, params, set, defaults }) {
-        const dName = name.replace('-directive', '');
-        const { preset, options } = theme;
-        const dPreset = preset?.directives?.[dName];
-
-        return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults });
-    },
-    getColorSchemeOption(options, defaults) {
-        return this.regex.resolve(options.darkModeSelector ?? defaults.options.darkModeSelector);
-    },
-    getLayerOrder(name, options = {}, params, defaults) {
-        const { cssLayer } = options;
-
-        if (cssLayer) {
-            const order = SharedUtils.object.getItemValue(cssLayer.order || 'primeui', params);
-
-            return `@layer ${order}`;
-        }
-
-        return '';
-    },
-    getCommonStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
-        const common = this.getCommon({ name, theme, params, set, defaults });
-        const _props = Object.entries(props)
-            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
-            .join(' ');
-
-        return Object.entries(common || {})
-            .reduce((acc, [key, value]) => {
-                if (value?.css) {
-                    const _css = SharedUtils.object.minifyCSS(value?.css);
-                    const id = `${key}-variables`;
-
-                    acc.push(`<style type="text/css" data-primevue-style-id="${id}" ${_props}>${_css}</style>`);
-                }
-
-                return acc;
-            }, [])
-            .join('');
-    },
-    getStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
-        const options = { name, theme, params, set, defaults };
-        const preset_css = (name.includes('-directive') ? this.getPresetD(options) : this.getPresetC(options))?.css;
-        const _props = Object.entries(props)
-            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
-            .join(' ');
-
-        return preset_css ? `<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${SharedUtils.object.minifyCSS(preset_css)}</style>` : '';
-    },
-    createTokens(obj = {}, defaults, parentKey = '', parentPath = '', tokens = {}) {
-        Object.entries(obj).forEach(([key, value]) => {
-            const currentKey = SharedUtils.object.test(defaults.variable.excludedKeyRegex, key) ? parentKey : parentKey ? `${parentKey}.${SharedUtils.object.toTokenKey(key)}` : SharedUtils.object.toTokenKey(key);
-            const currentPath = parentPath ? `${parentPath}.${key}` : key;
-
-            if (SharedUtils.object.isObject(value)) {
-                this.createTokens(value, defaults, currentKey, currentPath, tokens);
-            } else {
-                tokens[currentKey] ||= {
-                    paths: [],
-                    computed(colorScheme, tokenPathMap = {}) {
-                        if (colorScheme) {
-                            const path = this.paths.find((p) => p.scheme === colorScheme) || this.paths.find((p) => p.scheme === 'none');
-
-                            return path?.computed(colorScheme, tokenPathMap['binding']);
-                        }
-
-                        return this.paths.map((p) => p.computed(p.scheme, tokenPathMap[p.scheme]));
-                    }
-                };
-                tokens[currentKey].paths.push({
-                    path: currentPath,
-                    value,
-                    scheme: currentPath.includes('colorScheme.light') ? 'light' : currentPath.includes('colorScheme.dark') ? 'dark' : 'none',
-                    computed(colorScheme, tokenPathMap = {}) {
-                        const regex = /{([^}]*)}/g;
-                        let computedValue = value;
-
-                        tokenPathMap['name'] = this.path;
-                        tokenPathMap['binding'] ||= {};
-
-                        if (SharedUtils.object.test(regex, value)) {
-                            const val = value.trim();
-                            const _val = val.replaceAll(regex, (v) => {
-                                const path = v.replace(/{|}/g, '');
-
-                                return tokens[path]?.computed(colorScheme, tokenPathMap)?.value;
-                            });
-
-                            const calculationRegex = /(\d+\w*\s+[\+\-\*\/]\s+\d+\w*)/g;
-                            const cleanedVarRegex = /var\([^)]+\)/g;
-
-                            computedValue = SharedUtils.object.test(calculationRegex, _val.replace(cleanedVarRegex, '0')) ? `calc(${_val})` : _val;
-                        }
-
-                        SharedUtils.object.isEmpty(tokenPathMap['binding']) && delete tokenPathMap['binding'];
-
-                        return {
-                            colorScheme,
-                            path: this.path,
-                            paths: tokenPathMap,
-                            value: computedValue.includes('undefined') ? undefined : computedValue
-                        };
-                    }
-                });
-            }
-        });
-
-        return tokens;
-    },
-    getTokenValue(tokens, path, defaults) {
-        const normalizePath = (str) => {
-            const strArr = str.split('.');
-
-            return strArr.filter((s) => !SharedUtils.object.test(defaults.variable.excludedKeyRegex, s.toLowerCase())).join('.');
-        };
-
-        const token = normalizePath(path);
-        const colorScheme = path.includes('colorScheme.light') ? 'light' : path.includes('colorScheme.dark') ? 'dark' : undefined;
-        const computedValues = [tokens[token]?.computed(colorScheme)].flat().filter((computed) => computed);
-
-        return computedValues.length === 1
-            ? computedValues[0].value
-            : computedValues.reduce((acc = {}, computed) => {
-                  const { colorScheme: cs, ...rest } = computed;
-
-                  acc[cs] = rest;
-
-                  return acc;
-              }, undefined);
-    },
-    transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
-        if (SharedUtils.object.isNotEmpty(css)) {
-            const { cssLayer } = options;
-
-            if (type !== 'style') {
-                const colorSchemeOption = this.getColorSchemeOption(options, defaults);
-                const _css = selector ? SharedUtils.object.getRule(selector, css) : css;
-
-                css =
-                    mode === 'dark'
-                        ? colorSchemeOption.reduce((acc, { selector: _selector }) => {
-                              if (SharedUtils.object.isNotEmpty(_selector)) {
-                                  acc += _selector.includes('[CSS]') ? _selector.replace('[CSS]', _css) : SharedUtils.object.getRule(_selector, _css);
-                              }
-
-                              return acc;
-                          }, '')
-                        : SharedUtils.object.getRule(selector ?? ':root', css);
-            }
-
-            if (cssLayer) {
-                const layerOptions = {
-                    name: 'primeui',
-                    order: 'primeui'
-                };
-
-                SharedUtils.object.isObject(cssLayer) && (layerOptions.name = SharedUtils.object.getItemValue(cssLayer.name, { name, type }));
-
-                if (SharedUtils.object.isNotEmpty(layerOptions.name)) {
-                    css = SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css);
-                    set?.layerNames(layerOptions.name);
-                }
-            }
-
-            return css;
-        }
-
-        return '';
-    }
-};
diff --git a/packages/themes/src/index.d.ts b/packages/themes/src/index.d.ts
index 3ddb6dd48..09ed81955 100644
--- a/packages/themes/src/index.d.ts
+++ b/packages/themes/src/index.d.ts
@@ -1,7 +1 @@
-/* @todo - remove any types */
-export function definePreset(...arg: any[]): any;
-export function updatePreset(...arg: any[]): any;
-export function updatePrimaryPalette(palette?: any): any;
-export function updateSurfacePalette(palette?: any): string;
-export function usePreset(...arg: any[]): any;
-export function useTheme(theme: any): any;
+export * from '@primeuix/styled';
diff --git a/packages/themes/src/index.js b/packages/themes/src/index.js
index d23435fee..09ed81955 100644
--- a/packages/themes/src/index.js
+++ b/packages/themes/src/index.js
@@ -1,5 +1 @@
-export * from './core/actions/index.js';
-export { default as Theme } from './core/config/index.js';
-export * from './core/helpers/index.js';
-export { default as ThemeService } from './core/service/index.js';
-export * from './core/utils/index.js';
+export * from '@primeuix/styled';