diff --git a/packages/tohuhono/ui/package.json b/packages/tohuhono/ui/package.json
index a5c732af..980615a9 100644
--- a/packages/tohuhono/ui/package.json
+++ b/packages/tohuhono/ui/package.json
@@ -79,6 +79,8 @@
     "@tailwindcss/typography": "^0.5.13",
     "@tohuhono/dev": "workspace:*",
     "@tohuhono/utils": "workspace:*",
+    "@uiw/react-color": "^2.3.0",
+    "@uiw/react-color-chrome": "^2.3.0",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
diff --git a/packages/tohuhono/ui/src/theme/color-picker.tsx b/packages/tohuhono/ui/src/theme/color-picker.tsx
new file mode 100644
index 00000000..077b870a
--- /dev/null
+++ b/packages/tohuhono/ui/src/theme/color-picker.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { PopoverContent } from "@radix-ui/react-popover"
+import {
+  hslaToHsva,
+  hsvaToHex,
+  type ColorResult,
+  type HslColor,
+} from "@uiw/react-color"
+import ChromeColorPicker from "@uiw/react-color-chrome"
+import { Popover, PopoverTrigger } from "../popover"
+
+export const ColorPicker = ({
+  disabled,
+  color,
+  onColorChange,
+}: {
+  disabled?: boolean
+  color: HslColor
+  onColorChange: (color: ColorResult) => void
+}) => {
+  const hsva = hslaToHsva({ ...color, a: 1 })
+
+  return (
+    <Popover>
+      <PopoverTrigger disabled={disabled} asChild>
+        <button
+          className="my-1 size-6 flex-shrink-0 rounded border"
+          style={{ backgroundColor: hsvaToHex(hsva) }}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="isolate z-50">
+        <ChromeColorPicker
+          color={hsva}
+          onChange={onColorChange}
+          showHue={true}
+          showColorPreview={true}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/packages/tohuhono/ui/src/theme/theme-editor-menu.tsx b/packages/tohuhono/ui/src/theme/theme-editor-menu.tsx
index 43f87c77..8d31683c 100644
--- a/packages/tohuhono/ui/src/theme/theme-editor-menu.tsx
+++ b/packages/tohuhono/ui/src/theme/theme-editor-menu.tsx
@@ -1,20 +1,20 @@
 "use client"
 
 import { ClipboardCopyIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons"
-import { useState, ChangeEvent, Fragment } from "react"
 import { cn } from "@tohuhono/utils"
-import { Input } from "../input"
-import { Label } from "../label"
+import { hslStringToHsla, type ColorResult } from "@uiw/react-color"
+import { Fragment, useCallback, useState } from "react"
+import { Button } from "../button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "../dropdown-menu"
-import { Button } from "../button"
-import { ApplyTheme, copyToClipboard } from "./theme-editor"
+import { Label } from "../label"
+import { ColorPicker } from "./color-picker"
 import { defaultTheme } from "./default-theme"
 import { getMode, setMode } from "./mode-toggle"
-
+import { ApplyTheme, copyToClipboard } from "./theme-editor"
 export const ThemeEditorMenu = ({ className }: { className?: string }) => {
   const [theme, setTheme] = useState(defaultTheme)
 
@@ -25,17 +25,22 @@ export const ThemeEditorMenu = ({ className }: { className?: string }) => {
     setMode(mode)
   }
 
-  const onInputChange =
-    (id: string, mode: "light" | "dark") =>
-    (event: ChangeEvent<HTMLInputElement>) =>
-      setTheme(
-        theme.map((t) => ({
-          ...t,
-          ...(t.id === id && {
-            [mode]: event.currentTarget.value,
-          }),
-        })),
+  const onInputChange = useCallback(
+    (id: string, mode: "light" | "dark") => (color: ColorResult) => {
+      setTheme((prev) =>
+        prev.map((item) => {
+          if (item.id === id) {
+            return {
+              ...item,
+              [mode]: `${Math.round(color.hsl.h)} ${Math.round(color.hsl.s)}% ${Math.round(color.hsl.l)}%`,
+            }
+          }
+          return item
+        }),
       )
+    },
+    [],
+  )
 
   return (
     <DropdownMenu>
@@ -83,27 +88,22 @@ export const ThemeEditorMenu = ({ className }: { className?: string }) => {
             dark
           </Button>
 
-          {theme.map(({ id, light, dark }) => {
-            return (
-              <Fragment key={id}>
-                <Label>{id}</Label>
-                <Input
-                  className="border-0 px-2 py-0"
-                  id={`${id}-light`}
-                  size={15}
-                  value={light || ""}
-                  onChange={onInputChange(id, "light")}
-                />
-                <Input
-                  className="border-0 px-2 py-0"
-                  id={`${id}-dark`}
-                  value={dark || ""}
-                  size={15}
-                  onChange={onInputChange(id, "dark")}
-                />
-              </Fragment>
-            )
-          })}
+          {theme.map(({ id, light, dark }) => (
+            <Fragment key={id}>
+              <Label>{id}</Label>
+
+              <ColorPicker
+                disabled={selectedMode === "system"}
+                color={hslStringToHsla(light)}
+                onColorChange={onInputChange(id, "light")}
+              />
+              <ColorPicker
+                disabled={selectedMode === "system"}
+                color={hslStringToHsla(dark)}
+                onColorChange={onInputChange(id, "dark")}
+              />
+            </Fragment>
+          ))}
           <Button
             variant={"secondary"}
             className="col-span-3 justify-self-center"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 06132967..2a5c58dc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1046,6 +1046,12 @@ importers:
       '@tohuhono/utils':
         specifier: workspace:*
         version: link:../utils
+      '@uiw/react-color':
+        specifier: ^2.3.0
+        version: 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-chrome':
+        specifier: ^2.3.0
+        version: 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -5466,6 +5472,334 @@ packages:
       '@typescript-eslint/types': 7.2.0
       eslint-visitor-keys: 3.4.3
 
+  /@uiw/color-convert@2.3.0(@babel/runtime@7.24.7):
+    resolution: {integrity: sha512-cBkJ6L2vgHlrAnM6XkeLAusOXxl2b+5HsX1URhCSmBzJSshM50hW096kY7ItS5B3CffabZr7Y2+NbJiCWfdaSw==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+    dev: false
+
+  /@uiw/react-color-alpha@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Ya4GLGNT62VACRlUStMEsv9QiAUQpCej6eu9N6CCGbYhtT+CLYQQ6+PI86doygXK8vp8PykfRFiSO+oGOCbz9w==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-drag-event-interactive': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-block@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-VkokhD/K81j/7qPs1n+zwDW8fw5wzlRyHRbtTpgblpjWkejSl6+XrAkTEk74m+Km51Fr0P7fsZzLFWjg16atoA==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-editable-input': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-swatch': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-chrome@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-bDtLRlnk2ilu9xWKtLPVmc3twzkB3GDK6Y5zCpjlbsusT7dls/9VagDma1tbwbozjU81lLGpxBKvdqwpXkqe8w==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-alpha': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input-hsla': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input-rgba': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-github': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-hue': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-saturation': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-circle@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-eTA9ZoXKQ55SC91I71dG50pBqyjhSD98H3CEB8NFhpB7k9AQSBvf54gvBIIlmO+JRbYxjccD1jjbsLHoP/740w==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-swatch': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-colorful@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-/N5Zh6C4NutXTYTMtbgDraORwZoI3WbzQ2eYYmgYZdaSuip8iVfp+vBkMa7rCcY4wwrzrorCUF6UPDf/4y7XeQ==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-alpha': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-hue': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-saturation': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-compact@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-WKV5Oe7SoRgrTH9qY6pKO4DS7m2GlLFm87gE7izKLio1JcxRLcbGN3ZM+ZPg2ATKS4a5yZwsPD5KWjiOR0bBSA==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-editable-input': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input-rgba': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-swatch': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-editable-input-hsla@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-PLikdZDgGM+aj4kNnNlO90CTJQ5G4/Nd8DniTGcrnYOCJdSs3MXjc0aMVwynDgqjZfWzFmRpHz0FHlnWXSrkjQ==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-editable-input-rgba': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-editable-input-rgba@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Du2Zvgua81zgPUtJFLbogG1LlcCvLrUejCGiT26GrsRPJ9ho7RzRVcrt0l6tKo22q/lJNerPk10PCHyf81o0yA==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-editable-input': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-editable-input@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-3wUPOBKlI7RQYFyxqDkfcj5mjLLVFi3D0uP1dPppDvuhP3k7/DIPtomq4GM693ZZK+Gr+u3SblM+zP4gglNclQ==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-github@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-7oh9Tff3eWjwitOjq6Fy3EAG6Fuj7xN1hF+rNipyi4kIp9d9ubN2YtlR1GS23+iyBS5gbBcu1vKUO4hPCUvhXQ==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-swatch': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-hue@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-laaPBKxY035OqJuCDxXCrfQ4arsfcl8oFz/RXMJGAOZxPsTsSMdENRDVpW6s8pYRqtBY/jD1UDr51SVj7o2I3w==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-alpha': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-material@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-DzTlamAM59LNp/Qg6s1S+fw6/MTK2o6oNyZC0PYKgdqxPHFC0YdtPlX9G03GtTBrVyE1w3DhWVkxePP8K1ROcQ==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-editable-input': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input-rgba': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-name@2.3.0(@babel/runtime@7.24.7):
+    resolution: {integrity: sha512-NVUKdzIknm2zGg70srN9u9bM4fT3K6sDgeQ98NFuKWxu+C6CGNYNjMWTdRwqH9nApQWtICAnhAji491Eh317ow==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      colors-named: 1.0.2
+      colors-named-hex: 1.0.2
+    dev: false
+
+  /@uiw/react-color-saturation@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-sdRGZFf8IVqM39ttlYm3Ew3aLu4+mzhJWCltMvDbteJmK24MBaPUt634HNYW5WiJMqrIOT2c5CJdgTS40xKQng==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-drag-event-interactive': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-shade-slider@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Vffup0PSgSnF83vQJCQTdsXEfW27WTtSqtQwu+Ke0TP4PE8OD5Zsgu2CVVExPHMLdSnMoVJPjL8lgm5FR861TQ==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-alpha': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-sketch@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-lIr2RNRIGt/vHvv2dG5vFy/KpEISKT+hY3nGbaMyNhh4qhMjNuKH7zbaJXnVjjD76NY5RNr2Igrz9bTkvx5cdg==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-alpha': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input-rgba': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-hue': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-saturation': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-swatch': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-slider@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-CC/ApztMY18QPMjdaNFmXGDoBnjd0KwTIDgUPcAZzQnRlRn7mm10qCK6S7+oHJaxqja4AMePVprfgDg/0qUx0w==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-alpha': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-swatch@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Z9EgQ2hKmNlbiMb5nYnLw2d08FZF8LetfTe60jFbSsTwUsdoDeVf2JvKSlmodBMMlFC0fK4h+2RfVR1Z1HeO+Q==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color-wheel@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-tj3n2993zXKXrwDpaQcxbWO1taqQ0eIaHFdPOKi21APlwbVOq3EizqSjvZa+LIZRS/pWsuSNLTcnLi3fpvI3UA==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-drag-event-interactive': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-color@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-ZVPVZlfpb1CmD9/sxcHBpKWel2olRgBiW6Ro2DqRmRFHpSRZRP3/u8S3cg5cc7drrRxcaPgoHQIbY33KGpUSKA==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@uiw/color-convert': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-alpha': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-block': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-chrome': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-circle': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-colorful': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-compact': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input-hsla': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-editable-input-rgba': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-github': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-hue': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-material': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-name': 2.3.0(@babel/runtime@7.24.7)
+      '@uiw/react-color-saturation': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-shade-slider': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-sketch': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-slider': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-swatch': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      '@uiw/react-color-wheel': 2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@uiw/react-drag-event-interactive@2.3.0(@babel/runtime@7.24.7)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Sk41LadFaUs05172N7Bh3QZgp7T1DWTC7LrtLn6qnnhZjDiPQy8vWX+5JuOkcgMffRf2j79d/ZNii8U9dyLThw==}
+    peerDependencies:
+      '@babel/runtime': '>=7.19.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.24.7
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -6180,6 +6514,16 @@ packages:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: false
 
+  /colors-named-hex@1.0.2:
+    resolution: {integrity: sha512-k6kq1e1pUCQvSVwIaGFq2l0LrkAPQZWyeuZn1Z8nOiYSEZiKoFj4qx690h2Kd34DFl9Me0gKS6MUwAMBJj8nuA==}
+    engines: {node: '>=14.16'}
+    dev: false
+
+  /colors-named@1.0.2:
+    resolution: {integrity: sha512-2ANq2r393PV9njYUD66UdfBcxR1slMqRA3QRTWgCx49JoCJ+kOhyfbQYxKJbPZQIhZUcNjVOs5AlyY1WwXec3w==}
+    engines: {node: '>=14.16'}
+    dev: false
+
   /combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}