@soul-refiner/design-system 2.0.0-alpha.14 → 2.0.0-alpha.16

package/dist/src/components/editor/plugins/blocks/blocks.js

@@ -1,52 +1,54 @@
-import { createBlockquotePlugin, createCodeBlockPlugin, createHeadingPlugin, createHorizontalRulePlugin, createImagePlugin, createTextIndentPlugin, createIndentListPlugin, ELEMENT_PARAGRAPH, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_OL, ELEMENT_UL, createListPlugin, createMediaEmbedPlugin, createResetNodePlugin, createTablePlugin } from '@udecode/plate';
-import { createParagraphPlugin, createHOnePlugin, createHTwoPlugin, createHThreePlugin, createHFourPlugin, createHFivePlugin, createHSixPlugin } from './text.js';
-import { createButtonsPlugin } from './buttons.js';
-import { createQAPlugin } from './qa.js';
-import { createVideoTitlePlugin } from './video.js';
+'use strict';
+
+var plate = require('@udecode/plate');
+var text = require('./text.js');
+var buttons = require('./buttons.js');
+var qa = require('./qa.js');
+var video = require('./video.js');
 
 const blocks = [
-    createButtonsPlugin(),
-    createBlockquotePlugin(),
-    createCodeBlockPlugin(),
-    createHeadingPlugin(),
-    createHorizontalRulePlugin(),
-    createImagePlugin({
+    buttons.createButtonsPlugin(),
+    plate.createBlockquotePlugin(),
+    plate.createCodeBlockPlugin(),
+    plate.createHeadingPlugin(),
+    plate.createHorizontalRulePlugin(),
+    plate.createImagePlugin({
         options: {
             disableUploadInsert: true,
             disableEmbedInsert: true,
         },
     }),
-    createQAPlugin(),
-    createTextIndentPlugin(),
-    createIndentListPlugin({
+    qa.createQAPlugin(),
+    plate.createTextIndentPlugin(),
+    plate.createIndentListPlugin({
         inject: {
             props: {
                 validTypes: [
-                    ELEMENT_PARAGRAPH,
-                    ELEMENT_H1,
-                    ELEMENT_H2,
-                    ELEMENT_H3,
-                    ELEMENT_H4,
-                    ELEMENT_H5,
-                    ELEMENT_H6,
-                    ELEMENT_OL,
-                    ELEMENT_UL,
+                    plate.ELEMENT_PARAGRAPH,
+                    plate.ELEMENT_H1,
+                    plate.ELEMENT_H2,
+                    plate.ELEMENT_H3,
+                    plate.ELEMENT_H4,
+                    plate.ELEMENT_H5,
+                    plate.ELEMENT_H6,
+                    plate.ELEMENT_OL,
+                    plate.ELEMENT_UL,
                 ],
             },
         },
     }),
-    createListPlugin(),
-    createMediaEmbedPlugin(),
-    createParagraphPlugin(),
-    createHOnePlugin(),
-    createHTwoPlugin(),
-    createHThreePlugin(),
-    createHFourPlugin(),
-    createHFivePlugin(),
-    createHSixPlugin(),
-    createResetNodePlugin(),
-    createTablePlugin(),
-    createVideoTitlePlugin(),
+    plate.createListPlugin(),
+    plate.createMediaEmbedPlugin(),
+    text.createParagraphPlugin(),
+    text.createHOnePlugin(),
+    text.createHTwoPlugin(),
+    text.createHThreePlugin(),
+    text.createHFourPlugin(),
+    text.createHFivePlugin(),
+    text.createHSixPlugin(),
+    plate.createResetNodePlugin(),
+    plate.createTablePlugin(),
+    video.createVideoTitlePlugin(),
 ];
 
-export { blocks };
+exports.blocks = blocks;

package/dist/src/components/editor/plugins/blocks/buttons.js

@@ -1,40 +1,46 @@
-import React__default from 'react';
-import { styled } from 'styled-components';
-import { someNode, getPluginType, getBlockAbove, isEditorReadOnly, PlateElement, createPluginFactory, ELEMENT_PARAGRAPH, setNodes } from '@udecode/plate';
-import { Button as Button$1 } from '../../../actions/button/button.js';
-import { ELEMENT_BUTTON, COLORS } from '../../constants.js';
+'use strict';
 
-const Button = React__default.forwardRef(({ children, editor, element, ...props }, ref) => {
+var React = require('react');
+var styledComponents = require('styled-components');
+var plate = require('@udecode/plate');
+var button = require('../../../actions/button/button.js');
+var constants = require('../../constants.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Button = React__default.default.forwardRef(({ children, editor, element, ...props }, ref) => {
     const { buttonType, color } = element;
     const pressed = !!editor?.selection &&
-        someNode(editor, {
-            match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+        plate.someNode(editor, {
+            match: { type: plate.getPluginType(editor, constants.ELEMENT_BUTTON) },
         });
-    const currBlock = getBlockAbove(editor, {
+    const currBlock = plate.getBlockAbove(editor, {
         at: editor.selection?.focus,
         match: {
-            type: getPluginType(editor, ELEMENT_BUTTON),
+            type: plate.getPluginType(editor, constants.ELEMENT_BUTTON),
             buttonType: buttonType,
         },
     });
-    const editable = !isEditorReadOnly(editor);
+    const editable = !plate.isEditorReadOnly(editor);
     const handleColorChange = (color) => {
         if (currBlock) {
-            setNodes(editor, {
+            plate.setNodes(editor, {
                 color,
             }, {
                 at: currBlock ? currBlock[1] : undefined,
             });
         }
     };
-    const ColorMenu = () => !pressed || !editable ? null : (React__default.createElement(ColorMenuComponent, { contentEditable: false }, COLORS.map((color) => (React__default.createElement(ColorItem, { "$color": color, contentEditable: false, key: color, onClick: (event) => {
+    const ColorMenu = () => !pressed || !editable ? null : (React__default.default.createElement(ColorMenuComponent, { contentEditable: false }, constants.COLORS.map((color) => (React__default.default.createElement(ColorItem, { "$color": color, contentEditable: false, key: color, onClick: (event) => {
             event.stopPropagation();
             handleColorChange(color);
         } })))));
-    return (React__default.createElement(PlateElement, { asChild: true, editor: editor, element: element, ref: ref, ...props },
-        React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(ColorMenu, null),
-            React__default.createElement(Button$1, { size: "small", sx: `
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, editor: editor, element: element, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(ColorMenu, null),
+            React__default.default.createElement(button.Button, { size: "small", sx: `
             margin-left: auto !important; 
             margin-right: auto !important;
             background-color: ${color ? color : 'var(--color-blue-5)'} !important;
@@ -45,7 +51,7 @@ const Button = React__default.forwardRef(({ children, editor, element, ...props
             }
           ` }, children))));
 });
-const ColorMenuComponent = styled.div `
+const ColorMenuComponent = styledComponents.styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
@@ -59,26 +65,27 @@ const ColorMenuComponent = styled.div `
   box-shadow: var(--elevation-1);
   background-color: var(--color-white);
 `;
-const ColorItem = styled.div `
+const ColorItem = styledComponents.styled.div `
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background-color: ${({ $color }) => $color};
   cursor: pointer;
 `;
-const createButtonsPlugin = createPluginFactory({
-    key: ELEMENT_BUTTON,
-    type: ELEMENT_BUTTON,
+const createButtonsPlugin = plate.createPluginFactory({
+    key: constants.ELEMENT_BUTTON,
+    type: constants.ELEMENT_BUTTON,
     isElement: true,
     component: Button,
     then: () => ({
         inject: {
             props: {
                 classNames: undefined,
-                validTypes: [ELEMENT_PARAGRAPH],
+                validTypes: [plate.ELEMENT_PARAGRAPH],
             },
         },
     }),
 });
 
-export { Button, createButtonsPlugin };
+exports.Button = Button;
+exports.createButtonsPlugin = createButtonsPlugin;

package/dist/src/components/editor/plugins/blocks/dropdown-menu.js

@@ -1,51 +1,78 @@
 "use client";
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { withRef, cn, withCn, withProps, withVariants, createPrimitiveElement } from '@udecode/cn';
-import { cva } from 'class-variance-authority';
-import { ChevronRight } from '../../../../icons/arrow/chevron_right.js';
-import { Checkmark } from '../../../../icons/basic/checkmark.js';
+'use strict';
 
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-withRef(({ className, inset, children, ...props }, ref) => (React.createElement(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn('flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', inset && 'pl-8', className), ...props },
+var React = require('react');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var cn = require('@udecode/cn');
+var classVarianceAuthority = require('class-variance-authority');
+var chevron_right = require('../../../../icons/arrow/chevron_right.js');
+var checkmark = require('../../../../icons/basic/checkmark.js');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceCompat(DropdownMenuPrimitive);
+
+const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
+cn.withRef(({ className, inset, children, ...props }, ref) => (React__namespace.createElement(DropdownMenuPrimitive__namespace.SubTrigger, { ref: ref, className: cn.cn('flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', inset && 'pl-8', className), ...props },
     children,
-    React.createElement(ChevronRight, { className: "ml-auto h-4 w-4" }))));
-withCn(DropdownMenuPrimitive.SubContent, 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2');
-const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {
+    React__namespace.createElement(chevron_right.ChevronRight, { className: "ml-auto h-4 w-4" }))));
+cn.withCn(DropdownMenuPrimitive__namespace.SubContent, 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2');
+const DropdownMenuContentVariants = cn.withProps(DropdownMenuPrimitive__namespace.Content, {
     sideOffset: 4,
-    className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'),
+    className: cn.cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'),
 });
-const DropdownMenuContent = withRef(({ ...props }, ref) => (React.createElement(DropdownMenuPrimitive.Portal, null,
-    React.createElement(DropdownMenuContentVariants, { ref: ref, ...props }))));
-const menuItemVariants = cva(cn('relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors', 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'), {
+const DropdownMenuContent = cn.withRef(({ ...props }, ref) => (React__namespace.createElement(DropdownMenuPrimitive__namespace.Portal, null,
+    React__namespace.createElement(DropdownMenuContentVariants, { ref: ref, ...props }))));
+const menuItemVariants = classVarianceAuthority.cva(cn.cn('relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors', 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'), {
     variants: {
         inset: {
             true: 'pl-8',
         },
     },
 });
-withVariants(DropdownMenuPrimitive.Item, menuItemVariants, ['inset']);
-const DropdownMenuCheckboxItem = withRef(({ className, children, ...props }, ref) => (React.createElement(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn('relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'cursor-pointer', className), ...props },
-    React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" },
-        React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
-            React.createElement(Checkmark, { className: "h-4 w-4" }))),
+cn.withVariants(DropdownMenuPrimitive__namespace.Item, menuItemVariants, ['inset']);
+const DropdownMenuCheckboxItem = cn.withRef(({ className, children, ...props }, ref) => (React__namespace.createElement(DropdownMenuPrimitive__namespace.CheckboxItem, { ref: ref, className: cn.cn('relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'cursor-pointer', className), ...props },
+    React__namespace.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" },
+        React__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null,
+            React__namespace.createElement(checkmark.Checkmark, { className: "h-4 w-4" }))),
     children)));
-withRef(({ className, children, hideIcon, ...props }, ref) => (React.createElement(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn('relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground', className), ...props },
-    !hideIcon && (React.createElement("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center" },
-        React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
-            React.createElement(Checkmark, { className: "h-4 w-4" })))),
+cn.withRef(({ className, children, hideIcon, ...props }, ref) => (React__namespace.createElement(DropdownMenuPrimitive__namespace.RadioItem, { ref: ref, className: cn.cn('relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground', className), ...props },
+    !hideIcon && (React__namespace.createElement("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center" },
+        React__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null,
+            React__namespace.createElement(checkmark.Checkmark, { className: "h-4 w-4" })))),
     children)));
-const dropdownMenuLabelVariants = cva(cn('select-none px-2 py-1.5 text-sm font-semibold'), {
+const dropdownMenuLabelVariants = classVarianceAuthority.cva(cn.cn('select-none px-2 py-1.5 text-sm font-semibold'), {
     variants: {
         inset: {
             true: 'pl-8',
         },
     },
 });
-withVariants(DropdownMenuPrimitive.Label, dropdownMenuLabelVariants, ['inset']);
-withCn(DropdownMenuPrimitive.Separator, '-mx-1 my-1 h-px bg-muted');
-withCn(createPrimitiveElement('span'), 'ml-auto text-xs tracking-widest opacity-60');
+cn.withVariants(DropdownMenuPrimitive__namespace.Label, dropdownMenuLabelVariants, ['inset']);
+cn.withCn(DropdownMenuPrimitive__namespace.Separator, '-mx-1 my-1 h-px bg-muted');
+cn.withCn(cn.createPrimitiveElement('span'), 'ml-auto text-xs tracking-widest opacity-60');
 
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuPortal, DropdownMenuTrigger };
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;

package/dist/src/components/editor/plugins/blocks/image.js

@@ -1,18 +1,24 @@
-import React__default from 'react';
-import { withRef, cn } from '@udecode/cn';
-import { withHOC, PlateElement } from '@udecode/plate-common';
-import { useMediaState, ELEMENT_IMAGE, Image } from '@udecode/plate-media';
-import { ResizableProvider } from '@udecode/plate-resizable';
-import { Resizable, ResizeHandle, mediaResizeHandleVariants } from './resizable.js';
-import { EditorContext } from '../../context.js';
-import { MediaPopover } from './media-popover.js';
+'use strict';
 
-const ImageElement = withHOC(ResizableProvider, withRef(({ className, children, element, nodeProps, ...props }, ref) => {
-    const { imageSrcLoader } = React__default.useContext(EditorContext);
-    const { readOnly, focused, selected, align = 'center' } = useMediaState();
+var React = require('react');
+var cn = require('@udecode/cn');
+var plateCommon = require('@udecode/plate-common');
+var plateMedia = require('@udecode/plate-media');
+var plateResizable = require('@udecode/plate-resizable');
+var resizable = require('./resizable.js');
+var context = require('../../context.js');
+var mediaPopover = require('./media-popover.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ImageElement = plateCommon.withHOC(plateResizable.ResizableProvider, cn.withRef(({ className, children, element, nodeProps, ...props }, ref) => {
+    const { imageSrcLoader } = React__default.default.useContext(context.EditorContext);
+    const { readOnly, focused, selected, align = 'center' } = plateMedia.useMediaState();
     const { id, url, ...restElement } = element;
-    const [src, setSrc] = React__default.useState(null);
-    React__default.useEffect(() => {
+    const [src, setSrc] = React__default.default.useState(null);
+    React__default.default.useEffect(() => {
         (async () => {
             if (!id || !imageSrcLoader)
                 return;
@@ -22,33 +28,33 @@ const ImageElement = withHOC(ResizableProvider, withRef(({ className, children,
         })();
     }, [id, imageSrcLoader]);
     if (!src && !!url) {
-        return (React__default.createElement(MediaPopover, { pluginKey: ELEMENT_IMAGE },
-            React__default.createElement(PlateElement, { ref: ref, element: element, className: cn('py-2.5', className), ...props },
-                React__default.createElement("figure", { className: "group relative m-0", contentEditable: false },
-                    React__default.createElement(Resizable, { align: align, options: {
+        return (React__default.default.createElement(mediaPopover.MediaPopover, { pluginKey: plateMedia.ELEMENT_IMAGE },
+            React__default.default.createElement(plateCommon.PlateElement, { ref: ref, element: element, className: cn.cn('py-2.5', className), ...props },
+                React__default.default.createElement("figure", { className: "group relative m-0", contentEditable: false },
+                    React__default.default.createElement(resizable.Resizable, { align: align, options: {
                             align,
                             readOnly,
                         } },
-                        React__default.createElement(ResizeHandle, { options: { direction: 'left' }, className: mediaResizeHandleVariants({ direction: 'left' }) }),
-                        React__default.createElement(Image, { className: cn('block w-full max-w-full cursor-pointer object-cover px-0', 'rounded-sm', focused && selected && 'ring-2 ring-ring ring-offset-2'), alt: "", ...nodeProps }),
-                        React__default.createElement(ResizeHandle, { options: { direction: 'right' }, className: mediaResizeHandleVariants({
+                        React__default.default.createElement(resizable.ResizeHandle, { options: { direction: 'left' }, className: resizable.mediaResizeHandleVariants({ direction: 'left' }) }),
+                        React__default.default.createElement(plateMedia.Image, { className: cn.cn('block w-full max-w-full cursor-pointer object-cover px-0', 'rounded-sm', focused && selected && 'ring-2 ring-ring ring-offset-2'), alt: "", ...nodeProps }),
+                        React__default.default.createElement(resizable.ResizeHandle, { options: { direction: 'right' }, className: resizable.mediaResizeHandleVariants({
                                 direction: 'right',
                             }) }))),
                 children)));
     }
-    return (React__default.createElement(MediaPopover, { pluginKey: ELEMENT_IMAGE },
-        React__default.createElement(PlateElement, { ref: ref, className: cn('py-2.5', className), element: restElement, ...props },
-            !src ? null : (React__default.createElement("figure", { className: "group relative m-0", contentEditable: false },
-                React__default.createElement(Resizable, { align: align, options: {
+    return (React__default.default.createElement(mediaPopover.MediaPopover, { pluginKey: plateMedia.ELEMENT_IMAGE },
+        React__default.default.createElement(plateCommon.PlateElement, { ref: ref, className: cn.cn('py-2.5', className), element: restElement, ...props },
+            !src ? null : (React__default.default.createElement("figure", { className: "group relative m-0", contentEditable: false },
+                React__default.default.createElement(resizable.Resizable, { align: align, options: {
                         align,
                         readOnly,
                     } },
-                    React__default.createElement(ResizeHandle, { options: { direction: 'left' }, className: mediaResizeHandleVariants({ direction: 'left' }) }),
-                    React__default.createElement(Image, { className: cn('block w-full max-w-full cursor-pointer object-cover px-0', 'rounded-sm', focused && selected && 'ring-2 ring-ring ring-offset-2'), alt: "", ...nodeProps, src: src }),
-                    React__default.createElement(ResizeHandle, { options: { direction: 'right' }, className: mediaResizeHandleVariants({
+                    React__default.default.createElement(resizable.ResizeHandle, { options: { direction: 'left' }, className: resizable.mediaResizeHandleVariants({ direction: 'left' }) }),
+                    React__default.default.createElement(plateMedia.Image, { className: cn.cn('block w-full max-w-full cursor-pointer object-cover px-0', 'rounded-sm', focused && selected && 'ring-2 ring-ring ring-offset-2'), alt: "", ...nodeProps, src: src }),
+                    React__default.default.createElement(resizable.ResizeHandle, { options: { direction: 'right' }, className: resizable.mediaResizeHandleVariants({
                             direction: 'right',
                         }) })))),
             children)));
 }));
 
-export { ImageElement };
+exports.ImageElement = ImageElement;

package/dist/src/components/editor/plugins/blocks/list.js

@@ -1,14 +1,20 @@
-import React__default from 'react';
-import { PlateElement } from '@udecode/plate';
-import { styled } from 'styled-components';
+'use strict';
+
+var React = require('react');
+var plate = require('@udecode/plate');
+var styledComponents = require('styled-components');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const ListElement = ({ children, variant = 'ul', ...props }) => {
     const Element = variant;
-    return (React__default.createElement(PlateElement, { asChild: true, ...props },
-        React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Element, null, React__default.Children.map(children, (child) => (React__default.createElement(Li, null, child)))))));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(Element, null, React__default.default.Children.map(children, (child) => (React__default.default.createElement(Li, null, child)))))));
 };
-const Li = styled.li `
+const Li = styledComponents.styled.li `
   margin: 16px 0px;
   padding-left: 8px;
 
@@ -17,4 +23,4 @@ const Li = styled.li `
   }
 `;
 
-export { ListElement };
+exports.ListElement = ListElement;

package/dist/src/components/editor/plugins/blocks/media-popover.js

@@ -1,35 +1,41 @@
-import React__default, { useEffect } from 'react';
-import { useEditorSelector, isSelectionExpanded, useElement, useRemoveNodeButton } from '@udecode/plate-common';
-import { useFloatingMediaSelectors, floatingMediaActions } from '@udecode/plate-media';
-import { useReadOnly, useSelected } from 'slate-react';
-import { Button } from './plate-button.js';
-import { Popover, PopoverAnchor, PopoverContent } from './popover.js';
-import { Link, Trash } from 'lucide-react';
+'use strict';
+
+var React = require('react');
+var plateCommon = require('@udecode/plate-common');
+var plateMedia = require('@udecode/plate-media');
+var slateReact = require('slate-react');
+var plateButton = require('./plate-button.js');
+var popover = require('./popover.js');
+var lucideReact = require('lucide-react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 function MediaPopover({ children }) {
-    const readOnly = useReadOnly();
-    const selected = useSelected();
-    const selectionCollapsed = useEditorSelector((editor) => !isSelectionExpanded(editor), []);
+    const readOnly = slateReact.useReadOnly();
+    const selected = slateReact.useSelected();
+    const selectionCollapsed = plateCommon.useEditorSelector((editor) => !plateCommon.isSelectionExpanded(editor), []);
     const isOpen = !readOnly && selected && selectionCollapsed;
-    const isEditing = useFloatingMediaSelectors().isEditing();
-    useEffect(() => {
+    const isEditing = plateMedia.useFloatingMediaSelectors().isEditing();
+    React.useEffect(() => {
         if (!isOpen && isEditing) {
-            floatingMediaActions.isEditing(false);
+            plateMedia.floatingMediaActions.isEditing(false);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
-    const element = useElement();
-    const { props: buttonProps } = useRemoveNodeButton({ element });
+    const element = plateCommon.useElement();
+    const { props: buttonProps } = plateCommon.useRemoveNodeButton({ element });
     if (readOnly)
-        return React__default.createElement(React__default.Fragment, null, children);
-    return (React__default.createElement(Popover, { open: isOpen, modal: false },
-        React__default.createElement(PopoverAnchor, null, children),
-        React__default.createElement(PopoverContent, { className: "w-auto p-1", onOpenAutoFocus: (e) => e.preventDefault() }, isEditing ? (React__default.createElement("div", { className: "flex w-[330px] flex-col" },
-            React__default.createElement("div", { className: "flex items-center" },
-                React__default.createElement("div", { className: "flex items-center pl-3 text-muted-foreground" },
-                    React__default.createElement(Link, { className: "h-4 w-4" }))))) : (React__default.createElement("div", { className: "box-content flex h-9 items-center gap-1" },
-            React__default.createElement(Button, { variant: "ghost", size: "sms", ...buttonProps },
-                React__default.createElement(Trash, { className: "h-4 w-4" })))))));
+        return React__default.default.createElement(React__default.default.Fragment, null, children);
+    return (React__default.default.createElement(popover.Popover, { open: isOpen, modal: false },
+        React__default.default.createElement(popover.PopoverAnchor, null, children),
+        React__default.default.createElement(popover.PopoverContent, { className: "w-auto p-1", onOpenAutoFocus: (e) => e.preventDefault() }, isEditing ? (React__default.default.createElement("div", { className: "flex w-[330px] flex-col" },
+            React__default.default.createElement("div", { className: "flex items-center" },
+                React__default.default.createElement("div", { className: "flex items-center pl-3 text-muted-foreground" },
+                    React__default.default.createElement(lucideReact.Link, { className: "h-4 w-4" }))))) : (React__default.default.createElement("div", { className: "box-content flex h-9 items-center gap-1" },
+            React__default.default.createElement(plateButton.Button, { variant: "ghost", size: "sms", ...buttonProps },
+                React__default.default.createElement(lucideReact.Trash, { className: "h-4 w-4" })))))));
 }
 
-export { MediaPopover };
+exports.MediaPopover = MediaPopover;

package/dist/src/components/editor/plugins/blocks/plate-button.js

@@ -1,9 +1,31 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { withRef, cn } from '@udecode/cn';
-import { cva } from 'class-variance-authority';
+'use strict';
 
-const buttonVariants = cva('inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
+var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var cn = require('@udecode/cn');
+var classVarianceAuthority = require('class-variance-authority');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+
+const buttonVariants = classVarianceAuthority.cva('inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -32,9 +54,10 @@ const buttonVariants = cva('inline-flex items-center justify-center whitespace-n
         size: 'default',
     },
 });
-const Button = withRef(({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (React.createElement(Comp, { className: cn(buttonVariants({ isMenu, variant, size, className })), ref: ref, ...props }));
+const Button = cn.withRef(({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : 'button';
+    return (React__namespace.createElement(Comp, { className: cn.cn(buttonVariants({ isMenu, variant, size, className })), ref: ref, ...props }));
 });
 
-export { Button, buttonVariants };
+exports.Button = Button;
+exports.buttonVariants = buttonVariants;

package/dist/src/components/editor/plugins/blocks/popover.js

@@ -1,13 +1,39 @@
 "use client";
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { withRef, cn } from '@udecode/cn';
-import { cva } from 'class-variance-authority';
-
-const Popover = PopoverPrimitive.Root;
-const PopoverAnchor = PopoverPrimitive.Anchor;
-const popoverVariants = cva('w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden');
-const PopoverContent = withRef(({ className, style, align = 'center', sideOffset = 4, ...props }, ref) => (React.createElement(PopoverPrimitive.Portal, null,
-    React.createElement(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn(popoverVariants(), className), style: { zIndex: 1000, ...style }, ...props }))));
-
-export { Popover, PopoverAnchor, PopoverContent, popoverVariants };
+'use strict';
+
+var React = require('react');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var cn = require('@udecode/cn');
+var classVarianceAuthority = require('class-variance-authority');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceCompat(PopoverPrimitive);
+
+const Popover = PopoverPrimitive__namespace.Root;
+const PopoverAnchor = PopoverPrimitive__namespace.Anchor;
+const popoverVariants = classVarianceAuthority.cva('w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden');
+const PopoverContent = cn.withRef(({ className, style, align = 'center', sideOffset = 4, ...props }, ref) => (React__namespace.createElement(PopoverPrimitive__namespace.Portal, null,
+    React__namespace.createElement(PopoverPrimitive__namespace.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn.cn(popoverVariants(), className), style: { zIndex: 1000, ...style }, ...props }))));
+
+exports.Popover = Popover;
+exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverContent = PopoverContent;
+exports.popoverVariants = popoverVariants;