diff --git a/apps/www/public/r/styles/default/color-dropdown-menu.json b/apps/www/public/r/styles/default/color-dropdown-menu.json
index fe0bce8042..935a19820b 100644
--- a/apps/www/public/r/styles/default/color-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/color-dropdown-menu.json
@@ -44,13 +44,13 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n  'div',\n  {\n    clearColor: () => void;\n    colors: TColor[];\n    customColors: TColor[];\n    updateColor: (color: string) => void;\n    updateCustomColor: (color: string) => void;\n    color?: string;\n  }\n>(\n  (\n    {\n      className,\n      clearColor,\n      color,\n      colors,\n      customColors,\n      updateColor,\n      updateCustomColor,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        <DropdownMenuGroup label=\"Color picker\">\n          <ColorCustom\n            color={color}\n            className=\"p-2\"\n            colors={colors}\n            customColors={customColors}\n            updateColor={updateColor}\n            updateCustomColor={updateCustomColor}\n          />\n        </DropdownMenuGroup>\n        <DropdownMenuGroup>\n          <ColorDropdownMenuItems\n            color={color}\n            className=\"p-2\"\n            colors={colors}\n            updateColor={updateColor}\n          />\n        </DropdownMenuGroup>\n        {color && (\n          <DropdownMenuGroup>\n            <DropdownMenuItem\n              className={cn(\n                buttonVariants({\n                  isMenu: false,\n                  size: 'sm',\n                  variant: 'ghost',\n                }),\n                'w-full justify-start'\n              )}\n              onClick={clearColor}\n            >\n              <Icons.colorClear />\n              <span>Clear</span>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const ColorPicker = React.memo(\n  ColorPickerContent,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.customColors === next.customColors\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { EraserIcon } from 'lucide-react';\n\nimport { buttonVariants } from './button';\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n  'div',\n  {\n    clearColor: () => void;\n    colors: TColor[];\n    customColors: TColor[];\n    updateColor: (color: string) => void;\n    updateCustomColor: (color: string) => void;\n    color?: string;\n  }\n>(\n  (\n    {\n      className,\n      clearColor,\n      color,\n      colors,\n      customColors,\n      updateColor,\n      updateCustomColor,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        <DropdownMenuGroup label=\"Color picker\">\n          <ColorCustom\n            color={color}\n            className=\"p-2\"\n            colors={colors}\n            customColors={customColors}\n            updateColor={updateColor}\n            updateCustomColor={updateCustomColor}\n          />\n        </DropdownMenuGroup>\n        <DropdownMenuGroup>\n          <ColorDropdownMenuItems\n            color={color}\n            className=\"p-2\"\n            colors={colors}\n            updateColor={updateColor}\n          />\n        </DropdownMenuGroup>\n        {color && (\n          <DropdownMenuGroup>\n            <DropdownMenuItem\n              className={cn(\n                buttonVariants({\n                  isMenu: false,\n                  size: 'sm',\n                  variant: 'ghost',\n                }),\n                'w-full justify-start'\n              )}\n              onClick={clearColor}\n            >\n              <EraserIcon />\n              <span>Clear</span>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const ColorPicker = React.memo(\n  ColorPickerContent,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.customColors === next.customColors\n);\n",
       "path": "plate-ui/color-picker.tsx",
       "target": "components/plate-ui/color-picker.tsx",
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useColorsCustom,\n  useColorsCustomState,\n} from '@udecode/plate-font/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\n\n// import { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorCustomProps = {\n  colors: TColor[];\n  customColors: TColor[];\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n} & ComponentPropsWithoutRef<'div'>;\n\nexport function ColorCustom({\n  className,\n  color,\n  colors,\n  customColors,\n  updateColor,\n  updateCustomColor,\n  ...props\n}: ColorCustomProps) {\n  const state = useColorsCustomState({\n    color,\n    colors,\n    customColors,\n    updateCustomColor,\n  });\n  const { inputProps, menuItemProps } = useColorsCustom(state);\n\n  return (\n    <div className={cn('relative flex flex-col gap-4', className)} {...props}>\n      <ColorDropdownMenuItems\n        color={color}\n        colors={state.computedColors}\n        updateColor={updateColor}\n      >\n        <ColorInput {...inputProps}>\n          <DropdownMenuItem\n            className={cn(\n              buttonVariants({\n                isMenu: true,\n                size: 'icon',\n                variant: 'outline',\n              }),\n              'absolute bottom-2 right-2 top-1.5 flex size-7 items-center justify-center rounded-full'\n            )}\n            {...menuItemProps}\n          >\n            <span className=\"sr-only\">Custom</span>\n            <Icons.add />\n          </DropdownMenuItem>\n        </ColorInput>\n      </ColorDropdownMenuItems>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useColorsCustom,\n  useColorsCustomState,\n} from '@udecode/plate-font/react';\nimport { PlusIcon } from 'lucide-react';\n\nimport { buttonVariants } from './button';\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\n\n// import { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorCustomProps = {\n  colors: TColor[];\n  customColors: TColor[];\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n} & ComponentPropsWithoutRef<'div'>;\n\nexport function ColorCustom({\n  className,\n  color,\n  colors,\n  customColors,\n  updateColor,\n  updateCustomColor,\n  ...props\n}: ColorCustomProps) {\n  const state = useColorsCustomState({\n    color,\n    colors,\n    customColors,\n    updateCustomColor,\n  });\n  const { inputProps, menuItemProps } = useColorsCustom(state);\n\n  return (\n    <div className={cn('relative flex flex-col gap-4', className)} {...props}>\n      <ColorDropdownMenuItems\n        color={color}\n        colors={state.computedColors}\n        updateColor={updateColor}\n      >\n        <ColorInput {...inputProps}>\n          <DropdownMenuItem\n            className={cn(\n              buttonVariants({\n                isMenu: true,\n                size: 'icon',\n                variant: 'outline',\n              }),\n              'absolute bottom-2 right-2 top-1.5 flex size-7 items-center justify-center rounded-full'\n            )}\n            {...menuItemProps}\n          >\n            <span className=\"sr-only\">Custom</span>\n            <PlusIcon />\n          </DropdownMenuItem>\n        </ColorInput>\n      </ColorDropdownMenuItems>\n    </div>\n  );\n}\n",
       "path": "plate-ui/colors-custom.tsx",
       "target": "components/plate-ui/colors-custom.tsx",
       "type": "registry:ui"