From 2d2bc5b7c857ed6258f052b7529996633aa17431 Mon Sep 17 00:00:00 2001
From: Lenghak Hok <lenghakhok.dev@gmail.com>
Date: Sun, 27 Oct 2024 23:15:01 +0700
Subject: [PATCH 1/6] style(emoji & color picker): fix styling & dependencies
 with color picker

---
 .../r/styles/default/color-dropdown-menu.json |   8 +-
 .../r/styles/default/emoji-dropdown-menu.json |   4 +-
 apps/www/src/components/icons.tsx             |   2 +
 .../plate-ui/color-dropdown-menu-items.tsx    |  22 ++-
 .../default/plate-ui/color-dropdown-menu.tsx  |   8 -
 .../default/plate-ui/color-picker.tsx         |  77 +++++-----
 .../default/plate-ui/colors-custom.tsx        |  69 ++++++---
 .../default/plate-ui/emoji-picker-content.tsx |   2 +-
 .../plate-ui/emoji-picker-navigation.tsx      |  53 ++++---
 yarn.lock                                     | 138 +++++++++---------
 10 files changed, 209 insertions(+), 174 deletions(-)

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 c398dcf76b..e6d0fcb9a2 100644
--- a/apps/www/public/r/styles/default/color-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/color-dropdown-menu.json
@@ -2,7 +2,7 @@
   "dependencies": [],
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useColorDropdownMenu,\n  useColorDropdownMenuState,\n} from '@udecode/plate-font/react';\n\nimport { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';\nimport { ColorPicker } from './color-picker';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport type TColor = {\n  isBrightColor: boolean;\n  name: string;\n  value: string;\n};\n\ntype ColorDropdownMenuProps = {\n  nodeType: string;\n  tooltip?: string;\n} & DropdownMenuProps;\n\nexport function ColorDropdownMenu({\n  children,\n  nodeType,\n  tooltip,\n}: ColorDropdownMenuProps) {\n  const state = useColorDropdownMenuState({\n    closeOnSelect: true,\n    colors: DEFAULT_COLORS,\n    customColors: DEFAULT_CUSTOM_COLORS,\n    nodeType,\n  });\n\n  const { buttonProps, menuProps } = useColorDropdownMenu(state);\n\n  return (\n    <DropdownMenu modal={false} {...menuProps}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton tooltip={tooltip} {...buttonProps}>\n          {children}\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\">\n        <ColorPicker\n          color={state.selectedColor || state.color}\n          clearColor={state.clearColor}\n          colors={state.colors}\n          customColors={state.customColors}\n          updateColor={state.updateColorAndClose}\n          updateCustomColor={state.updateColor}\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  useColorDropdownMenu,\n  useColorDropdownMenuState,\n} from '@udecode/plate-font/react';\n\nimport { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';\nimport { ColorPicker } from './color-picker';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\ntype ColorDropdownMenuProps = {\n  nodeType: string;\n  tooltip?: string;\n} & DropdownMenuProps;\n\nexport function ColorDropdownMenu({\n  children,\n  nodeType,\n  tooltip,\n}: ColorDropdownMenuProps) {\n  const state = useColorDropdownMenuState({\n    closeOnSelect: true,\n    colors: DEFAULT_COLORS,\n    customColors: DEFAULT_CUSTOM_COLORS,\n    nodeType,\n  });\n\n  const { buttonProps, menuProps } = useColorDropdownMenu(state);\n\n  return (\n    <DropdownMenu modal={false} {...menuProps}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton tooltip={tooltip} {...buttonProps}>\n          {children}\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\">\n        <ColorPicker\n          color={state.selectedColor || state.color}\n          clearColor={state.clearColor}\n          colors={state.colors}\n          customColors={state.customColors}\n          updateColor={state.updateColorAndClose}\n          updateCustomColor={state.updateColor}\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/color-dropdown-menu.tsx",
       "target": "components/plate-ui/color-dropdown-menu.tsx",
       "type": "registry:ui"
@@ -14,7 +14,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\ntype ColorDropdownMenuItemProps = {\n  isBrightColor: boolean;\n  isSelected: boolean;\n  updateColor: (color: string) => void;\n  value: string;\n  name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n  className,\n  isBrightColor,\n  isSelected,\n  name,\n  updateColor,\n  value,\n  ...props\n}: ColorDropdownMenuItemProps) {\n  const content = (\n    <DropdownMenuItem\n      className={cn(\n        buttonVariants({\n          isMenu: true,\n          variant: 'outline',\n        }),\n        'size-6 border border-solid border-muted p-0',\n        !isBrightColor && 'border-transparent text-white',\n        className\n      )}\n      style={{ backgroundColor: value }}\n      onSelect={(e) => {\n        e.preventDefault();\n        updateColor(value);\n      }}\n      {...props}\n    >\n      {isSelected ? <Icons.check /> : null}\n    </DropdownMenuItem>\n  );\n\n  return name ? (\n    <Tooltip>\n      <TooltipTrigger>{content}</TooltipTrigger>\n      <TooltipContent>{name}</TooltipContent>\n    </Tooltip>\n  ) : (\n    content\n  );\n}\n\ntype ColorDropdownMenuItemsProps = {\n  colors: TColor[];\n  updateColor: (color: string) => void;\n  color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n  className,\n  color,\n  colors,\n  updateColor,\n  ...props\n}: ColorDropdownMenuItemsProps) {\n  return (\n    <div\n      className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}\n      {...props}\n    >\n      <TooltipProvider>\n        {colors.map(({ isBrightColor, name, value }) => (\n          <ColorDropdownMenuItem\n            name={name}\n            key={name ?? value}\n            value={value}\n            isBrightColor={isBrightColor}\n            isSelected={color === value}\n            updateColor={updateColor}\n          />\n        ))}\n      </TooltipProvider>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type TColor = {\n  isBrightColor: boolean;\n  name: string;\n  value: string;\n};\n\ntype ColorDropdownMenuItemProps = {\n  isBrightColor: boolean;\n  isSelected: boolean;\n  updateColor: (color: string) => void;\n  value: string;\n  name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n  className,\n  isBrightColor,\n  isSelected,\n  name,\n  updateColor,\n  value,\n  ...props\n}: ColorDropdownMenuItemProps) {\n  const content = (\n    <DropdownMenuItem\n      className={cn(\n        buttonVariants({\n          isMenu: true,\n          variant: 'outline',\n        }),\n        'flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0',\n        !isBrightColor && 'border-transparent text-white hover:!text-white',\n        className\n      )}\n      style={{ backgroundColor: value }}\n      onSelect={(e) => {\n        e.preventDefault();\n        updateColor(value);\n      }}\n      {...props}\n    >\n      {isSelected ? <Icons.check className=\"size-3\" /> : null}\n    </DropdownMenuItem>\n  );\n\n  return name ? (\n    <Tooltip>\n      <TooltipTrigger>{content}</TooltipTrigger>\n      <TooltipContent className=\"capitalize\">{name}</TooltipContent>\n    </Tooltip>\n  ) : (\n    content\n  );\n}\n\ntype ColorDropdownMenuItemsProps = {\n  colors: TColor[];\n  updateColor: (color: string) => void;\n  color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n  className,\n  color,\n  colors,\n  updateColor,\n  ...props\n}: ColorDropdownMenuItemsProps) {\n  return (\n    <div\n      className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}\n      {...props}\n    >\n      <TooltipProvider>\n        {colors.map(({ isBrightColor, name, value }) => (\n          <ColorDropdownMenuItem\n            name={name}\n            key={name ?? value}\n            value={value}\n            isBrightColor={isBrightColor}\n            isSelected={color === value}\n            updateColor={updateColor}\n          />\n        ))}\n        {props.children}\n      </TooltipProvider>\n    </div>\n  );\n}\n",
       "path": "plate-ui/color-dropdown-menu-items.tsx",
       "target": "components/plate-ui/color-dropdown-menu-items.tsx",
       "type": "registry:ui"
@@ -26,13 +26,13 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorsCustom } from './colors-custom';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Separator } from './separator';\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\n        ref={ref}\n        className={cn('flex flex-col gap-4 p-4', className)}\n        {...props}\n      >\n        <ColorsCustom\n          color={color}\n          colors={colors}\n          customColors={customColors}\n          updateColor={updateColor}\n          updateCustomColor={updateCustomColor}\n        />\n\n        <Separator />\n\n        <ColorDropdownMenuItems\n          color={color}\n          colors={colors}\n          updateColor={updateColor}\n        />\n        {color && (\n          <DropdownMenuItem\n            className={buttonVariants({\n              isMenu: true,\n              variant: 'outline',\n            })}\n            onClick={clearColor}\n          >\n            Clear\n          </DropdownMenuItem>\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';\n\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { Separator } from './separator';\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\n        ref={ref}\n        className={cn('flex flex-col gap-4 p-2', className)}\n        {...props}\n      >\n\n        <ColorDropdownMenuItems\n          color={color}\n          colors={colors}\n          updateColor={updateColor}\n        />\n\n        <Separator />\n        {/* {color && (\n          <DropdownMenuItem\n          className={buttonVariants({\n              isMenu: true,\n              variant: 'outline',\n              })}\n              onClick={clearColor}\n              >\n              Clear\n              </DropdownMenuItem>\n              )} */}\n        <ColorCustom\n          color={color}\n          colors={colors}\n          customColors={customColors}\n          updateColor={updateColor}\n          updateCustomColor={updateCustomColor}\n          clearColor={clearColor}\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 from 'react';\n\nimport {\n  useColorsCustom,\n  useColorsCustomState,\n} from '@udecode/plate-font/react';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorsCustomProps = {\n  colors: TColor[];\n  customColors: TColor[];\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n};\n\nexport function ColorsCustom({\n  color,\n  colors,\n  customColors,\n  updateColor,\n  updateCustomColor,\n}: ColorsCustomProps) {\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=\"flex flex-col gap-4\">\n      <ColorInput {...inputProps}>\n        <DropdownMenuItem\n          className={buttonVariants({\n            isMenu: true,\n            variant: 'outline',\n          })}\n          {...menuItemProps}\n        >\n          CUSTOM\n        </DropdownMenuItem>\n      </ColorInput>\n\n      <ColorDropdownMenuItems\n        color={color}\n        colors={state.computedColors}\n        updateColor={updateColor}\n      />\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React 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';\n// import { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorCustomProps = {\n  clearColor: () => void;\n  colors: TColor[];\n  customColors: TColor[];\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n};\n\nexport function ColorCustom({\n  clearColor,\n  color,\n  colors,\n  customColors,\n  updateColor,\n  updateCustomColor,\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=\"flex flex-col gap-4\">\n      {/* <ColorInput {...inputProps}>\n        <DropdownMenuItem\n          className={buttonVariants({\n            isMenu: true,\n            variant: 'outline',\n          })}\n          {...menuItemProps}\n        >\n          CUSTOM\n        </DropdownMenuItem>\n      </ColorInput> */}\n\n      <ColorDropdownMenuItems\n        color={color}\n        colors={state.computedColors}\n        updateColor={updateColor}\n      >\n        <DropdownMenuItem\n          className={cn(\n            buttonVariants({ size: 'icon', variant: 'outline' }),\n            'size-6 rounded-full'\n          )}\n          onClick={clearColor}\n        >\n          <Icons.colorClear />\n        </DropdownMenuItem>\n      </ColorDropdownMenuItems>\n    </div>\n  );\n}\n",
       "path": "plate-ui/colors-custom.tsx",
       "target": "components/plate-ui/colors-custom.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/emoji-dropdown-menu.json b/apps/www/public/r/styles/default/emoji-dropdown-menu.json
index fe47924a05..888791e26d 100644
--- a/apps/www/public/r/styles/default/emoji-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/emoji-dropdown-menu.json
@@ -28,13 +28,13 @@
       "type": "registry:ui"
     },
     {
-      "content": "import { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n  UseEmojiPickerType,\n  | 'emojiLibrary'\n  | 'i18n'\n  | 'isSearching'\n  | 'onMouseOver'\n  | 'onSelectEmoji'\n  | 'refs'\n  | 'searchResult'\n  | 'settings'\n  | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n  emoji: Emoji;\n  index: number;\n  onMouseOver: (emoji?: Emoji) => void;\n  onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n  row: GridRow;\n} & Pick<UseEmojiPickerType, 'emojiLibrary' | 'onMouseOver' | 'onSelectEmoji'>;\n\nconst Button = memo(\n  ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n    return (\n      <button\n        className=\"group relative flex size-9 cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none\"\n        onClick={() => onSelect(emoji)}\n        onMouseEnter={() => onMouseOver(emoji)}\n        onMouseLeave={() => onMouseOver()}\n        aria-label={emoji.skins[0].native}\n        data-index={index}\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <div\n          className=\"absolute inset-0 rounded-full opacity-0 group-hover:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <span style={{ position: 'relative' }} data-emoji-set=\"native\">\n          {emoji.skins[0].native}\n        </span>\n      </button>\n    );\n  }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n  ({ emojiLibrary, row, onMouseOver, onSelectEmoji }: RowOfButtonsProps) => (\n    <div key={row.id} className=\"flex\" data-index={row.id}>\n      {row.elements.map((emojiId, index) => (\n        <Button\n          key={emojiId}\n          onMouseOver={onMouseOver}\n          onSelect={onSelectEmoji}\n          emoji={emojiLibrary.getEmoji(emojiId)}\n          index={index}\n        />\n      ))}\n    </div>\n  )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n  emojiLibrary,\n  i18n,\n  isSearching = false,\n  refs,\n  searchResult,\n  settings = EmojiSettings,\n  visibleCategories,\n  onMouseOver,\n  onSelectEmoji,\n}: EmojiPickerContentProps) {\n  const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n  const isCategoryVisible = useCallback(\n    (categoryId: any) => {\n      return visibleCategories.has(categoryId)\n        ? visibleCategories.get(categoryId)\n        : false;\n    },\n    [visibleCategories]\n  );\n\n  const EmojiList = useCallback(() => {\n    return emojiLibrary\n      .getGrid()\n      .sections()\n      .map(({ id: categoryId }) => {\n        const section = emojiLibrary.getGrid().section(categoryId);\n        const { buttonSize } = settings;\n\n        return (\n          <div\n            key={categoryId}\n            ref={section.root}\n            style={{ width: getRowWidth }}\n            data-id={categoryId}\n          >\n            <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold backdrop-blur-sm\">\n              {i18n.categories[categoryId]}\n            </div>\n            <div\n              className=\"relative flex flex-wrap\"\n              style={{ height: section.getRows().length * buttonSize.value }}\n            >\n              {isCategoryVisible(categoryId) &&\n                section\n                  .getRows()\n                  .map((row: GridRow) => (\n                    <RowOfButtons\n                      key={row.id}\n                      onMouseOver={onMouseOver}\n                      onSelectEmoji={onSelectEmoji}\n                      emojiLibrary={emojiLibrary}\n                      row={row}\n                    />\n                  ))}\n            </div>\n          </div>\n        );\n      });\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.categories,\n    isCategoryVisible,\n    onSelectEmoji,\n    onMouseOver,\n    settings,\n  ]);\n\n  const SearchList = useCallback(() => {\n    return (\n      <div style={{ width: getRowWidth }} data-id=\"search\">\n        <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold text-card-foreground backdrop-blur-sm\">\n          {i18n.searchResult}\n        </div>\n        <div className=\"relative flex flex-wrap\">\n          {searchResult.map((emoji: Emoji, index: number) => (\n            <Button\n              key={emoji.id}\n              onMouseOver={onMouseOver}\n              onSelect={onSelectEmoji}\n              emoji={emojiLibrary.getEmoji(emoji.id)}\n              index={index}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.searchResult,\n    searchResult,\n    onSelectEmoji,\n    onMouseOver,\n  ]);\n\n  return (\n    <div\n      ref={refs.current.contentRoot}\n      className={cn(\n        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',\n        '[&::-webkit-scrollbar]:w-4',\n        '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',\n        '[&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25',\n        '[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:bg-clip-padding'\n      )}\n      data-id=\"scroll\"\n    >\n      <div ref={refs.current.content} className=\"h-full\">\n        {isSearching ? SearchList() : EmojiList()}\n      </div>\n    </div>\n  );\n}\n",
+      "content": "import { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n  UseEmojiPickerType,\n  | 'emojiLibrary'\n  | 'i18n'\n  | 'isSearching'\n  | 'onMouseOver'\n  | 'onSelectEmoji'\n  | 'refs'\n  | 'searchResult'\n  | 'settings'\n  | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n  emoji: Emoji;\n  index: number;\n  onMouseOver: (emoji?: Emoji) => void;\n  onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n  row: GridRow;\n} & Pick<UseEmojiPickerType, 'emojiLibrary' | 'onMouseOver' | 'onSelectEmoji'>;\n\nconst Button = memo(\n  ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n    return (\n      <button\n        className=\"group relative flex size-9 cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none\"\n        onClick={() => onSelect(emoji)}\n        onMouseEnter={() => onMouseOver(emoji)}\n        onMouseLeave={() => onMouseOver()}\n        aria-label={emoji.skins[0].native}\n        data-index={index}\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <div\n          className=\"absolute inset-0 rounded-full opacity-0 group-hover:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <span className=\"relative font-['emoji']\" data-emoji-set=\"native\">\n          {emoji.skins[0].native}\n        </span>\n      </button>\n    );\n  }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n  ({ emojiLibrary, row, onMouseOver, onSelectEmoji }: RowOfButtonsProps) => (\n    <div key={row.id} className=\"flex\" data-index={row.id}>\n      {row.elements.map((emojiId, index) => (\n        <Button\n          key={emojiId}\n          onMouseOver={onMouseOver}\n          onSelect={onSelectEmoji}\n          emoji={emojiLibrary.getEmoji(emojiId)}\n          index={index}\n        />\n      ))}\n    </div>\n  )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n  emojiLibrary,\n  i18n,\n  isSearching = false,\n  refs,\n  searchResult,\n  settings = EmojiSettings,\n  visibleCategories,\n  onMouseOver,\n  onSelectEmoji,\n}: EmojiPickerContentProps) {\n  const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n  const isCategoryVisible = useCallback(\n    (categoryId: any) => {\n      return visibleCategories.has(categoryId)\n        ? visibleCategories.get(categoryId)\n        : false;\n    },\n    [visibleCategories]\n  );\n\n  const EmojiList = useCallback(() => {\n    return emojiLibrary\n      .getGrid()\n      .sections()\n      .map(({ id: categoryId }) => {\n        const section = emojiLibrary.getGrid().section(categoryId);\n        const { buttonSize } = settings;\n\n        return (\n          <div\n            key={categoryId}\n            ref={section.root}\n            style={{ width: getRowWidth }}\n            data-id={categoryId}\n          >\n            <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold backdrop-blur-sm\">\n              {i18n.categories[categoryId]}\n            </div>\n            <div\n              className=\"relative flex flex-wrap\"\n              style={{ height: section.getRows().length * buttonSize.value }}\n            >\n              {isCategoryVisible(categoryId) &&\n                section\n                  .getRows()\n                  .map((row: GridRow) => (\n                    <RowOfButtons\n                      key={row.id}\n                      onMouseOver={onMouseOver}\n                      onSelectEmoji={onSelectEmoji}\n                      emojiLibrary={emojiLibrary}\n                      row={row}\n                    />\n                  ))}\n            </div>\n          </div>\n        );\n      });\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.categories,\n    isCategoryVisible,\n    onSelectEmoji,\n    onMouseOver,\n    settings,\n  ]);\n\n  const SearchList = useCallback(() => {\n    return (\n      <div style={{ width: getRowWidth }} data-id=\"search\">\n        <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold text-card-foreground backdrop-blur-sm\">\n          {i18n.searchResult}\n        </div>\n        <div className=\"relative flex flex-wrap\">\n          {searchResult.map((emoji: Emoji, index: number) => (\n            <Button\n              key={emoji.id}\n              onMouseOver={onMouseOver}\n              onSelect={onSelectEmoji}\n              emoji={emojiLibrary.getEmoji(emoji.id)}\n              index={index}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.searchResult,\n    searchResult,\n    onSelectEmoji,\n    onMouseOver,\n  ]);\n\n  return (\n    <div\n      ref={refs.current.contentRoot}\n      className={cn(\n        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',\n        '[&::-webkit-scrollbar]:w-4',\n        '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',\n        '[&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25',\n        '[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:bg-clip-padding'\n      )}\n      data-id=\"scroll\"\n    >\n      <div ref={refs.current.content} className=\"h-full\">\n        {isSearching ? SearchList() : EmojiList()}\n      </div>\n    </div>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-content.tsx",
       "target": "components/plate-ui/emoji-picker-content.tsx",
       "type": "registry:ui"
     },
     {
-      "content": "import { useMemo } from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type {\n  IEmojiFloatingLibrary,\n  UseEmojiPickerType,\n} from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type EmojiPickerNavigationProps = {\n  onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n  UseEmojiPickerType,\n  'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\nconst getBarProperty = (\n  emojiLibrary: IEmojiFloatingLibrary,\n  focusedCategory?: EmojiCategoryList\n) => {\n  let width = 0;\n  let position = 0;\n\n  if (focusedCategory) {\n    width = 100 / emojiLibrary.getGrid().size;\n    position = focusedCategory\n      ? emojiLibrary.indexOf(focusedCategory) * 100\n      : 0;\n  }\n\n  return { position, width };\n};\n\nexport function EmojiPickerNavigation({\n  emojiLibrary,\n  focusedCategory,\n  i18n,\n  icons,\n  onClick,\n}: EmojiPickerNavigationProps) {\n  const { position, width } = useMemo(\n    () => getBarProperty(emojiLibrary, focusedCategory),\n    [emojiLibrary, focusedCategory]\n  );\n\n  return (\n    <TooltipProvider delayDuration={500}>\n      <nav\n        id=\"emoji-nav\"\n        className=\"mb-2.5 border-0 border-b border-solid border-b-border p-1.5\"\n      >\n        <div className=\"relative flex items-center justify-evenly\">\n          {emojiLibrary\n            .getGrid()\n            .sections()\n            .map(({ id }) => (\n              <Tooltip key={id}>\n                <TooltipTrigger asChild>\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    className={cn(\n                      'h-fit rounded-full fill-current p-1.5 text-muted-foreground hover:bg-muted hover:text-muted-foreground',\n                      id === focusedCategory &&\n                        'pointer-events-none bg-accent fill-current text-accent-foreground'\n                    )}\n                    onClick={() => {\n                      onClick(id);\n                    }}\n                    aria-label={i18n.categories[id]}\n                    type=\"button\"\n                  >\n                    <span className=\"size-5\">\n                      {icons.categories[id].outline}\n                    </span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {i18n.categories[id]}\n                </TooltipContent>\n              </Tooltip>\n            ))}\n          <div\n            className={cn(\n              'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'\n            )}\n            style={{\n              transform: `translateX(${position}%)`,\n              visibility: `${focusedCategory ? 'visible' : 'hidden'}`,\n              width: `${width}%`,\n            }}\n          />\n        </div>\n      </nav>\n    </TooltipProvider>\n  );\n}\n",
+      "content": "import type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type EmojiPickerNavigationProps = {\n  onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n  UseEmojiPickerType,\n  'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\n// KEEP: This is for the animated idicator bar under the icon - Opt in if needed\n// const getBarProperty = (\n//   emojiLibrary: IEmojiFloatingLibrary,\n//   focusedCategory?: EmojiCategoryList\n// ) => {\n//   let width = 0;\n//   let position = 0;\n\n//   if (focusedCategory) {\n//     width = 100 / emojiLibrary.getGrid().size;\n//     position = focusedCategory\n//       ? emojiLibrary.indexOf(focusedCategory) * 100\n//       : 0;\n//   }\n\n//   return { position, width };\n// };\n\nexport function EmojiPickerNavigation({\n  emojiLibrary,\n  focusedCategory,\n  i18n,\n  icons,\n  onClick,\n}: EmojiPickerNavigationProps) {\n  // KEEP: This is for the animated idicator bar under the icon - Opt in if needed\n  // const { position, width } = useMemo(\n  //   () => getBarProperty(emojiLibrary, focusedCategory),\n  //   [emojiLibrary, focusedCategory]\n  // );\n\n  return (\n    <TooltipProvider delayDuration={500}>\n      <nav\n        id=\"emoji-nav\"\n        className=\"mb-2.5 border-0 border-b border-solid border-b-border p-1.5\"\n      >\n        <div className=\"relative flex items-center justify-evenly\">\n          {emojiLibrary\n            .getGrid()\n            .sections()\n            .map(({ id }) => (\n              <Tooltip key={id}>\n                <TooltipTrigger asChild>\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    className={cn(\n                      'h-fit rounded-full fill-current p-1.5 text-muted-foreground hover:bg-muted hover:text-muted-foreground',\n                      id === focusedCategory &&\n                        'pointer-events-none bg-accent fill-current text-accent-foreground'\n                    )}\n                    onClick={() => {\n                      onClick(id);\n                    }}\n                    aria-label={i18n.categories[id]}\n                    type=\"button\"\n                  >\n                    <span className=\"inline-flex size-5 items-center justify-center\">\n                      {icons.categories[id].outline}\n                    </span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {i18n.categories[id]}\n                </TooltipContent>\n              </Tooltip>\n            ))}\n\n          {/* This is the animated indicator - Opt In if needed */}\n          {/* <div\n            className={cn(\n              'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'\n            )}\n            style={{\n              transform: `translateX(${position}%)`,\n              visibility: `${focusedCategory ? 'visible' : 'hidden'}`,\n              width: `${width}%`,\n            }}\n          /> */}\n        </div>\n      </nav>\n    </TooltipProvider>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-navigation.tsx",
       "target": "components/plate-ui/emoji-picker-navigation.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/components/icons.tsx b/apps/www/src/components/icons.tsx
index 130c6bd685..4ca84a6d27 100644
--- a/apps/www/src/components/icons.tsx
+++ b/apps/www/src/components/icons.tsx
@@ -30,6 +30,7 @@ import {
   CornerUpLeft,
   DownloadCloud,
   DownloadIcon,
+  EraserIcon,
   ExternalLink,
   Eye,
   File,
@@ -418,6 +419,7 @@ export const Icons = {
   code: Code2,
   codeblock: FileCode,
   color: Baseline,
+  colorClear: EraserIcon,
   column: RectangleVertical,
   combine: Combine,
   comment: MessageSquare,
diff --git a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
index 9f044136d1..227f8984c6 100644
--- a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
+++ b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
@@ -8,8 +8,6 @@ import { cn } from '@udecode/cn';
 
 import { Icons } from '@/components/icons';
 
-import type { TColor } from './color-dropdown-menu';
-
 import { buttonVariants } from './button';
 import { DropdownMenuItem } from './dropdown-menu';
 import {
@@ -19,6 +17,12 @@ import {
   TooltipTrigger,
 } from './tooltip';
 
+export type TColor = {
+  isBrightColor: boolean;
+  name: string;
+  value: string;
+};
+
 type ColorDropdownMenuItemProps = {
   isBrightColor: boolean;
   isSelected: boolean;
@@ -43,8 +47,8 @@ export function ColorDropdownMenuItem({
           isMenu: true,
           variant: 'outline',
         }),
-        'size-6 border border-solid border-muted p-0',
-        !isBrightColor && 'border-transparent text-white',
+        'flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0 transition-all hover:scale-125',
+        !isBrightColor && 'border-transparent text-white hover:!text-white',
         className
       )}
       style={{ backgroundColor: value }}
@@ -54,14 +58,14 @@ export function ColorDropdownMenuItem({
       }}
       {...props}
     >
-      {isSelected ? <Icons.check /> : null}
+      {isSelected ? <Icons.check className="size-3" /> : null}
     </DropdownMenuItem>
   );
 
   return name ? (
     <Tooltip>
       <TooltipTrigger>{content}</TooltipTrigger>
-      <TooltipContent>{name}</TooltipContent>
+      <TooltipContent className="mb-2 capitalize">{name}</TooltipContent>
     </Tooltip>
   ) : (
     content
@@ -83,7 +87,10 @@ export function ColorDropdownMenuItems({
 }: ColorDropdownMenuItemsProps) {
   return (
     <div
-      className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}
+      className={cn(
+        'grid grid-cols-[repeat(10,1fr)] place-items-center gap-1',
+        className
+      )}
       {...props}
     >
       <TooltipProvider>
@@ -97,6 +104,7 @@ export function ColorDropdownMenuItems({
             updateColor={updateColor}
           />
         ))}
+        {props.children}
       </TooltipProvider>
     </div>
   );
diff --git a/apps/www/src/registry/default/plate-ui/color-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/color-dropdown-menu.tsx
index 06bf2a72c6..924f77c2b9 100644
--- a/apps/www/src/registry/default/plate-ui/color-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/color-dropdown-menu.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-
 import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
 import {
@@ -18,12 +16,6 @@ import {
 } from './dropdown-menu';
 import { ToolbarButton } from './toolbar';
 
-export type TColor = {
-  isBrightColor: boolean;
-  name: string;
-  value: string;
-};
-
 type ColorDropdownMenuProps = {
   nodeType: string;
   tooltip?: string;
diff --git a/apps/www/src/registry/default/plate-ui/color-picker.tsx b/apps/www/src/registry/default/plate-ui/color-picker.tsx
index 3cf9401ee5..6b7ac2b101 100644
--- a/apps/www/src/registry/default/plate-ui/color-picker.tsx
+++ b/apps/www/src/registry/default/plate-ui/color-picker.tsx
@@ -4,13 +4,16 @@ import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
 
-import type { TColor } from './color-dropdown-menu';
-
-import { buttonVariants } from './button';
-import { ColorDropdownMenuItems } from './color-dropdown-menu-items';
-import { ColorsCustom } from './colors-custom';
-import { DropdownMenuItem } from './dropdown-menu';
-import { Separator } from './separator';
+import {
+  type TColor,
+  ColorDropdownMenuItems,
+} from './color-dropdown-menu-items';
+import { ColorCustom } from './colors-custom';
+import {
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from './dropdown-menu';
 
 export const ColorPickerContent = withRef<
   'div',
@@ -37,37 +40,41 @@ export const ColorPickerContent = withRef<
     ref
   ) => {
     return (
-      <div
-        ref={ref}
-        className={cn('flex flex-col gap-4 p-4', className)}
-        {...props}
-      >
-        <ColorsCustom
-          color={color}
-          colors={colors}
-          customColors={customColors}
-          updateColor={updateColor}
-          updateCustomColor={updateCustomColor}
-        />
-
-        <Separator />
-
-        <ColorDropdownMenuItems
-          color={color}
-          colors={colors}
-          updateColor={updateColor}
-        />
-        {color && (
+      <div ref={ref} className={cn('flex flex-col', className)} {...props}>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Color Picker</DropdownMenuLabel>
+          <ColorDropdownMenuItems
+            color={color}
+            className="p-2"
+            colors={colors}
+            updateColor={updateColor}
+          />
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        {/* {color && (
           <DropdownMenuItem
-            className={buttonVariants({
+          className={buttonVariants({
               isMenu: true,
               variant: 'outline',
-            })}
-            onClick={clearColor}
-          >
-            Clear
-          </DropdownMenuItem>
-        )}
+              })}
+              onClick={clearColor}
+              >
+              Clear
+              </DropdownMenuItem>
+              )} */}
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Custom</DropdownMenuLabel>
+
+          <ColorCustom
+            color={color}
+            className="p-2"
+            clearColor={clearColor}
+            colors={colors}
+            customColors={customColors}
+            updateColor={updateColor}
+            updateCustomColor={updateCustomColor}
+          />
+        </DropdownMenuGroup>
       </div>
     );
   }
diff --git a/apps/www/src/registry/default/plate-ui/colors-custom.tsx b/apps/www/src/registry/default/plate-ui/colors-custom.tsx
index 2ebd5a3c2f..af828d5747 100644
--- a/apps/www/src/registry/default/plate-ui/colors-custom.tsx
+++ b/apps/www/src/registry/default/plate-ui/colors-custom.tsx
@@ -1,34 +1,44 @@
 'use client';
 
-import React from 'react';
+import React, { type ComponentPropsWithoutRef } from 'react';
 
+import { cn } from '@udecode/cn';
 import {
   useColorsCustom,
   useColorsCustomState,
 } from '@udecode/plate-font/react';
 
-import type { TColor } from './color-dropdown-menu';
+import { Icons } from '@/components/icons';
 
 import { buttonVariants } from './button';
-import { ColorDropdownMenuItems } from './color-dropdown-menu-items';
+import {
+  type TColor,
+  ColorDropdownMenuItems,
+} from './color-dropdown-menu-items';
 import { ColorInput } from './color-input';
+
+// import { ColorInput } from './color-input';
 import { DropdownMenuItem } from './dropdown-menu';
 
-type ColorsCustomProps = {
+type ColorCustomProps = {
+  clearColor: () => void;
   colors: TColor[];
   customColors: TColor[];
   updateColor: (color: string) => void;
   updateCustomColor: (color: string) => void;
   color?: string;
-};
+} & ComponentPropsWithoutRef<'div'>;
 
-export function ColorsCustom({
+export function ColorCustom({
+  className,
+  clearColor,
   color,
   colors,
   customColors,
   updateColor,
   updateCustomColor,
-}: ColorsCustomProps) {
+  ...props
+}: ColorCustomProps) {
   const state = useColorsCustomState({
     color,
     colors,
@@ -38,24 +48,41 @@ export function ColorsCustom({
   const { inputProps, menuItemProps } = useColorsCustom(state);
 
   return (
-    <div className="flex flex-col gap-4">
-      <ColorInput {...inputProps}>
-        <DropdownMenuItem
-          className={buttonVariants({
-            isMenu: true,
-            variant: 'outline',
-          })}
-          {...menuItemProps}
-        >
-          CUSTOM
-        </DropdownMenuItem>
-      </ColorInput>
-
+    <div className={cn('relative flex flex-col gap-4', className)} {...props}>
       <ColorDropdownMenuItems
         color={color}
         colors={state.computedColors}
         updateColor={updateColor}
-      />
+      >
+        {color && (
+          <DropdownMenuItem
+            className={cn(
+              buttonVariants({ size: 'icon', variant: 'outline' }),
+              'size-7 rounded-full'
+            )}
+            onClick={clearColor}
+          >
+            <Icons.colorClear />
+          </DropdownMenuItem>
+        )}
+
+        <ColorInput {...inputProps}>
+          <DropdownMenuItem
+            className={cn(
+              buttonVariants({
+                isMenu: true,
+                size: 'icon',
+                variant: 'outline',
+              }),
+              'absolute bottom-2 right-2 top-1.5 flex size-7 items-center justify-center rounded-full'
+            )}
+            {...menuItemProps}
+          >
+            <span className="sr-only">Custom</span>
+            <Icons.add />
+          </DropdownMenuItem>
+        </ColorInput>
+      </ColorDropdownMenuItems>
     </div>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx
index 653ba748f5..30ede2628c 100644
--- a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx
+++ b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx
@@ -46,7 +46,7 @@ const Button = memo(
           className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100"
           aria-hidden="true"
         />
-        <span style={{ position: 'relative' }} data-emoji-set="native">
+        <span className="relative font-['emoji']" data-emoji-set="native">
           {emoji.skins[0].native}
         </span>
       </button>
diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx
index 926ea7191a..2549c8ca6e 100644
--- a/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx
+++ b/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx
@@ -1,10 +1,5 @@
-import { useMemo } from 'react';
-
 import type { EmojiCategoryList } from '@udecode/plate-emoji';
-import type {
-  IEmojiFloatingLibrary,
-  UseEmojiPickerType,
-} from '@udecode/plate-emoji/react';
+import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
 
 import { cn } from '@udecode/cn';
 
@@ -23,22 +18,23 @@ export type EmojiPickerNavigationProps = {
   'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'
 >;
 
-const getBarProperty = (
-  emojiLibrary: IEmojiFloatingLibrary,
-  focusedCategory?: EmojiCategoryList
-) => {
-  let width = 0;
-  let position = 0;
+// KEEP: This is for the animated idicator bar under the icon - Opt in if needed
+// const getBarProperty = (
+//   emojiLibrary: IEmojiFloatingLibrary,
+//   focusedCategory?: EmojiCategoryList
+// ) => {
+//   let width = 0;
+//   let position = 0;
 
-  if (focusedCategory) {
-    width = 100 / emojiLibrary.getGrid().size;
-    position = focusedCategory
-      ? emojiLibrary.indexOf(focusedCategory) * 100
-      : 0;
-  }
+//   if (focusedCategory) {
+//     width = 100 / emojiLibrary.getGrid().size;
+//     position = focusedCategory
+//       ? emojiLibrary.indexOf(focusedCategory) * 100
+//       : 0;
+//   }
 
-  return { position, width };
-};
+//   return { position, width };
+// };
 
 export function EmojiPickerNavigation({
   emojiLibrary,
@@ -47,10 +43,11 @@ export function EmojiPickerNavigation({
   icons,
   onClick,
 }: EmojiPickerNavigationProps) {
-  const { position, width } = useMemo(
-    () => getBarProperty(emojiLibrary, focusedCategory),
-    [emojiLibrary, focusedCategory]
-  );
+  // KEEP: This is for the animated idicator bar under the icon - Opt in if needed
+  // const { position, width } = useMemo(
+  //   () => getBarProperty(emojiLibrary, focusedCategory),
+  //   [emojiLibrary, focusedCategory]
+  // );
 
   return (
     <TooltipProvider delayDuration={500}>
@@ -79,7 +76,7 @@ export function EmojiPickerNavigation({
                     aria-label={i18n.categories[id]}
                     type="button"
                   >
-                    <span className="size-5">
+                    <span className="inline-flex size-5 items-center justify-center">
                       {icons.categories[id].outline}
                     </span>
                   </Button>
@@ -89,7 +86,9 @@ export function EmojiPickerNavigation({
                 </TooltipContent>
               </Tooltip>
             ))}
-          <div
+
+          {/* This is the animated indicator - Opt In if needed */}
+          {/* <div
             className={cn(
               'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'
             )}
@@ -98,7 +97,7 @@ export function EmojiPickerNavigation({
               visibility: `${focusedCategory ? 'visible' : 'hidden'}`,
               width: `${width}%`,
             }}
-          />
+          /> */}
         </div>
       </nav>
     </TooltipProvider>
diff --git a/yarn.lock b/yarn.lock
index 3187c78ccc..302c421c30 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6197,11 +6197,11 @@ __metadata:
   dependencies:
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-markdown": "npm:39.2.0"
-    "@udecode/plate-selection": "npm:39.2.3"
+    "@udecode/plate-selection": "npm:39.2.12"
     ai: "npm:^3.4.10"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.13"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6217,7 +6217,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6234,7 +6234,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6253,7 +6253,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     "@udecode/plate-heading": "npm:39.0.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6269,7 +6269,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6285,7 +6285,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6301,7 +6301,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6317,7 +6317,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6334,7 +6334,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     react-textarea-autosize: "npm:^8.5.3"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6353,7 +6353,7 @@ __metadata:
     delay: "npm:5.0.0"
     p-defer: "npm:^4.0.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6370,7 +6370,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     prismjs: "npm:^1.29.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6386,7 +6386,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6403,7 +6403,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6413,12 +6413,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-common@npm:39.2.1, @udecode/plate-common@workspace:^, @udecode/plate-common@workspace:packages/common":
+"@udecode/plate-common@npm:39.2.15, @udecode/plate-common@workspace:^, @udecode/plate-common@workspace:packages/common":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-common@workspace:packages/common"
   dependencies:
-    "@udecode/plate-core": "npm:39.2.1"
-    "@udecode/plate-utils": "npm:39.2.1"
+    "@udecode/plate-core": "npm:39.2.15"
+    "@udecode/plate-utils": "npm:39.2.15"
     "@udecode/react-hotkeys": "npm:37.0.0"
     "@udecode/react-utils": "npm:39.0.0"
     "@udecode/slate": "npm:39.2.1"
@@ -6435,7 +6435,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-core@npm:39.2.1, @udecode/plate-core@workspace:^, @udecode/plate-core@workspace:packages/core":
+"@udecode/plate-core@npm:39.2.15, @udecode/plate-core@workspace:^, @udecode/plate-core@workspace:packages/core":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-core@workspace:packages/core"
   dependencies:
@@ -6475,7 +6475,7 @@ __metadata:
     "@udecode/plate-table": "npm:39.1.6"
     papaparse: "npm:^5.4.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6491,7 +6491,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6507,7 +6507,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.94.0"
@@ -6525,7 +6525,7 @@ __metadata:
     diff-match-patch-ts: "npm:^0.6.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6543,7 +6543,7 @@ __metadata:
     lodash: "npm:^4.17.21"
     raf: "npm:^3.4.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dnd: ">=14.0.0"
     react-dnd-html5-backend: ">=14.0.0"
@@ -6555,7 +6555,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-docx@npm:39.2.4, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx":
+"@udecode/plate-docx@npm:39.2.13, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-docx@workspace:packages/docx"
   dependencies:
@@ -6563,11 +6563,11 @@ __metadata:
     "@udecode/plate-heading": "npm:39.0.0"
     "@udecode/plate-indent": "npm:39.0.0"
     "@udecode/plate-indent-list": "npm:39.1.10"
-    "@udecode/plate-media": "npm:39.2.4"
+    "@udecode/plate-media": "npm:39.2.13"
     "@udecode/plate-table": "npm:39.1.6"
     validator: "npm:^13.12.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6585,7 +6585,7 @@ __metadata:
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6602,7 +6602,7 @@ __metadata:
     "@excalidraw/excalidraw": "npm:0.16.4"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6618,7 +6618,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6636,7 +6636,7 @@ __metadata:
     "@floating-ui/react": "npm:^0.26.23"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6653,7 +6653,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6669,7 +6669,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6685,7 +6685,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6701,7 +6701,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6719,7 +6719,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     html-entities: "npm:^2.5.2"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6738,7 +6738,7 @@ __metadata:
     "@udecode/plate-list": "npm:39.0.0"
     clsx: "npm:^2.1.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6754,7 +6754,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6771,7 +6771,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     juice: "npm:^8.1.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6787,7 +6787,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6803,7 +6803,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6819,7 +6819,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6837,7 +6837,7 @@ __metadata:
     "@udecode/plate-floating": "npm:39.1.6"
     "@udecode/plate-normalizers": "npm:39.0.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6855,7 +6855,7 @@ __metadata:
     "@udecode/plate-reset-node": "npm:39.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6874,7 +6874,7 @@ __metadata:
     remark-parse: "npm:^9.0.0"
     unified: "npm:^11.0.5"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6892,7 +6892,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     katex: "npm:0.16.11"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6902,14 +6902,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-media@npm:39.2.4, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media":
+"@udecode/plate-media@npm:39.2.13, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-media@workspace:packages/media"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     js-video-url-parser: "npm:^0.5.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6926,7 +6926,7 @@ __metadata:
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6943,7 +6943,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6960,7 +6960,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6977,7 +6977,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
     "@playwright/test": ">=1.42.1"
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6993,7 +6993,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7009,7 +7009,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7025,7 +7025,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7035,14 +7035,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-selection@npm:39.2.3, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
+"@udecode/plate-selection@npm:39.2.12, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-selection@workspace:packages/selection"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     copy-to-clipboard: "npm:^3.3.3"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7059,7 +7059,7 @@ __metadata:
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7077,7 +7077,7 @@ __metadata:
     "@udecode/plate-diff": "npm:39.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7094,7 +7094,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     tabbable: "npm:^6.2.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7112,7 +7112,7 @@ __metadata:
     "@udecode/plate-resizable": "npm:39.1.6"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7139,7 +7139,7 @@ __metadata:
     "@udecode/plate-node-id": "npm:39.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7155,7 +7155,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7165,11 +7165,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-utils@npm:39.2.1, @udecode/plate-utils@workspace:^, @udecode/plate-utils@workspace:packages/plate-utils":
+"@udecode/plate-utils@npm:39.2.15, @udecode/plate-utils@workspace:^, @udecode/plate-utils@workspace:packages/plate-utils":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-utils@workspace:packages/plate-utils"
   dependencies:
-    "@udecode/plate-core": "npm:39.2.1"
+    "@udecode/plate-core": "npm:39.2.15"
     "@udecode/react-utils": "npm:39.0.0"
     "@udecode/slate": "npm:39.2.1"
     "@udecode/slate-react": "npm:39.2.1"
@@ -7196,7 +7196,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     yjs: "npm:^13.6.19"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.1"
+    "@udecode/plate-common": ">=39.2.15"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7219,10 +7219,10 @@ __metadata:
     "@udecode/plate-code-block": "npm:39.0.0"
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-comments": "npm:39.0.0"
-    "@udecode/plate-common": "npm:39.2.1"
+    "@udecode/plate-common": "npm:39.2.15"
     "@udecode/plate-csv": "npm:39.1.6"
     "@udecode/plate-diff": "npm:39.0.0"
-    "@udecode/plate-docx": "npm:39.2.4"
+    "@udecode/plate-docx": "npm:39.2.13"
     "@udecode/plate-find-replace": "npm:39.0.0"
     "@udecode/plate-floating": "npm:39.1.6"
     "@udecode/plate-font": "npm:39.0.0"
@@ -7238,14 +7238,14 @@ __metadata:
     "@udecode/plate-link": "npm:39.1.9"
     "@udecode/plate-list": "npm:39.0.0"
     "@udecode/plate-markdown": "npm:39.2.0"
-    "@udecode/plate-media": "npm:39.2.4"
+    "@udecode/plate-media": "npm:39.2.13"
     "@udecode/plate-mention": "npm:39.0.0"
     "@udecode/plate-node-id": "npm:39.0.0"
     "@udecode/plate-normalizers": "npm:39.0.0"
     "@udecode/plate-reset-node": "npm:39.0.0"
     "@udecode/plate-resizable": "npm:39.1.6"
     "@udecode/plate-select": "npm:39.0.0"
-    "@udecode/plate-selection": "npm:39.2.3"
+    "@udecode/plate-selection": "npm:39.2.12"
     "@udecode/plate-slash-command": "npm:39.0.0"
     "@udecode/plate-suggestion": "npm:39.0.0"
     "@udecode/plate-tabbable": "npm:39.0.0"

From 29972b1b002cc8915d5a773006102280bbde87b2 Mon Sep 17 00:00:00 2001
From: Lenghak Hok <lenghakhok.dev@gmail.com>
Date: Sun, 27 Oct 2024 23:29:27 +0700
Subject: [PATCH 2/6] docs: update changelog

---
 apps/www/content/docs/components/changelog.mdx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index 7c07f1ee92..56c73ed585 100644
--- a/apps/www/content/docs/components/changelog.mdx
+++ b/apps/www/content/docs/components/changelog.mdx
@@ -13,6 +13,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ### October 26 #15.5
 
+- Fixed and modified some styles in emoji and color picker
+
+### October 26 #15.5
+
 - Rename `indent-todo-marker-component` to `indent-todo-marker`.
 
 ### October 25 #15.4

From 4263c6950ab3a7c8e027e801f8533ada496d814f Mon Sep 17 00:00:00 2001
From: Lenghak Hok <lenghakhok.dev@gmail.com>
Date: Mon, 28 Oct 2024 09:40:27 +0700
Subject: [PATCH 3/6] docs: update wrong date changelog

---
 apps/www/content/docs/components/changelog.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index 56c73ed585..9b9010abb4 100644
--- a/apps/www/content/docs/components/changelog.mdx
+++ b/apps/www/content/docs/components/changelog.mdx
@@ -11,7 +11,7 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## October 2024 #15
 
-### October 26 #15.5
+### October 27 #15.6
 
 - Fixed and modified some styles in emoji and color picker
 

From 65f87f0fb2523729371b7f27ac1d89bd26975cd0 Mon Sep 17 00:00:00 2001
From: Lenghak Hok <lenghakhok.dev@gmail.com>
Date: Mon, 28 Oct 2024 12:17:14 +0700
Subject: [PATCH 4/6] styles(color-picker): adjus clear color button

---
 .../plate-ui/color-dropdown-menu-items.tsx    |  2 +-
 .../default/plate-ui/color-picker.tsx         | 49 ++++++++++++-------
 .../default/plate-ui/colors-custom.tsx        | 14 ------
 3 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
index 227f8984c6..a4c1138c82 100644
--- a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
+++ b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
@@ -65,7 +65,7 @@ export function ColorDropdownMenuItem({
   return name ? (
     <Tooltip>
       <TooltipTrigger>{content}</TooltipTrigger>
-      <TooltipContent className="mb-2 capitalize">{name}</TooltipContent>
+      <TooltipContent className="mb-1 capitalize">{name}</TooltipContent>
     </Tooltip>
   ) : (
     content
diff --git a/apps/www/src/registry/default/plate-ui/color-picker.tsx b/apps/www/src/registry/default/plate-ui/color-picker.tsx
index 6b7ac2b101..1aef4f160f 100644
--- a/apps/www/src/registry/default/plate-ui/color-picker.tsx
+++ b/apps/www/src/registry/default/plate-ui/color-picker.tsx
@@ -4,6 +4,9 @@ import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
 
+import { Icons } from '@/components/icons';
+
+import { buttonVariants } from './button';
 import {
   type TColor,
   ColorDropdownMenuItems,
@@ -11,6 +14,7 @@ import {
 import { ColorCustom } from './colors-custom';
 import {
   DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from './dropdown-menu';
@@ -41,40 +45,47 @@ export const ColorPickerContent = withRef<
   ) => {
     return (
       <div ref={ref} className={cn('flex flex-col', className)} {...props}>
+        <DropdownMenuLabel>Color Picker</DropdownMenuLabel>
         <DropdownMenuGroup>
-          <DropdownMenuLabel>Color Picker</DropdownMenuLabel>
-          <ColorDropdownMenuItems
+          <ColorCustom
             color={color}
             className="p-2"
             colors={colors}
+            customColors={customColors}
             updateColor={updateColor}
+            updateCustomColor={updateCustomColor}
           />
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        {/* {color && (
-          <DropdownMenuItem
-          className={buttonVariants({
-              isMenu: true,
-              variant: 'outline',
-              })}
-              onClick={clearColor}
-              >
-              Clear
-              </DropdownMenuItem>
-              )} */}
         <DropdownMenuGroup>
-          <DropdownMenuLabel>Custom</DropdownMenuLabel>
-
-          <ColorCustom
+          <ColorDropdownMenuItems
             color={color}
             className="p-2"
-            clearColor={clearColor}
             colors={colors}
-            customColors={customColors}
             updateColor={updateColor}
-            updateCustomColor={updateCustomColor}
           />
         </DropdownMenuGroup>
+        {color && (
+          <React.Fragment>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                className={cn(
+                  buttonVariants({
+                    isMenu: false,
+                    size: 'sm',
+                    variant: 'ghost',
+                  }),
+                  'w-full justify-start'
+                )}
+                onClick={clearColor}
+              >
+                <Icons.colorClear className="mr-2" />
+                <span>Clear</span>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </React.Fragment>
+        )}
       </div>
     );
   }
diff --git a/apps/www/src/registry/default/plate-ui/colors-custom.tsx b/apps/www/src/registry/default/plate-ui/colors-custom.tsx
index af828d5747..4ca1f7307b 100644
--- a/apps/www/src/registry/default/plate-ui/colors-custom.tsx
+++ b/apps/www/src/registry/default/plate-ui/colors-custom.tsx
@@ -21,7 +21,6 @@ import { ColorInput } from './color-input';
 import { DropdownMenuItem } from './dropdown-menu';
 
 type ColorCustomProps = {
-  clearColor: () => void;
   colors: TColor[];
   customColors: TColor[];
   updateColor: (color: string) => void;
@@ -31,7 +30,6 @@ type ColorCustomProps = {
 
 export function ColorCustom({
   className,
-  clearColor,
   color,
   colors,
   customColors,
@@ -54,18 +52,6 @@ export function ColorCustom({
         colors={state.computedColors}
         updateColor={updateColor}
       >
-        {color && (
-          <DropdownMenuItem
-            className={cn(
-              buttonVariants({ size: 'icon', variant: 'outline' }),
-              'size-7 rounded-full'
-            )}
-            onClick={clearColor}
-          >
-            <Icons.colorClear />
-          </DropdownMenuItem>
-        )}
-
         <ColorInput {...inputProps}>
           <DropdownMenuItem
             className={cn(

From c8dfeaa5d8ba9eba8dfd3ba121eb7d6e964043fe Mon Sep 17 00:00:00 2001
From: Lenghak Hok <lenghakhok.dev@gmail.com>
Date: Thu, 31 Oct 2024 13:27:27 +0700
Subject: [PATCH 5/6] feat(emoji-picker): remove font-['emoji']

---
 apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx
index 30ede2628c..fdb4813e69 100644
--- a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx
+++ b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx
@@ -46,7 +46,7 @@ const Button = memo(
           className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100"
           aria-hidden="true"
         />
-        <span className="relative font-['emoji']" data-emoji-set="native">
+        <span className="relative" data-emoji-set="native">
           {emoji.skins[0].native}
         </span>
       </button>

From 3df78e638f718b7cdc03d5714bc07af93dde31f4 Mon Sep 17 00:00:00 2001
From: Lenghak Hok <lenghakhok.dev@gmail.com>
Date: Thu, 31 Oct 2024 14:37:39 +0700
Subject: [PATCH 6/6] docs(emoji&color-picker): updated registry

---
 apps/www/public/r/styles/default/color-dropdown-menu.json | 6 +++---
 apps/www/public/r/styles/default/emoji-dropdown-menu.json | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

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 fd33cd9b76..4e45fff1f7 100644
--- a/apps/www/public/r/styles/default/color-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/color-dropdown-menu.json
@@ -26,7 +26,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type TColor = {\n  isBrightColor: boolean;\n  name: string;\n  value: string;\n};\n\ntype ColorDropdownMenuItemProps = {\n  isBrightColor: boolean;\n  isSelected: boolean;\n  updateColor: (color: string) => void;\n  value: string;\n  name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n  className,\n  isBrightColor,\n  isSelected,\n  name,\n  updateColor,\n  value,\n  ...props\n}: ColorDropdownMenuItemProps) {\n  const content = (\n    <DropdownMenuItem\n      className={cn(\n        buttonVariants({\n          isMenu: true,\n          variant: 'outline',\n        }),\n        'flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0',\n        !isBrightColor && 'border-transparent text-white hover:!text-white',\n        className\n      )}\n      style={{ backgroundColor: value }}\n      onSelect={(e) => {\n        e.preventDefault();\n        updateColor(value);\n      }}\n      {...props}\n    >\n      {isSelected ? <Icons.check className=\"size-3\" /> : null}\n    </DropdownMenuItem>\n  );\n\n  return name ? (\n    <Tooltip>\n      <TooltipTrigger>{content}</TooltipTrigger>\n      <TooltipContent className=\"capitalize\">{name}</TooltipContent>\n    </Tooltip>\n  ) : (\n    content\n  );\n}\n\ntype ColorDropdownMenuItemsProps = {\n  colors: TColor[];\n  updateColor: (color: string) => void;\n  color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n  className,\n  color,\n  colors,\n  updateColor,\n  ...props\n}: ColorDropdownMenuItemsProps) {\n  return (\n    <div\n      className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}\n      {...props}\n    >\n      <TooltipProvider>\n        {colors.map(({ isBrightColor, name, value }) => (\n          <ColorDropdownMenuItem\n            name={name}\n            key={name ?? value}\n            value={value}\n            isBrightColor={isBrightColor}\n            isSelected={color === value}\n            updateColor={updateColor}\n          />\n        ))}\n        {props.children}\n      </TooltipProvider>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { Check } from 'lucide-react';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type TColor = {\n  isBrightColor: boolean;\n  name: string;\n  value: string;\n};\n\ntype ColorDropdownMenuItemProps = {\n  isBrightColor: boolean;\n  isSelected: boolean;\n  updateColor: (color: string) => void;\n  value: string;\n  name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n  className,\n  isBrightColor,\n  isSelected,\n  name,\n  updateColor,\n  value,\n  ...props\n}: ColorDropdownMenuItemProps) {\n  const content = (\n    <DropdownMenuItem\n      className={cn(\n        buttonVariants({\n          isMenu: true,\n          variant: 'outline',\n        }),\n        'flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0 transition-all hover:scale-125',\n        !isBrightColor && 'border-transparent text-white hover:!text-white',\n        className\n      )}\n      style={{ backgroundColor: value }}\n      onSelect={(e) => {\n        e.preventDefault();\n        updateColor(value);\n      }}\n      {...props}\n    >\n      {isSelected ? <Check className=\"size-3\" /> : null}\n    </DropdownMenuItem>\n  );\n\n  return name ? (\n    <Tooltip>\n      <TooltipTrigger>{content}</TooltipTrigger>\n      <TooltipContent className=\"mb-1 capitalize\">{name}</TooltipContent>\n    </Tooltip>\n  ) : (\n    content\n  );\n}\n\ntype ColorDropdownMenuItemsProps = {\n  colors: TColor[];\n  updateColor: (color: string) => void;\n  color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n  className,\n  color,\n  colors,\n  updateColor,\n  ...props\n}: ColorDropdownMenuItemsProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[repeat(10,1fr)] place-items-center gap-1',\n        className\n      )}\n      {...props}\n    >\n      <TooltipProvider>\n        {colors.map(({ isBrightColor, name, value }) => (\n          <ColorDropdownMenuItem\n            name={name}\n            key={name ?? value}\n            value={value}\n            isBrightColor={isBrightColor}\n            isSelected={color === value}\n            updateColor={updateColor}\n          />\n        ))}\n        {props.children}\n      </TooltipProvider>\n    </div>\n  );\n}\n",
       "path": "plate-ui/color-dropdown-menu-items.tsx",
       "target": "components/plate-ui/color-dropdown-menu-items.tsx",
       "type": "registry:ui"
@@ -44,13 +44,13 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { Separator } from './separator';\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\n        ref={ref}\n        className={cn('flex flex-col gap-4 p-2', className)}\n        {...props}\n      >\n\n        <ColorDropdownMenuItems\n          color={color}\n          colors={colors}\n          updateColor={updateColor}\n        />\n\n        <Separator />\n        {/* {color && (\n          <DropdownMenuItem\n          className={buttonVariants({\n              isMenu: true,\n              variant: 'outline',\n              })}\n              onClick={clearColor}\n              >\n              Clear\n              </DropdownMenuItem>\n              )} */}\n        <ColorCustom\n          color={color}\n          colors={colors}\n          customColors={customColors}\n          updateColor={updateColor}\n          updateCustomColor={updateCustomColor}\n          clearColor={clearColor}\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';\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 {\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n} 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        <DropdownMenuLabel>Color Picker</DropdownMenuLabel>\n        <DropdownMenuGroup>\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        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <ColorDropdownMenuItems\n            color={color}\n            className=\"p-2\"\n            colors={colors}\n            updateColor={updateColor}\n          />\n        </DropdownMenuGroup>\n        {color && (\n          <React.Fragment>\n            <DropdownMenuSeparator />\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 className=\"mr-2\" />\n                <span>Clear</span>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </React.Fragment>\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 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';\n// import { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorCustomProps = {\n  clearColor: () => void;\n  colors: TColor[];\n  customColors: TColor[];\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n};\n\nexport function ColorCustom({\n  clearColor,\n  color,\n  colors,\n  customColors,\n  updateColor,\n  updateCustomColor,\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=\"flex flex-col gap-4\">\n      {/* <ColorInput {...inputProps}>\n        <DropdownMenuItem\n          className={buttonVariants({\n            isMenu: true,\n            variant: 'outline',\n          })}\n          {...menuItemProps}\n        >\n          CUSTOM\n        </DropdownMenuItem>\n      </ColorInput> */}\n\n      <ColorDropdownMenuItems\n        color={color}\n        colors={state.computedColors}\n        updateColor={updateColor}\n      >\n        <DropdownMenuItem\n          className={cn(\n            buttonVariants({ size: 'icon', variant: 'outline' }),\n            'size-6 rounded-full'\n          )}\n          onClick={clearColor}\n        >\n          <Icons.colorClear />\n        </DropdownMenuItem>\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';\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",
       "path": "plate-ui/colors-custom.tsx",
       "target": "components/plate-ui/colors-custom.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/emoji-dropdown-menu.json b/apps/www/public/r/styles/default/emoji-dropdown-menu.json
index 4b405ef281..f5af63c24d 100644
--- a/apps/www/public/r/styles/default/emoji-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/emoji-dropdown-menu.json
@@ -33,13 +33,13 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n  UseEmojiPickerType,\n  | 'emojiLibrary'\n  | 'i18n'\n  | 'isSearching'\n  | 'onMouseOver'\n  | 'onSelectEmoji'\n  | 'refs'\n  | 'searchResult'\n  | 'settings'\n  | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n  emoji: Emoji;\n  index: number;\n  onMouseOver: (emoji?: Emoji) => void;\n  onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n  row: GridRow;\n} & Pick<UseEmojiPickerType, 'emojiLibrary' | 'onMouseOver' | 'onSelectEmoji'>;\n\nconst Button = memo(\n  ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n    return (\n      <button\n        className=\"group relative flex size-9 cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none\"\n        onClick={() => onSelect(emoji)}\n        onMouseEnter={() => onMouseOver(emoji)}\n        onMouseLeave={() => onMouseOver()}\n        aria-label={emoji.skins[0].native}\n        data-index={index}\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <div\n          className=\"absolute inset-0 rounded-full opacity-0 group-hover:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <span style={{ position: 'relative' }} data-emoji-set=\"native\">\n          {emoji.skins[0].native}\n        </span>\n      </button>\n    );\n  }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n  ({ emojiLibrary, row, onMouseOver, onSelectEmoji }: RowOfButtonsProps) => (\n    <div key={row.id} className=\"flex\" data-index={row.id}>\n      {row.elements.map((emojiId, index) => (\n        <Button\n          key={emojiId}\n          onMouseOver={onMouseOver}\n          onSelect={onSelectEmoji}\n          emoji={emojiLibrary.getEmoji(emojiId)}\n          index={index}\n        />\n      ))}\n    </div>\n  )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n  emojiLibrary,\n  i18n,\n  isSearching = false,\n  refs,\n  searchResult,\n  settings = EmojiSettings,\n  visibleCategories,\n  onMouseOver,\n  onSelectEmoji,\n}: EmojiPickerContentProps) {\n  const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n  const isCategoryVisible = useCallback(\n    (categoryId: any) => {\n      return visibleCategories.has(categoryId)\n        ? visibleCategories.get(categoryId)\n        : false;\n    },\n    [visibleCategories]\n  );\n\n  const EmojiList = useCallback(() => {\n    return emojiLibrary\n      .getGrid()\n      .sections()\n      .map(({ id: categoryId }) => {\n        const section = emojiLibrary.getGrid().section(categoryId);\n        const { buttonSize } = settings;\n\n        return (\n          <div\n            key={categoryId}\n            ref={section.root}\n            style={{ width: getRowWidth }}\n            data-id={categoryId}\n          >\n            <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold backdrop-blur-sm\">\n              {i18n.categories[categoryId]}\n            </div>\n            <div\n              className=\"relative flex flex-wrap\"\n              style={{ height: section.getRows().length * buttonSize.value }}\n            >\n              {isCategoryVisible(categoryId) &&\n                section\n                  .getRows()\n                  .map((row: GridRow) => (\n                    <RowOfButtons\n                      key={row.id}\n                      onMouseOver={onMouseOver}\n                      onSelectEmoji={onSelectEmoji}\n                      emojiLibrary={emojiLibrary}\n                      row={row}\n                    />\n                  ))}\n            </div>\n          </div>\n        );\n      });\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.categories,\n    isCategoryVisible,\n    onSelectEmoji,\n    onMouseOver,\n    settings,\n  ]);\n\n  const SearchList = useCallback(() => {\n    return (\n      <div style={{ width: getRowWidth }} data-id=\"search\">\n        <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold text-card-foreground backdrop-blur-sm\">\n          {i18n.searchResult}\n        </div>\n        <div className=\"relative flex flex-wrap\">\n          {searchResult.map((emoji: Emoji, index: number) => (\n            <Button\n              key={emoji.id}\n              onMouseOver={onMouseOver}\n              onSelect={onSelectEmoji}\n              emoji={emojiLibrary.getEmoji(emoji.id)}\n              index={index}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.searchResult,\n    searchResult,\n    onSelectEmoji,\n    onMouseOver,\n  ]);\n\n  return (\n    <div\n      ref={refs.current.contentRoot}\n      className={cn(\n        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',\n        '[&::-webkit-scrollbar]:w-4',\n        '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',\n        '[&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25',\n        '[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:bg-clip-padding'\n      )}\n      data-id=\"scroll\"\n    >\n      <div ref={refs.current.content} className=\"h-full\">\n        {isSearching ? SearchList() : EmojiList()}\n      </div>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n  UseEmojiPickerType,\n  | 'emojiLibrary'\n  | 'i18n'\n  | 'isSearching'\n  | 'onMouseOver'\n  | 'onSelectEmoji'\n  | 'refs'\n  | 'searchResult'\n  | 'settings'\n  | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n  emoji: Emoji;\n  index: number;\n  onMouseOver: (emoji?: Emoji) => void;\n  onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n  row: GridRow;\n} & Pick<UseEmojiPickerType, 'emojiLibrary' | 'onMouseOver' | 'onSelectEmoji'>;\n\nconst Button = memo(\n  ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n    return (\n      <button\n        className=\"group relative flex size-9 cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none\"\n        onClick={() => onSelect(emoji)}\n        onMouseEnter={() => onMouseOver(emoji)}\n        onMouseLeave={() => onMouseOver()}\n        aria-label={emoji.skins[0].native}\n        data-index={index}\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <div\n          className=\"absolute inset-0 rounded-full opacity-0 group-hover:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <span className=\"relative\" data-emoji-set=\"native\">\n          {emoji.skins[0].native}\n        </span>\n      </button>\n    );\n  }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n  ({ emojiLibrary, row, onMouseOver, onSelectEmoji }: RowOfButtonsProps) => (\n    <div key={row.id} className=\"flex\" data-index={row.id}>\n      {row.elements.map((emojiId, index) => (\n        <Button\n          key={emojiId}\n          onMouseOver={onMouseOver}\n          onSelect={onSelectEmoji}\n          emoji={emojiLibrary.getEmoji(emojiId)}\n          index={index}\n        />\n      ))}\n    </div>\n  )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n  emojiLibrary,\n  i18n,\n  isSearching = false,\n  refs,\n  searchResult,\n  settings = EmojiSettings,\n  visibleCategories,\n  onMouseOver,\n  onSelectEmoji,\n}: EmojiPickerContentProps) {\n  const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n  const isCategoryVisible = useCallback(\n    (categoryId: any) => {\n      return visibleCategories.has(categoryId)\n        ? visibleCategories.get(categoryId)\n        : false;\n    },\n    [visibleCategories]\n  );\n\n  const EmojiList = useCallback(() => {\n    return emojiLibrary\n      .getGrid()\n      .sections()\n      .map(({ id: categoryId }) => {\n        const section = emojiLibrary.getGrid().section(categoryId);\n        const { buttonSize } = settings;\n\n        return (\n          <div\n            key={categoryId}\n            ref={section.root}\n            style={{ width: getRowWidth }}\n            data-id={categoryId}\n          >\n            <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold backdrop-blur-sm\">\n              {i18n.categories[categoryId]}\n            </div>\n            <div\n              className=\"relative flex flex-wrap\"\n              style={{ height: section.getRows().length * buttonSize.value }}\n            >\n              {isCategoryVisible(categoryId) &&\n                section\n                  .getRows()\n                  .map((row: GridRow) => (\n                    <RowOfButtons\n                      key={row.id}\n                      onMouseOver={onMouseOver}\n                      onSelectEmoji={onSelectEmoji}\n                      emojiLibrary={emojiLibrary}\n                      row={row}\n                    />\n                  ))}\n            </div>\n          </div>\n        );\n      });\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.categories,\n    isCategoryVisible,\n    onSelectEmoji,\n    onMouseOver,\n    settings,\n  ]);\n\n  const SearchList = useCallback(() => {\n    return (\n      <div style={{ width: getRowWidth }} data-id=\"search\">\n        <div className=\"sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold text-card-foreground backdrop-blur-sm\">\n          {i18n.searchResult}\n        </div>\n        <div className=\"relative flex flex-wrap\">\n          {searchResult.map((emoji: Emoji, index: number) => (\n            <Button\n              key={emoji.id}\n              onMouseOver={onMouseOver}\n              onSelect={onSelectEmoji}\n              emoji={emojiLibrary.getEmoji(emoji.id)}\n              index={index}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }, [\n    emojiLibrary,\n    getRowWidth,\n    i18n.searchResult,\n    searchResult,\n    onSelectEmoji,\n    onMouseOver,\n  ]);\n\n  return (\n    <div\n      ref={refs.current.contentRoot}\n      className={cn(\n        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',\n        '[&::-webkit-scrollbar]:w-4',\n        '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',\n        '[&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25',\n        '[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:bg-clip-padding'\n      )}\n      data-id=\"scroll\"\n    >\n      <div ref={refs.current.content} className=\"h-full\">\n        {isSearching ? SearchList() : EmojiList()}\n      </div>\n    </div>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-content.tsx",
       "target": "components/plate-ui/emoji-picker-content.tsx",
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport { useMemo } from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type {\n  IEmojiFloatingLibrary,\n  UseEmojiPickerType,\n} from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type EmojiPickerNavigationProps = {\n  onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n  UseEmojiPickerType,\n  'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\nconst getBarProperty = (\n  emojiLibrary: IEmojiFloatingLibrary,\n  focusedCategory?: EmojiCategoryList\n) => {\n  let width = 0;\n  let position = 0;\n\n  if (focusedCategory) {\n    width = 100 / emojiLibrary.getGrid().size;\n    position = focusedCategory\n      ? emojiLibrary.indexOf(focusedCategory) * 100\n      : 0;\n  }\n\n  return { position, width };\n};\n\nexport function EmojiPickerNavigation({\n  emojiLibrary,\n  focusedCategory,\n  i18n,\n  icons,\n  onClick,\n}: EmojiPickerNavigationProps) {\n  const { position, width } = useMemo(\n    () => getBarProperty(emojiLibrary, focusedCategory),\n    [emojiLibrary, focusedCategory]\n  );\n\n  return (\n    <TooltipProvider delayDuration={500}>\n      <nav\n        id=\"emoji-nav\"\n        className=\"mb-2.5 border-0 border-b border-solid border-b-border p-1.5\"\n      >\n        <div className=\"relative flex items-center justify-evenly\">\n          {emojiLibrary\n            .getGrid()\n            .sections()\n            .map(({ id }) => (\n              <Tooltip key={id}>\n                <TooltipTrigger asChild>\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    className={cn(\n                      'h-fit rounded-full fill-current p-1.5 text-muted-foreground hover:bg-muted hover:text-muted-foreground',\n                      id === focusedCategory &&\n                        'pointer-events-none bg-accent fill-current text-accent-foreground'\n                    )}\n                    onClick={() => {\n                      onClick(id);\n                    }}\n                    aria-label={i18n.categories[id]}\n                    type=\"button\"\n                  >\n                    <span className=\"size-5\">\n                      {icons.categories[id].outline}\n                    </span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {i18n.categories[id]}\n                </TooltipContent>\n              </Tooltip>\n            ))}\n          <div\n            className={cn(\n              'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'\n            )}\n            style={{\n              transform: `translateX(${position}%)`,\n              visibility: `${focusedCategory ? 'visible' : 'hidden'}`,\n              width: `${width}%`,\n            }}\n          />\n        </div>\n      </nav>\n    </TooltipProvider>\n  );\n}\n",
+      "content": "import type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport type EmojiPickerNavigationProps = {\n  onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n  UseEmojiPickerType,\n  'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\n// KEEP: This is for the animated idicator bar under the icon - Opt in if needed\n// const getBarProperty = (\n//   emojiLibrary: IEmojiFloatingLibrary,\n//   focusedCategory?: EmojiCategoryList\n// ) => {\n//   let width = 0;\n//   let position = 0;\n\n//   if (focusedCategory) {\n//     width = 100 / emojiLibrary.getGrid().size;\n//     position = focusedCategory\n//       ? emojiLibrary.indexOf(focusedCategory) * 100\n//       : 0;\n//   }\n\n//   return { position, width };\n// };\n\nexport function EmojiPickerNavigation({\n  emojiLibrary,\n  focusedCategory,\n  i18n,\n  icons,\n  onClick,\n}: EmojiPickerNavigationProps) {\n  // KEEP: This is for the animated idicator bar under the icon - Opt in if needed\n  // const { position, width } = useMemo(\n  //   () => getBarProperty(emojiLibrary, focusedCategory),\n  //   [emojiLibrary, focusedCategory]\n  // );\n\n  return (\n    <TooltipProvider delayDuration={500}>\n      <nav\n        id=\"emoji-nav\"\n        className=\"mb-2.5 border-0 border-b border-solid border-b-border p-1.5\"\n      >\n        <div className=\"relative flex items-center justify-evenly\">\n          {emojiLibrary\n            .getGrid()\n            .sections()\n            .map(({ id }) => (\n              <Tooltip key={id}>\n                <TooltipTrigger asChild>\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    className={cn(\n                      'h-fit rounded-full fill-current p-1.5 text-muted-foreground hover:bg-muted hover:text-muted-foreground',\n                      id === focusedCategory &&\n                        'pointer-events-none bg-accent fill-current text-accent-foreground'\n                    )}\n                    onClick={() => {\n                      onClick(id);\n                    }}\n                    aria-label={i18n.categories[id]}\n                    type=\"button\"\n                  >\n                    <span className=\"inline-flex size-5 items-center justify-center\">\n                      {icons.categories[id].outline}\n                    </span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {i18n.categories[id]}\n                </TooltipContent>\n              </Tooltip>\n            ))}\n\n          {/* This is the animated indicator - Opt In if needed */}\n          {/* <div\n            className={cn(\n              'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'\n            )}\n            style={{\n              transform: `translateX(${position}%)`,\n              visibility: `${focusedCategory ? 'visible' : 'hidden'}`,\n              width: `${width}%`,\n            }}\n          /> */}\n        </div>\n      </nav>\n    </TooltipProvider>\n  );\n}\n",
       "path": "plate-ui/emoji-picker-navigation.tsx",
       "target": "components/plate-ui/emoji-picker-navigation.tsx",
       "type": "registry:ui"