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 efc5a7ad0..c86e1eff8 100644
--- a/apps/www/public/r/styles/default/color-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/color-dropdown-menu.json
@@ -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 { Tooltip, TooltipContent, TooltipTrigger } 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      {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    </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 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",
       "path": "plate-ui/color-dropdown-menu-items.tsx",
       "target": "",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/draggable.json b/apps/www/public/r/styles/default/draggable.json
index 2cad99ce7..823fd6f73 100644
--- a/apps/www/public/r/styles/default/draggable.json
+++ b/apps/www/public/r/styles/default/draggable.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ClassNames, TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  type PlateElementProps,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n  type DragItemNode,\n  useDraggable,\n  useDraggableState,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipPortal,\n  TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps\n  extends PlateElementProps,\n    ClassNames<{\n      /** Block. */\n      block: string;\n\n      /** Block and gutter. */\n      blockAndGutter: string;\n\n      /** Block toolbar in the gutter. */\n      blockToolbar: string;\n\n      /**\n       * Block toolbar wrapper in the gutter left. It has the height of a line\n       * of the block.\n       */\n      blockToolbarWrapper: string;\n\n      blockWrapper: string;\n\n      /** Button to dnd the block, in the block toolbar. */\n      dragHandle: string;\n\n      /** Icon of the drag button, in the drag icon. */\n      dragIcon: string;\n\n      /** Show a dropline above or below the block when dragging a block. */\n      dropLine: string;\n\n      /** Gutter at the left side of the editor. It has the height of the block */\n      gutterLeft: string;\n    }> {\n  /**\n   * Intercepts the drop handling. If `false` is returned, the default drop\n   * behavior is called after. If `true` is returned, the default behavior is\n   * not called.\n   */\n  onDropHandler?: (\n    editor: TEditor,\n    props: {\n      id: string;\n      dragItem: DragItemNode;\n      monitor: DropTargetMonitor<DragItemNode, unknown>;\n      nodeRef: any;\n    }\n  ) => boolean;\n}\n\nconst DragHandle = () => {\n  const editor = useEditorRef();\n\n  return (\n    <Tooltip>\n      <TooltipTrigger type=\"button\">\n        <Icons.dragHandle\n          className=\"size-4 text-muted-foreground\"\n          onClick={(event) => {\n            event.stopPropagation();\n            event.preventDefault();\n\n            // if (element.id) {\n            //   editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);\n            //   api.blockContextMenu.show(editor.id, event as any);\n            // }\n          }}\n          onMouseDown={() => {\n            editor\n              .getApi(BlockSelectionPlugin)\n              .blockSelection.resetSelectedIds();\n          }}\n        />\n      </TooltipTrigger>\n      <TooltipPortal>\n        <TooltipContent>Drag to move</TooltipContent>\n      </TooltipPortal>\n    </Tooltip>\n  );\n};\n\nexport const Draggable = withRef<'div', DraggableProps>(\n  ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n    const { children, element } = props;\n\n    const state = useDraggableState({ element, onDropHandler });\n    const { dropLine, isDragging, isHovered } = state;\n    const {\n      droplineProps,\n      groupProps,\n      gutterLeftProps,\n      previewRef,\n      handleRef,\n    } = useDraggable(state);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative',\n          isDragging && 'opacity-50',\n          'group',\n          className\n        )}\n        {...groupProps}\n      >\n        <div\n          className={cn(\n            'pointer-events-none absolute -top-px z-50 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',\n            classNames.gutterLeft\n          )}\n          {...gutterLeftProps}\n        >\n          <div className={cn('flex h-[1.5em]', classNames.blockToolbarWrapper)}>\n            <div\n              className={cn(\n                'pointer-events-auto mr-1 flex items-center',\n                classNames.blockToolbar\n              )}\n            >\n              <div\n                ref={handleRef}\n                className=\"size-4\"\n                data-key={element.id as string}\n              >\n                {isHovered && <DragHandle />}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div ref={previewRef} className={classNames.blockWrapper}>\n          {children}\n\n          {!!dropLine && (\n            <div\n              className={cn(\n                'absolute inset-x-0 h-0.5 opacity-100',\n                'bg-ring',\n                dropLine === 'top' && '-top-px',\n                dropLine === 'bottom' && '-bottom-px',\n                classNames.dropLine\n              )}\n              {...droplineProps}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ClassNames, TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  type PlateElementProps,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n  type DragItemNode,\n  useDraggable,\n  useDraggableState,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipPortal,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps\n  extends PlateElementProps,\n    ClassNames<{\n      /** Block. */\n      block: string;\n\n      /** Block and gutter. */\n      blockAndGutter: string;\n\n      /** Block toolbar in the gutter. */\n      blockToolbar: string;\n\n      /**\n       * Block toolbar wrapper in the gutter left. It has the height of a line\n       * of the block.\n       */\n      blockToolbarWrapper: string;\n\n      blockWrapper: string;\n\n      /** Button to dnd the block, in the block toolbar. */\n      dragHandle: string;\n\n      /** Icon of the drag button, in the drag icon. */\n      dragIcon: string;\n\n      /** Show a dropline above or below the block when dragging a block. */\n      dropLine: string;\n\n      /** Gutter at the left side of the editor. It has the height of the block */\n      gutterLeft: string;\n    }> {\n  /**\n   * Intercepts the drop handling. If `false` is returned, the default drop\n   * behavior is called after. If `true` is returned, the default behavior is\n   * not called.\n   */\n  onDropHandler?: (\n    editor: TEditor,\n    props: {\n      id: string;\n      dragItem: DragItemNode;\n      monitor: DropTargetMonitor<DragItemNode, unknown>;\n      nodeRef: any;\n    }\n  ) => boolean;\n}\n\nconst DragHandle = () => {\n  const editor = useEditorRef();\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger type=\"button\">\n          <Icons.dragHandle\n            className=\"size-4 text-muted-foreground\"\n            onClick={(event) => {\n              event.stopPropagation();\n              event.preventDefault();\n\n              // if (element.id) {\n              //   editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);\n              //   api.blockContextMenu.show(editor.id, event as any);\n              // }\n            }}\n            onMouseDown={() => {\n              editor\n                .getApi(BlockSelectionPlugin)\n                .blockSelection.resetSelectedIds();\n            }}\n          />\n        </TooltipTrigger>\n        <TooltipPortal>\n          <TooltipContent>Drag to move</TooltipContent>\n        </TooltipPortal>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nexport const Draggable = withRef<'div', DraggableProps>(\n  ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n    const { children, element } = props;\n\n    const state = useDraggableState({ element, onDropHandler });\n    const { dropLine, isDragging, isHovered } = state;\n    const {\n      droplineProps,\n      groupProps,\n      gutterLeftProps,\n      previewRef,\n      handleRef,\n    } = useDraggable(state);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative',\n          isDragging && 'opacity-50',\n          'group',\n          className\n        )}\n        {...groupProps}\n      >\n        <div\n          className={cn(\n            'pointer-events-none absolute -top-px z-50 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',\n            classNames.gutterLeft\n          )}\n          {...gutterLeftProps}\n        >\n          <div className={cn('flex h-[1.5em]', classNames.blockToolbarWrapper)}>\n            <div\n              className={cn(\n                'pointer-events-auto mr-1 flex items-center',\n                classNames.blockToolbar\n              )}\n            >\n              <div\n                ref={handleRef}\n                className=\"size-4\"\n                data-key={element.id as string}\n              >\n                {isHovered && <DragHandle />}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div ref={previewRef} className={classNames.blockWrapper}>\n          {children}\n\n          {!!dropLine && (\n            <div\n              className={cn(\n                'absolute inset-x-0 h-0.5 opacity-100',\n                'bg-ring',\n                dropLine === 'top' && '-top-px',\n                dropLine === 'bottom' && '-bottom-px',\n                classNames.dropLine\n              )}\n              {...droplineProps}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n",
       "path": "plate-ui/draggable.tsx",
       "target": "",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/emoji-input-element.json b/apps/www/public/r/styles/default/emoji-input-element.json
index ceef1bb62..4cd8ed33e 100644
--- a/apps/www/public/r/styles/default/emoji-input-element.json
+++ b/apps/www/public/r/styles/default/emoji-input-element.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport { useDebounce } from '@/hooks/use-debounce';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\n\nexport const EmojiInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n    const [value, setValue] = useState('');\n    const debouncedValue = useDebounce(value, 100);\n    const isPending = value !== debouncedValue;\n\n    const filteredEmojis = useMemo(() => {\n      if (debouncedValue.trim().length === 0) return [];\n\n      return EmojiInlineIndexSearch.getInstance()\n        .search(debouncedValue.replace(/:$/, ''))\n        .get();\n    }, [debouncedValue]);\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox\n          value={value}\n          element={element}\n          filter={false}\n          setValue={setValue}\n          trigger=\":\"\n          hideWhenNoValue\n        >\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            {!isPending && (\n              <InlineComboboxEmpty>No matching emoji found</InlineComboboxEmpty>\n            )}\n\n            {filteredEmojis.map((emoji) => (\n              <InlineComboboxItem\n                key={emoji.id}\n                value={emoji.name}\n                onClick={() => insertEmoji(editor, emoji)}\n              >\n                {emoji.skins[0].native} {emoji.name}\n              </InlineComboboxItem>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport { useDebounce } from '@/registry/default/hooks/use-debounce';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\n\nexport const EmojiInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n    const [value, setValue] = useState('');\n    const debouncedValue = useDebounce(value, 100);\n    const isPending = value !== debouncedValue;\n\n    const filteredEmojis = useMemo(() => {\n      if (debouncedValue.trim().length === 0) return [];\n\n      return EmojiInlineIndexSearch.getInstance()\n        .search(debouncedValue.replace(/:$/, ''))\n        .get();\n    }, [debouncedValue]);\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox\n          value={value}\n          element={element}\n          filter={false}\n          setValue={setValue}\n          trigger=\":\"\n          hideWhenNoValue\n        >\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            {!isPending && (\n              <InlineComboboxEmpty>No matching emoji found</InlineComboboxEmpty>\n            )}\n\n            {filteredEmojis.map((emoji) => (\n              <InlineComboboxItem\n                key={emoji.id}\n                value={emoji.name}\n                onClick={() => insertEmoji(editor, emoji)}\n              >\n                {emoji.skins[0].native} {emoji.name}\n              </InlineComboboxItem>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/emoji-input-element.tsx",
       "target": "",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/floating-toolbar.json b/apps/www/public/r/styles/default/floating-toolbar.json
index af61bbd30..9de2dc03c 100644
--- a/apps/www/public/r/styles/default/floating-toolbar.json
+++ b/apps/www/public/r/styles/default/floating-toolbar.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  PortalBody,\n  useComposedRef,\n  useEditorId,\n  useEventEditorSelectors,\n} from '@udecode/plate-common/react';\nimport {\n  type FloatingToolbarState,\n  flip,\n  offset,\n  useFloatingToolbar,\n  useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n  typeof Toolbar,\n  {\n    state?: FloatingToolbarState;\n  }\n>(({ children, state, ...props }, componentRef) => {\n  const editorId = useEditorId();\n  const focusedEditorId = useEventEditorSelectors.focus();\n\n  const floatingToolbarState = useFloatingToolbarState({\n    editorId,\n    focusedEditorId,\n    ...state,\n    floatingOptions: {\n      middleware: [\n        offset(12),\n        flip({\n          fallbackPlacements: [\n            'top-start',\n            'top-end',\n            'bottom-start',\n            'bottom-end',\n          ],\n          padding: 12,\n        }),\n      ],\n      placement: 'top',\n      ...state?.floatingOptions,\n    },\n  });\n\n  const {\n    hidden,\n    props: rootProps,\n    ref: floatingRef,\n  } = useFloatingToolbar(floatingToolbarState);\n\n  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);\n\n  if (hidden) return null;\n\n  return (\n    <PortalBody>\n      <Toolbar\n        ref={ref}\n        className={cn(\n          'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden'\n        )}\n        {...rootProps}\n        {...props}\n      >\n        {children}\n      </Toolbar>\n    </PortalBody>\n  );\n});\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  PortalBody,\n  useComposedRef,\n  useEditorId,\n  useEventEditorSelectors,\n} from '@udecode/plate-common/react';\nimport {\n  type FloatingToolbarState,\n  flip,\n  offset,\n  useFloatingToolbar,\n  useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n  typeof Toolbar,\n  {\n    state?: FloatingToolbarState;\n  }\n>(({ children, state, ...props }, componentRef) => {\n  const editorId = useEditorId();\n  const focusedEditorId = useEventEditorSelectors.focus();\n\n  const floatingToolbarState = useFloatingToolbarState({\n    editorId,\n    focusedEditorId,\n    ...state,\n    floatingOptions: {\n      middleware: [\n        offset(12),\n        flip({\n          fallbackPlacements: [\n            'top-start',\n            'top-end',\n            'bottom-start',\n            'bottom-end',\n          ],\n          padding: 12,\n        }),\n      ],\n      placement: 'top',\n      ...state?.floatingOptions,\n    },\n  });\n\n  const {\n    hidden,\n    props: rootProps,\n    ref: floatingRef,\n  } = useFloatingToolbar(floatingToolbarState);\n\n  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);\n\n  if (hidden) return null;\n\n  return (\n    <PortalBody>\n      <Toolbar\n        ref={ref}\n        className={cn(\n          'absolute z-50 whitespace-nowrap rounded-md border bg-popover px-1 opacity-100 shadow-md print:hidden'\n        )}\n        {...rootProps}\n        {...props}\n      >\n        {children}\n      </Toolbar>\n    </PortalBody>\n  );\n});\n",
       "path": "plate-ui/floating-toolbar.tsx",
       "target": "",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/tooltip.json b/apps/www/public/r/styles/default/tooltip.json
index 949704ca0..357e4999f 100644
--- a/apps/www/public/r/styles/default/tooltip.json
+++ b/apps/www/public/r/styles/default/tooltip.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { withCn, withProps } from '@udecode/cn';\n\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport const Tooltip = TooltipPrimitive.Root;\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport const TooltipContent = withCn(\n  withProps(TooltipPrimitive.Content, {\n    sideOffset: 4,\n  }),\n  'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md'\n);\n\nexport function withTooltip<\n  T extends React.ComponentType<any> | keyof HTMLElementTagNameMap,\n>(Component: T) {\n  return React.forwardRef<\n    React.ElementRef<T>,\n    {\n      tooltipContentProps?: Omit<\n        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n        'children'\n      >;\n      tooltipProps?: Omit<\n        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,\n        'children'\n      >;\n      tooltip?: React.ReactNode;\n    } & React.ComponentPropsWithoutRef<T>\n  >(function ExtendComponent(\n    { tooltip, tooltipContentProps, tooltipProps, ...props },\n    ref\n  ) {\n    const [mounted, setMounted] = React.useState(false);\n\n    React.useEffect(() => {\n      setMounted(true);\n    }, []);\n\n    const component = <Component ref={ref} {...(props as any)} />;\n\n    if (tooltip && mounted) {\n      return (\n        <Tooltip {...tooltipProps}>\n          <TooltipTrigger asChild>{component}</TooltipTrigger>\n\n          <TooltipPortal>\n            <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>\n          </TooltipPortal>\n        </Tooltip>\n      );\n    }\n\n    return component;\n  });\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { withCn, withProps } from '@udecode/cn';\n\nexport const TooltipProvider = withProps(TooltipPrimitive.Provider, {\n  delayDuration: 0,\n  disableHoverableContent: true,\n  skipDelayDuration: 0,\n});\n\nexport const Tooltip = TooltipPrimitive.Root;\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport const TooltipContent = withCn(\n  withProps(TooltipPrimitive.Content, {\n    sideOffset: 4,\n  }),\n  'z-50 overflow-hidden rounded-md bg-black px-3 py-1.5 text-sm font-semibold text-white shadow-md'\n);\n\nexport function withTooltip<\n  T extends React.ComponentType<any> | keyof HTMLElementTagNameMap,\n>(Component: T) {\n  return React.forwardRef<\n    React.ElementRef<T>,\n    {\n      tooltipContentProps?: Omit<\n        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n        'children'\n      >;\n      tooltipProps?: Omit<\n        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,\n        'children'\n      >;\n      tooltip?: React.ReactNode;\n    } & React.ComponentPropsWithoutRef<T> &\n      Omit<TooltipPrimitive.TooltipProviderProps, 'children'>\n  >(function ExtendComponent(\n    {\n      delayDuration = 0,\n      disableHoverableContent = true,\n      skipDelayDuration = 0,\n      tooltip,\n      tooltipContentProps,\n      tooltipProps,\n      ...props\n    },\n    ref\n  ) {\n    const [mounted, setMounted] = React.useState(false);\n\n    React.useEffect(() => {\n      setMounted(true);\n    }, []);\n\n    const component = <Component ref={ref} {...(props as any)} />;\n\n    if (tooltip && mounted) {\n      return (\n        <TooltipProvider\n          delayDuration={delayDuration}\n          disableHoverableContent={disableHoverableContent}\n          skipDelayDuration={skipDelayDuration}\n        >\n          <Tooltip {...tooltipProps}>\n            <TooltipTrigger asChild>{component}</TooltipTrigger>\n\n            <TooltipPortal>\n              <TooltipContent {...tooltipContentProps}>\n                {tooltip}\n              </TooltipContent>\n            </TooltipPortal>\n          </Tooltip>\n        </TooltipProvider>\n      );\n    }\n\n    return component;\n  });\n}\n",
       "path": "plate-ui/tooltip.tsx",
       "target": "",
       "type": "registry:ui"
diff --git a/apps/www/src/registry/default/plate-ui/tooltip.tsx b/apps/www/src/registry/default/plate-ui/tooltip.tsx
index 130f88ece..ca6e82ab7 100644
--- a/apps/www/src/registry/default/plate-ui/tooltip.tsx
+++ b/apps/www/src/registry/default/plate-ui/tooltip.tsx
@@ -40,7 +40,7 @@ export function withTooltip<
       >;
       tooltip?: React.ReactNode;
     } & React.ComponentPropsWithoutRef<T> &
-      TooltipPrimitive.TooltipProviderProps
+      Omit<TooltipPrimitive.TooltipProviderProps, 'children'>
   >(function ExtendComponent(
     {
       delayDuration = 0,