diff --git a/packages/materials/package.json b/packages/materials/package.json
index ccd4fbc2..1ed6c4f4 100644
--- a/packages/materials/package.json
+++ b/packages/materials/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@sa/utils": "workspace:*",
-    "@simonwep/pickr": "1.9.0",
     "simplebar-vue": "2.3.3"
   },
   "devDependencies": {
diff --git a/packages/materials/src/index.ts b/packages/materials/src/index.ts
index 99694d1b..f6ca01d2 100644
--- a/packages/materials/src/index.ts
+++ b/packages/materials/src/index.ts
@@ -1,7 +1,6 @@
 import AdminLayout, { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './libs/admin-layout';
 import PageTab from './libs/page-tab';
 import SimpleScrollbar from './libs/simple-scrollbar';
-import ColorPicker from './libs/color-picker';
 
-export { AdminLayout, LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX, PageTab, SimpleScrollbar, ColorPicker };
+export { AdminLayout, LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX, PageTab, SimpleScrollbar };
 export * from './types';
diff --git a/packages/materials/src/libs/color-picker/index.ts b/packages/materials/src/libs/color-picker/index.ts
deleted file mode 100644
index 131b1d13..00000000
--- a/packages/materials/src/libs/color-picker/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ColorPicker from './index.vue';
-
-export default ColorPicker;
diff --git a/packages/materials/src/libs/color-picker/index.vue b/packages/materials/src/libs/color-picker/index.vue
deleted file mode 100644
index dfb8fa8c..00000000
--- a/packages/materials/src/libs/color-picker/index.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
-import ColorPicker from '@simonwep/pickr';
-import '@simonwep/pickr/dist/themes/nano.min.css';
-
-defineOptions({
-  name: 'ColorPicker'
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  palettes: () => [
-    '#3b82f6',
-    '#6366f1',
-    '#8b5cf6',
-    '#a855f7',
-    '#0ea5e9',
-    '#06b6d4',
-    '#f43f5e',
-    '#ef4444',
-    '#ec4899',
-    '#d946ef',
-    '#f97316',
-    '#f59e0b',
-    '#eab308',
-    '#84cc16',
-    '#22c55e',
-    '#10b981',
-    '#14b8a6'
-  ]
-});
-
-const emit = defineEmits<Emits>();
-
-interface Props {
-  color: string;
-  palettes?: string[];
-  disabled?: boolean;
-}
-
-interface Emits {
-  (e: 'update:color', value: string): void;
-}
-
-const domRef = ref<HTMLElement | null>(null);
-const instance = ref<ColorPicker | null>(null);
-
-function handleColorChange(hsva: ColorPicker.HSVaColor) {
-  const color = hsva.toHEXA().toString();
-  emit('update:color', color);
-}
-
-function initColorPicker() {
-  if (!domRef.value) return;
-
-  instance.value = ColorPicker.create({
-    el: domRef.value,
-    theme: 'nano',
-    swatches: props.palettes,
-    lockOpacity: true,
-    default: props.color,
-    disabled: props.disabled,
-    components: {
-      preview: true,
-      opacity: false,
-      hue: true,
-      interaction: {
-        hex: true,
-        rgba: true,
-        input: true
-      }
-    }
-  });
-
-  instance.value.on('change', handleColorChange);
-}
-
-function updateColor(color: string) {
-  if (!instance.value) return;
-
-  instance.value.setColor(color);
-}
-
-function updateDisabled(disabled: boolean) {
-  if (!instance.value) return;
-
-  if (disabled) {
-    instance.value.disable();
-  } else {
-    instance.value.enable();
-  }
-}
-
-watch(
-  () => props.color,
-  value => {
-    updateColor(value);
-  }
-);
-
-watch(
-  () => props.disabled,
-  value => {
-    updateDisabled(value);
-  }
-);
-
-onMounted(() => {
-  initColorPicker();
-});
-</script>
-
-<template>
-  <div ref="domRef"></div>
-</template>
-
-<style scoped></style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 11d9da26..06693d74 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -202,9 +202,6 @@ importers:
       '@sa/utils':
         specifier: workspace:*
         version: link:../utils
-      '@simonwep/pickr':
-        specifier: 1.9.0
-        version: 1.9.0
       simplebar-vue:
         specifier: 2.3.3
         version: 2.3.3(vue@3.4.15)
@@ -1176,15 +1173,15 @@ packages:
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  /@iconify/utils@2.1.16:
-    resolution: {integrity: sha512-2q2POA+bg1iKFMT3ZAeS8+Lo2PcbTXH2QKdQ9XwxSyCUg+XHA0ZW7mBoW8v0cU/SgitnM2OheEouPw7mRwY+Bg==}
+  /@iconify/utils@2.1.17:
+    resolution: {integrity: sha512-YSzYJwMsCUq1kayUqhQnmJ8mrz4R+CZp/nwc68CEEgWG20eqDplAwyIHKVAzrIRUBzgfgYkGgJSs/z+RaKkKtw==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.7
       '@iconify/types': 2.0.0
       debug: 4.3.4
       kolorist: 1.8.0
-      local-pkg: 0.4.3
+      local-pkg: 0.5.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1563,13 +1560,6 @@ packages:
       - supports-color
     dev: true
 
-  /@simonwep/pickr@1.9.0:
-    resolution: {integrity: sha512-oEYvv15PyfZzjoAzvXYt3UyNGwzsrpFxLaZKzkOSd0WYBVwLd19iJerePDONxC1iF6+DpcswPdLIM2KzCJuYFg==}
-    dependencies:
-      core-js: 3.32.2
-      nanopop: 2.3.0
-    dev: false
-
   /@sindresorhus/is@5.6.0:
     resolution: {integrity: sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==}
     engines: {node: '>=14.16'}
@@ -1983,7 +1973,7 @@ packages:
   /@unocss/preset-icons@0.58.3:
     resolution: {integrity: sha512-SA4Eu4rOQ9+zUgIyK6RacS01ygm0PJWkqKlD8ccrBqEyZapqiU+vLL+v6X8YVjoZjR+5CVgcMD5Km7zEQgqXQw==}
     dependencies:
-      '@iconify/utils': 2.1.16
+      '@iconify/utils': 2.1.17
       '@unocss/core': 0.58.3
       ofetch: 1.3.3
     transitivePeerDependencies:
@@ -2198,7 +2188,7 @@ packages:
       pathe: 1.1.2
       vite-dev-rpc: 0.1.4(vite@5.0.12)
       vite-hot-client: 0.2.3(vite@5.0.12)
-      vite-plugin-inspect: 0.8.2(vite@5.0.12)
+      vite-plugin-inspect: 0.8.3(vite@5.0.12)
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
@@ -2700,7 +2690,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001579
+      caniuse-lite: 1.0.30001580
       electron-to-chromium: 1.4.645
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.22.2)
@@ -2870,8 +2860,8 @@ packages:
     resolution: {integrity: sha512-ceOhN1DL7Y4O6M0j9ICgmTYziV89WMd96SvSl0REd8PMgrY0B/WBOPoed5S1KUmJqXgUXh8gzSe6E3ae27upsQ==}
     dev: false
 
-  /caniuse-lite@1.0.30001579:
-    resolution: {integrity: sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==}
+  /caniuse-lite@1.0.30001580:
+    resolution: {integrity: sha512-mtj5ur2FFPZcCEpXFy8ADXbDACuNFXg6mxVDqp7tqooX6l3zwm+d8EPoeOSIFRDvHs8qu7/SLFOGniULkcH2iA==}
     dev: true
 
   /chalk@1.1.3:
@@ -3154,11 +3144,6 @@ packages:
       browserslist: 4.22.2
     dev: true
 
-  /core-js@3.32.2:
-    resolution: {integrity: sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ==}
-    requiresBuild: true
-    dev: false
-
   /cors@2.8.5:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
@@ -5442,6 +5427,7 @@ packages:
 
   /lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
 
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
@@ -6083,10 +6069,6 @@ packages:
       - supports-color
     dev: true
 
-  /nanopop@2.3.0:
-    resolution: {integrity: sha512-fzN+T2K7/Ah25XU02MJkPZ5q4Tj5FpjmIYq4rvoHX4yb16HzFdCO6JxFFn5Y/oBhQ8no8fUZavnyIv9/+xkBBw==}
-    dev: false
-
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
@@ -8175,7 +8157,7 @@ packages:
     dependencies:
       '@antfu/install-pkg': 0.3.1
       '@antfu/utils': 0.7.7
-      '@iconify/utils': 2.1.16
+      '@iconify/utils': 2.1.17
       debug: 4.3.4
       kolorist: 1.8.0
       local-pkg: 0.5.0
@@ -8342,8 +8324,8 @@ packages:
       vite: 5.0.12(@types/node@20.11.6)(sass@1.70.0)
     dev: true
 
-  /vite-plugin-inspect@0.8.2(vite@5.0.12):
-    resolution: {integrity: sha512-lMqPHkh1UNev0CwuO1g2naDfUanHRM7aorjx52SGrcVmAnhNxnbWzIuFNI3nCOXsSiOUeff4ZJSmR9tMAyMaSg==}
+  /vite-plugin-inspect@0.8.3(vite@5.0.12):
+    resolution: {integrity: sha512-SBVzOIdP/kwe6hjkt7LSW4D0+REqqe58AumcnCfRNw4Kt3mbS9pEBkch+nupu2PBxv2tQi69EQHQ1ZA1vgB/Og==}
     engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': '*'
@@ -8357,8 +8339,8 @@ packages:
       debug: 4.3.4
       error-stack-parser-es: 0.1.1
       fs-extra: 11.2.0
-      lodash-es: 4.17.21
       open: 10.0.3
+      perfect-debounce: 1.0.0
       picocolors: 1.0.0
       sirv: 2.0.4
       vite: 5.0.12(@types/node@20.11.6)(sass@1.70.0)
@@ -8410,7 +8392,7 @@ packages:
       execa: 8.0.1
       sirv: 2.0.4
       vite: 5.0.12(@types/node@20.11.6)(sass@1.70.0)
-      vite-plugin-inspect: 0.8.2(vite@5.0.12)
+      vite-plugin-inspect: 0.8.3(vite@5.0.12)
       vite-plugin-vue-inspector: 4.0.2(vite@5.0.12)
     transitivePeerDependencies:
       - '@nuxt/kit'