@soul-refiner/design-system 2.0.0-alpha.27 → 2.0.0-alpha.28

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

@@ -18,28 +18,32 @@ var borderNone = require('../../icons/border-none.js');
 var borderRight = require('../../icons/border-right.js');
 var borderTop = require('../../icons/border-top.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const TableBordersDropdownMenuContent = cn.withRef((props, ref) => {
     const { getOnSelectTableBorder, hasOuterBorders, hasBottomBorder, hasLeftBorder, hasNoBorders, hasRightBorder, hasTopBorder, } = plateTable.useTableBordersDropdownMenuContentState();
-    return (React.createElement(dropdownMenu.DropdownMenuContent, { ref: ref, className: cn.cn('min-w-[220px]'), side: "right", align: "start", sideOffset: 0, ...props },
-        React.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasBottomBorder, onCheckedChange: getOnSelectTableBorder('bottom') },
-            React.createElement(borderBottom.BorderBottom, { className: "mr-2 h-4 w-4" }),
-            React.createElement("div", null, "Bottom Border")),
-        React.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasTopBorder, onCheckedChange: getOnSelectTableBorder('top') },
-            React.createElement(borderTop.BorderTop, { className: "mr-2 h-4 w-4" }),
-            React.createElement("div", null, "Top Border")),
-        React.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasLeftBorder, onCheckedChange: getOnSelectTableBorder('left') },
-            React.createElement(borderLeft.BorderLeft, { className: "mr-2 h-4 w-4" }),
-            React.createElement("div", null, "Left Border")),
-        React.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasRightBorder, onCheckedChange: getOnSelectTableBorder('right') },
-            React.createElement(borderRight.BorderRight, { className: "mr-2 h-4 w-4" }),
-            React.createElement("div", null, "Right Border")),
-        React.createElement(separator.Separator, null),
-        React.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasNoBorders, onCheckedChange: getOnSelectTableBorder('none') },
-            React.createElement(borderNone.BorderNone, { className: "mr-2 h-4 w-4" }),
-            React.createElement("div", null, "No Border")),
-        React.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasOuterBorders, onCheckedChange: getOnSelectTableBorder('outer') },
-            React.createElement(borderAll.BorderAll, { className: "mr-2 h-4 w-4" }),
-            React.createElement("div", null, "Outside Borders"))));
+    return (React__default.default.createElement(dropdownMenu.DropdownMenuContent, { ref: ref, className: cn.cn('min-w-[220px]'), side: "right", align: "start", sideOffset: 0, ...props },
+        React__default.default.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasBottomBorder, onCheckedChange: getOnSelectTableBorder('bottom') },
+            React__default.default.createElement(borderBottom.BorderBottom, { className: "mr-2 h-4 w-4" }),
+            React__default.default.createElement("div", null, "Bottom Border")),
+        React__default.default.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasTopBorder, onCheckedChange: getOnSelectTableBorder('top') },
+            React__default.default.createElement(borderTop.BorderTop, { className: "mr-2 h-4 w-4" }),
+            React__default.default.createElement("div", null, "Top Border")),
+        React__default.default.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasLeftBorder, onCheckedChange: getOnSelectTableBorder('left') },
+            React__default.default.createElement(borderLeft.BorderLeft, { className: "mr-2 h-4 w-4" }),
+            React__default.default.createElement("div", null, "Left Border")),
+        React__default.default.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasRightBorder, onCheckedChange: getOnSelectTableBorder('right') },
+            React__default.default.createElement(borderRight.BorderRight, { className: "mr-2 h-4 w-4" }),
+            React__default.default.createElement("div", null, "Right Border")),
+        React__default.default.createElement(separator.Separator, null),
+        React__default.default.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasNoBorders, onCheckedChange: getOnSelectTableBorder('none') },
+            React__default.default.createElement(borderNone.BorderNone, { className: "mr-2 h-4 w-4" }),
+            React__default.default.createElement("div", null, "No Border")),
+        React__default.default.createElement(dropdownMenu.DropdownMenuCheckboxItem, { checked: hasOuterBorders, onCheckedChange: getOnSelectTableBorder('outer') },
+            React__default.default.createElement(borderAll.BorderAll, { className: "mr-2 h-4 w-4" }),
+            React__default.default.createElement("div", null, "Outside Borders"))));
 });
 const TableFloatingToolbar = cn.withRef(({ children, ...props }, ref) => {
     const element = plateCommon.useElement();
@@ -51,26 +55,26 @@ const TableFloatingToolbar = cn.withRef(({ children, ...props }, ref) => {
     const collapsed = !readOnly && selected && selectionCollapsed;
     const open = !readOnly && selected;
     const { canMerge, canUnmerge } = plateTable.useTableMergeState();
-    const mergeContent = canMerge && (React.createElement(plateButton.Button, { contentEditable: false, variant: "ghost", isMenu: true, onClick: () => plateTable.mergeTableCells(editor) },
-        React.createElement(lucideReact.Combine, { className: "mr-2 h-4 w-4" }),
+    const mergeContent = canMerge && (React__default.default.createElement(plateButton.Button, { contentEditable: false, variant: "ghost", isMenu: true, onClick: () => plateTable.mergeTableCells(editor) },
+        React__default.default.createElement(lucideReact.Combine, { className: "mr-2 h-4 w-4" }),
         "Merge"));
-    const unmergeButton = canUnmerge && (React.createElement(plateButton.Button, { contentEditable: false, variant: "ghost", isMenu: true, onClick: () => plateTable.unmergeTableCells(editor) },
-        React.createElement(lucideReact.Ungroup, { className: "mr-2 h-4 w-4" }),
+    const unmergeButton = canUnmerge && (React__default.default.createElement(plateButton.Button, { contentEditable: false, variant: "ghost", isMenu: true, onClick: () => plateTable.unmergeTableCells(editor) },
+        React__default.default.createElement(lucideReact.Ungroup, { className: "mr-2 h-4 w-4" }),
         "Unmerge"));
-    const bordersContent = collapsed && (React.createElement(React.Fragment, null,
-        React.createElement(dropdownMenu.DropdownMenu, { modal: false },
-            React.createElement(dropdownMenu.DropdownMenuTrigger, { asChild: true },
-                React.createElement(plateButton.Button, { variant: "ghost", isMenu: true },
-                    React.createElement(borderAll.BorderAll, { className: "mr-2 h-4 w-4" }),
+    const bordersContent = collapsed && (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(dropdownMenu.DropdownMenu, { modal: false },
+            React__default.default.createElement(dropdownMenu.DropdownMenuTrigger, { asChild: true },
+                React__default.default.createElement(plateButton.Button, { variant: "ghost", isMenu: true },
+                    React__default.default.createElement(borderAll.BorderAll, { className: "mr-2 h-4 w-4" }),
                     "Borders")),
-            React.createElement(dropdownMenu.DropdownMenuPortal, null,
-                React.createElement(TableBordersDropdownMenuContent, null))),
-        React.createElement(plateButton.Button, { contentEditable: false, variant: "ghost", isMenu: true, ...buttonProps },
-            React.createElement(lucideReact.Trash, { className: "mr-2 h-4 w-4" }),
+            React__default.default.createElement(dropdownMenu.DropdownMenuPortal, null,
+                React__default.default.createElement(TableBordersDropdownMenuContent, null))),
+        React__default.default.createElement(plateButton.Button, { contentEditable: false, variant: "ghost", isMenu: true, ...buttonProps },
+            React__default.default.createElement(lucideReact.Trash, { className: "mr-2 h-4 w-4" }),
             "Delete")));
-    return (React.createElement(popover.Popover, { open: open, modal: false },
-        React.createElement(PopoverPrimitive.PopoverAnchor, { asChild: true }, children),
-        (canMerge || canUnmerge || collapsed) && (React.createElement(popover.PopoverContent, { ref: ref, className: cn.cn(popover.popoverVariants(), 'flex w-[220px] flex-col gap-1 p-1'), onOpenAutoFocus: (e) => e.preventDefault(), ...props },
+    return (React__default.default.createElement(popover.Popover, { open: open, modal: false },
+        React__default.default.createElement(PopoverPrimitive.PopoverAnchor, { asChild: true }, children),
+        (canMerge || canUnmerge || collapsed) && (React__default.default.createElement(popover.PopoverContent, { ref: ref, className: cn.cn(popover.popoverVariants(), 'flex w-[220px] flex-col gap-1 p-1'), onOpenAutoFocus: (e) => e.preventDefault(), ...props },
             unmergeButton,
             mergeContent,
             bordersContent))));
@@ -78,15 +82,15 @@ const TableFloatingToolbar = cn.withRef(({ children, ...props }, ref) => {
 const TableElement = plateCommon.withHOC(plateTable.TableProvider, cn.withRef(({ className, children, ...props }, ref) => {
     const { colSizes, isSelectingCell, minColumnWidth, marginLeft } = plateTable.useTableElementState();
     const { props: tableProps, colGroupProps } = plateTable.useTableElement();
-    return (React.createElement(TableFloatingToolbar, null,
-        React.createElement("div", { style: { paddingLeft: marginLeft } },
-            React.createElement(plateCommon.PlateElement, { ref: ref, asChild: true, className: cn.cn('my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse', isSelectingCell && '[&_*::selection]:bg-none', className), ...tableProps, ...props },
-                React.createElement("table", null,
-                    React.createElement("colgroup", { ...colGroupProps }, colSizes.map((width, index) => (React.createElement("col", { key: index, style: {
+    return (React__default.default.createElement(TableFloatingToolbar, null,
+        React__default.default.createElement("div", { style: { paddingLeft: marginLeft } },
+            React__default.default.createElement(plateCommon.PlateElement, { ref: ref, asChild: true, className: cn.cn('my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse', isSelectingCell && '[&_*::selection]:bg-none', className), ...tableProps, ...props },
+                React__default.default.createElement("table", null,
+                    React__default.default.createElement("colgroup", { ...colGroupProps }, colSizes.map((width, index) => (React__default.default.createElement("col", { key: index, style: {
                             minWidth: minColumnWidth,
                             width: width || undefined,
                         } })))),
-                    React.createElement("tbody", { className: "min-w-full" }, children))))));
+                    React__default.default.createElement("tbody", { className: "min-w-full" }, children))))));
 }));
 
 exports.TableBordersDropdownMenuContent = TableBordersDropdownMenuContent;

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

@@ -5,77 +5,81 @@ var plate = require('@udecode/plate');
 var paragraph = require('../../../atoms/typography/paragraph.js');
 var heading = require('../../../atoms/typography/heading.js');
 
-const ParagraphElement = React.forwardRef(({ children, ...props }, ref) => {
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ParagraphElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
     const textAlign = props?.style?.textAlign;
-    return (React.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
-        React.createElement(React.Fragment, null,
-            React.createElement(paragraph.P, { as: "div", "$textAlign": textAlign }, children))));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(paragraph.P, { as: "div", "$textAlign": textAlign }, children))));
 });
 const createParagraphPlugin = plate.createPluginFactory({
     key: plate.ELEMENT_PARAGRAPH,
     type: plate.ELEMENT_PARAGRAPH,
     isElement: true,
 });
-const HOneElement = React.forwardRef(({ children, ...props }, ref) => {
+const HOneElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
     const textAlign = props?.style?.textAlign;
-    return (React.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
-        React.createElement(React.Fragment, null,
-            React.createElement(heading.H.One, { "$textAlign": textAlign }, children))));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.One, { "$textAlign": textAlign }, children))));
 });
 const createHOnePlugin = plate.createPluginFactory({
     key: plate.ELEMENT_H1,
     type: plate.ELEMENT_H1,
     isElement: true,
 });
-const HTwoElement = React.forwardRef(({ children, ...props }, ref) => {
+const HTwoElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
     const textAlign = props?.style?.textAlign;
-    return (React.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
-        React.createElement(React.Fragment, null,
-            React.createElement(heading.H.Two, { "$textAlign": textAlign }, children))));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Two, { "$textAlign": textAlign }, children))));
 });
 const createHTwoPlugin = plate.createPluginFactory({
     key: plate.ELEMENT_H2,
     type: plate.ELEMENT_H2,
     isElement: true,
 });
-const HThreeElement = React.forwardRef(({ children, ...props }, ref) => {
+const HThreeElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
     const textAlign = props?.style?.textAlign;
-    return (React.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
-        React.createElement(React.Fragment, null,
-            React.createElement(heading.H.Three, { "$textAlign": textAlign }, children))));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Three, { "$textAlign": textAlign }, children))));
 });
 const createHThreePlugin = plate.createPluginFactory({
     key: plate.ELEMENT_H3,
     type: plate.ELEMENT_H3,
     isElement: true,
 });
-const HFourElement = React.forwardRef(({ children, ...props }, ref) => {
+const HFourElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
     const textAlign = props?.style?.textAlign;
-    return (React.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
-        React.createElement(React.Fragment, null,
-            React.createElement(heading.H.Four, { "$textAlign": textAlign }, children))));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Four, { "$textAlign": textAlign }, children))));
 });
 const createHFourPlugin = plate.createPluginFactory({
     key: plate.ELEMENT_H4,
     type: plate.ELEMENT_H4,
     isElement: true,
 });
-const HFiveElement = React.forwardRef(({ children, ...props }, ref) => {
+const HFiveElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
     const textAlign = props?.style?.textAlign;
-    return (React.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
-        React.createElement(React.Fragment, null,
-            React.createElement(heading.H.Five, { "$textAlign": textAlign }, children))));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Five, { "$textAlign": textAlign }, children))));
 });
 const createHFivePlugin = plate.createPluginFactory({
     key: plate.ELEMENT_H5,
     type: plate.ELEMENT_H5,
     isElement: true,
 });
-const HSixElement = React.forwardRef(({ children, ...props }, ref) => {
+const HSixElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
     const textAlign = props?.style?.textAlign;
-    return (React.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
-        React.createElement(React.Fragment, null,
-            React.createElement(heading.H.Six, { "$textAlign": textAlign }, children))));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Six, { "$textAlign": textAlign }, children))));
 });
 const createHSixPlugin = plate.createPluginFactory({
     key: plate.ELEMENT_H6,

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

@@ -5,18 +5,22 @@ var plate = require('@udecode/plate');
 var constants = require('../../constants.js');
 var context = require('../../context.js');
 
-const VideoTitleElement = React.forwardRef(function VideoTitle({ editor, element, ...props }, ref) {
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const VideoTitleElement = React__default.default.forwardRef(function VideoTitle({ editor, element, ...props }, ref) {
     const editable = !plate.isEditorReadOnly(editor);
     const { id } = element;
-    const { handleVideoClick, videoTitleLoader: VideoTitle } = React.useContext(context.EditorContext);
+    const { handleVideoClick, videoTitleLoader: VideoTitle } = React__default.default.useContext(context.EditorContext);
     const handleClick = () => {
         if (handleVideoClick && !editable) {
             handleVideoClick(id);
         }
     };
-    return (React.createElement(plate.PlateElement, { asChild: true, editor: editor, element: element, ref: ref, ...props },
-        React.createElement("div", { contentEditable: false, onClick: handleClick, style: { cursor: editable ? 'initial' : 'pointer' } },
-            React.createElement(VideoTitle, { courseMediaId: id }))));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, editor: editor, element: element, ref: ref, ...props },
+        React__default.default.createElement("div", { contentEditable: false, onClick: handleClick, style: { cursor: editable ? 'initial' : 'pointer' } },
+            React__default.default.createElement(VideoTitle, { courseMediaId: id }))));
 });
 const createVideoTitlePlugin = plate.createPluginFactory({
     key: constants.ELEMENT_VIDEO,

package/dist/components/editor/plugins/leafs/link.js

@@ -8,10 +8,14 @@ var aa_sansserif = require('../../../../icons/basic/aa_sansserif.js');
 var link = require('../../../../icons/basic/link.js');
 var upload = require('../../../../icons/basic/upload.js');
 
-const LinkElement = React.forwardRef(({ children, ...props }, ref) => {
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const LinkElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
     const { props: linkProps } = plate.useLink({ element: props.element });
-    return (React.createElement(plate.PlateElement, { asChild: true, ref: ref, ...linkProps, ...props },
-        React.createElement("a", null, children)));
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...linkProps, ...props },
+        React__default.default.createElement("a", null, children)));
 });
 const LinkFloatingMenu = ({ readOnly }) => {
     const isEditing = plate.useFloatingLinkSelectors().isEditing();
@@ -21,26 +25,26 @@ const LinkFloatingMenu = ({ readOnly }) => {
     const { props: editProps, ref: editRef, editButtonProps, } = plate.useFloatingLinkEdit(editState);
     if (readOnly)
         return null;
-    const input = (React.createElement(box.Box, { "$dir": "column", sx: `
+    const input = (React__default.default.createElement(box.Box, { "$dir": "column", sx: `
         background-color: var(--color-white);
         gap: 16px;
         padding: 16px;
         border-radius: 16px;
         box-shadow: var(--elevation-2);
       ` },
-        React.createElement(box.Box, { "$align": "center", "$justify": "center", "$gap": 8 },
-            React.createElement(box.Box, { "$align": "center", "$justify": "center" },
-                React.createElement(link.Link, null)),
-            React.createElement(plate.FloatingLinkUrlInput, { style: {
+        React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center", "$gap": 8 },
+            React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center" },
+                React__default.default.createElement(link.Link, null)),
+            React__default.default.createElement(plate.FloatingLinkUrlInput, { style: {
                     border: 'none',
                     outline: 'none',
                     padding: '8px 12px',
                 }, placeholder: "Paste link" })),
-        React.createElement(box.Box, { "$align": "center", "$justify": "center", "$gap": 8 },
-            React.createElement(box.Box, { "$align": "center", "$justify": "center" },
-                React.createElement(aa_sansserif.AASansSerif, null)),
-            React.createElement(Input, { placeholder: "Text to display", ...textInputProps }))));
-    const editContent = isEditing ? (input) : (React.createElement(box.Box, { "$align": "center", "$justify": "center", sx: `
+        React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center", "$gap": 8 },
+            React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center" },
+                React__default.default.createElement(aa_sansserif.AASansSerif, null)),
+            React__default.default.createElement(Input, { placeholder: "Text to display", ...textInputProps }))));
+    const editContent = isEditing ? (input) : (React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center", sx: `
         box-sizing: box-content;
         background-color: var(--color-white);
         gap: 8px;
@@ -65,12 +69,12 @@ const LinkFloatingMenu = ({ readOnly }) => {
           }
         }
       `, "$gap": 8 },
-        React.createElement("button", { type: "button", ...editButtonProps }, "Edit link"),
-        React.createElement(plate.LinkOpenButton, null,
-            React.createElement(upload.Upload, null))));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: insertRef, ...insertProps }, input),
-        React.createElement("div", { ref: editRef, ...editProps }, editContent)));
+        React__default.default.createElement("button", { type: "button", ...editButtonProps }, "Edit link"),
+        React__default.default.createElement(plate.LinkOpenButton, null,
+            React__default.default.createElement(upload.Upload, null))));
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement("div", { ref: insertRef, ...insertProps }, input),
+        React__default.default.createElement("div", { ref: editRef, ...editProps }, editContent)));
 };
 const Input = styled.styled.input `
   border: none;

package/dist/components/editor/simple_editor/navbar.js

@@ -17,9 +17,13 @@ var underline = require('../../../icons/basic/underline.js');
 var undo = require('../../../icons/arrow/undo.js');
 var menu_button = require('../styles/menu_button.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const EditorBar = ({ handleUploadImage }) => {
     const editorRef = plate.useEditorRef('main');
-    const imageRef = React.useRef(null);
+    const imageRef = React__default.default.useRef(null);
     const boldState = plate.useMarkToolbarButtonState({ nodeType: plate.MARK_BOLD });
     const { props: { pressed: currBold, onClick: handleBold }, } = plate.useMarkToolbarButton(boldState);
     const italicState = plate.useMarkToolbarButtonState({ nodeType: plate.MARK_ITALIC });
@@ -51,50 +55,50 @@ const EditorBar = ({ handleUploadImage }) => {
     };
     const handleRedo = () => editorRef.redo();
     const handleUndo = () => editorRef.undo();
-    return (React.createElement(Menu, { "aria-label": "editor-navigation" },
-        React.createElement(MenuSection, null,
-            React.createElement(tooltip.Tooltip, { content: "Undo", place: "top" },
-                React.createElement(menu_button.MenuButton, { "$active": false, onClick: handleUndo },
-                    React.createElement(undo.Undo, { size: 24, color: "grey-5" }))),
-            React.createElement(tooltip.Tooltip, { content: "Redo", place: "top" },
-                React.createElement(menu_button.MenuButton, { "$active": false, onClick: handleRedo },
-                    React.createElement(redo.Redo, { size: 24, color: "grey-5" })))),
-        React.createElement(Divider, null),
-        React.createElement(MenuSection, null,
-            React.createElement(style_dropdown.StyleDropdown, { editorRef: editorRef })),
-        React.createElement(Divider, null),
-        React.createElement(MenuSection, null,
-            React.createElement(menu_button.MenuButton, { "$active": false, as: "div" },
-                React.createElement(alignment_dropdown.AlignmentDropdown, { editorRef: editorRef }))),
-        React.createElement(Divider, null),
-        React.createElement(MenuSection, null,
-            React.createElement(tooltip.Tooltip, { content: "Bold", place: "top" },
-                React.createElement(menu_button.MenuButton, { "$active": currBold, onClick: handleBold },
-                    React.createElement(bold.Bold, { size: 24, color: "grey-5" }))),
-            React.createElement(tooltip.Tooltip, { content: "Italic", place: "top" },
-                React.createElement(menu_button.MenuButton, { "$active": currItalic, onClick: handleItalic },
-                    React.createElement(italic.Italic, { size: 24, color: "grey-5" }))),
-            React.createElement(tooltip.Tooltip, { content: "Underline", place: "top" },
-                React.createElement(menu_button.MenuButton, { "$active": currUnderline, onClick: handleUnderline },
-                    React.createElement(underline.Underline, { size: 24, color: "grey-5" })))),
-        React.createElement(Divider, null),
-        React.createElement(MenuSection, null,
-            React.createElement(tooltip.Tooltip, { content: "Link", place: "top" },
-                React.createElement(menu_button.MenuButton, { "$active": currLink, onClick: handleLink },
-                    React.createElement(link.Link, { size: 24, color: "grey-5" }))),
-            React.createElement(tooltip.Tooltip, { content: "Image", place: "top" },
-                React.createElement(menu_button.MenuButton, { "$active": false, as: "label", onChange: handleImageChange },
-                    React.createElement("div", null,
-                        React.createElement("input", { accept: "image/*", ref: imageRef, style: { display: 'none' }, type: "file" }),
-                        React.createElement(image.Image, { size: 24, color: "grey-5" }))))),
-        React.createElement(Divider, null),
-        React.createElement(MenuSection, null,
-            React.createElement(tooltip.Tooltip, { content: "Unordered List", place: "top" },
-                React.createElement(menu_button.MenuButton, { "$active": currUnorderedList, onClick: handleUnorderedList },
-                    React.createElement(list_unordered.ListUnordered, { size: 24, color: "grey-5" }))),
-            React.createElement(tooltip.Tooltip, { content: "Ordered List", place: "top" },
-                React.createElement(menu_button.MenuButton, { "$active": currOrderedList, onClick: handleOrderedList },
-                    React.createElement(list_ordered.ListOrdered, { size: 24, color: "grey-5" }))))));
+    return (React__default.default.createElement(Menu, { "aria-label": "editor-navigation" },
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(tooltip.Tooltip, { content: "Undo", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": false, onClick: handleUndo },
+                    React__default.default.createElement(undo.Undo, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Redo", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": false, onClick: handleRedo },
+                    React__default.default.createElement(redo.Redo, { size: 24, color: "grey-5" })))),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(style_dropdown.StyleDropdown, { editorRef: editorRef })),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(menu_button.MenuButton, { "$active": false, as: "div" },
+                React__default.default.createElement(alignment_dropdown.AlignmentDropdown, { editorRef: editorRef }))),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(tooltip.Tooltip, { content: "Bold", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currBold, onClick: handleBold },
+                    React__default.default.createElement(bold.Bold, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Italic", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currItalic, onClick: handleItalic },
+                    React__default.default.createElement(italic.Italic, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Underline", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currUnderline, onClick: handleUnderline },
+                    React__default.default.createElement(underline.Underline, { size: 24, color: "grey-5" })))),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(tooltip.Tooltip, { content: "Link", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currLink, onClick: handleLink },
+                    React__default.default.createElement(link.Link, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Image", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": false, as: "label", onChange: handleImageChange },
+                    React__default.default.createElement("div", null,
+                        React__default.default.createElement("input", { accept: "image/*", ref: imageRef, style: { display: 'none' }, type: "file" }),
+                        React__default.default.createElement(image.Image, { size: 24, color: "grey-5" }))))),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(tooltip.Tooltip, { content: "Unordered List", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currUnorderedList, onClick: handleUnorderedList },
+                    React__default.default.createElement(list_unordered.ListUnordered, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Ordered List", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currOrderedList, onClick: handleOrderedList },
+                    React__default.default.createElement(list_ordered.ListOrdered, { size: 24, color: "grey-5" }))))));
 };
 const Menu = styled.styled.nav `
   display: flex;

package/dist/components/editor/simple_editor/simple_editor.js

@@ -7,6 +7,10 @@ var plate = require('@udecode/plate');
 var plugins = require('./plugins.js');
 var navbar = require('./navbar.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholder = '', previousContent = [
     {
         type: 'p',
@@ -17,11 +21,11 @@ const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholder = '',
         ],
     },
 ], }) => {
-    return (React.createElement(plate.Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins.plugins },
-        React.createElement(Wrapper, null,
-            editable && React.createElement(navbar.EditorBar, { handleUploadImage: handleUploadImage }),
-            React.createElement(InnerWrapper, null,
-                React.createElement(plate.PlateContent, { id: "main", autoFocus: true, placeholder: placeholder, readOnly: !editable, spellCheck: true })))));
+    return (React__default.default.createElement(plate.Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins.plugins },
+        React__default.default.createElement(Wrapper, null,
+            editable && React__default.default.createElement(navbar.EditorBar, { handleUploadImage: handleUploadImage }),
+            React__default.default.createElement(InnerWrapper, null,
+                React__default.default.createElement(plate.PlateContent, { id: "main", autoFocus: true, placeholder: placeholder, readOnly: !editable, spellCheck: true })))));
 };
 const InnerWrapper = styled.styled.div `
   & > div {

package/dist/components/feedback/animated_toast/animated_toast.js

@@ -5,10 +5,14 @@ var React = require('react');
 var styled = require('styled-components');
 var toast = require('../toast/toast.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const AnimatedToast = ({ message, type, onClose, animationDuration = 4, }) => {
-    const [toastIsClosed, setToastIsClosed] = React.useState(false);
-    const timer = React.useRef(null);
-    React.useEffect(() => {
+    const [toastIsClosed, setToastIsClosed] = React__default.default.useState(false);
+    const timer = React__default.default.useRef(null);
+    React__default.default.useEffect(() => {
         timer.current = setTimeout(() => {
             setToastIsClosed(true);
             !!onClose && onClose();
@@ -17,9 +21,9 @@ const AnimatedToast = ({ message, type, onClose, animationDuration = 4, }) => {
             clearTimeout(timer.current);
         };
     }, [animationDuration, onClose]);
-    return (React.createElement(Container, null,
-        React.createElement(ToastAnimation, { className: `${toastIsClosed ? 'toast-closed' : ''}` },
-            React.createElement(toast.Toast, { content: message, type: type, isAnimated: true, animationDuration: animationDuration }))));
+    return (React__default.default.createElement(Container, null,
+        React__default.default.createElement(ToastAnimation, { className: `${toastIsClosed ? 'toast-closed' : ''}` },
+            React__default.default.createElement(toast.Toast, { content: message, type: type, isAnimated: true, animationDuration: animationDuration }))));
 };
 const Container = styled.styled.div `
   position: fixed;

package/dist/components/feedback/badge/badge.js

@@ -5,6 +5,10 @@ var React = require('react');
 var styled = require('styled-components');
 var close = require('../../../icons/basic/close.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const colorLookup = {
     blue: {
         primary: 'var(--color-hue-blue-1)',
@@ -36,10 +40,10 @@ const Badge = ({ children, color, dot, onDismiss }) => {
     const bgColor = colorLookup[color].bg;
     const textColor = colorLookup[color].primary;
     const borderColor = colorLookup[color].secondary;
-    return (React.createElement(Component, { "$bgColor": bgColor, "$borderColor": borderColor, "$textColor": textColor },
-        dot && React.createElement(Dot, { "$secondaryColor": textColor }),
+    return (React__default.default.createElement(Component, { "$bgColor": bgColor, "$borderColor": borderColor, "$textColor": textColor },
+        dot && React__default.default.createElement(Dot, { "$secondaryColor": textColor }),
         children,
-        onDismiss && React.createElement(close.Close, { size: 16 })));
+        onDismiss && React__default.default.createElement(close.Close, { size: 16 })));
 };
 const Component = styled.styled.div `
   display: flex;

package/dist/components/feedback/banner/banner.js

@@ -13,21 +13,25 @@ var alert_triangle = require('../../../icons/notifications/alert_triangle.js');
 var close = require('../../../icons/basic/close.js');
 var information = require('../../../icons/notifications/information.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const Banner = ({ content, href, onClose, title, type, setContentInNewLine = false, additionalContent, sx, }) => {
     const iconLookup = {
-        error: React.createElement(alert_octogon.AlertOctogon, { size: 24 }),
-        info: React.createElement(information.Information, { size: 24 }),
-        success: React.createElement(alert_circle.AlertCircle, { size: 24 }),
-        warning: React.createElement(alert_triangle.AlertTriangle, { size: 24 }),
+        error: React__default.default.createElement(alert_octogon.AlertOctogon, { size: 24 }),
+        info: React__default.default.createElement(information.Information, { size: 24 }),
+        success: React__default.default.createElement(alert_circle.AlertCircle, { size: 24 }),
+        warning: React__default.default.createElement(alert_triangle.AlertTriangle, { size: 24 }),
     };
-    return (React.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type, "$sx": sx },
+    return (React__default.default.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type, "$sx": sx },
         iconLookup[type],
-        React.createElement(box.Box, { "$dir": setContentInNewLine ? 'column' : 'row', "$gap": 4 },
-            React.createElement(paragraph.P, { as: "span", "$semiBold": true }, title),
-            React.createElement(paragraph.P, { as: "span", sx: setContentInNewLine ? 'margin-top: 12px;' : '' }, content),
-            additionalContent && React.createElement(paragraph.P, { as: "span" }, additionalContent),
-            href && (React.createElement(paragraph.P, { as: "a", href: href, "$color": "primary-blue-2" }, "Read more"))),
-        onClose && (React.createElement(button.Button, { icon: React.createElement(close.Close, { size: 24 }), onClick: onClose, type: "special" }))));
+        React__default.default.createElement(box.Box, { "$dir": setContentInNewLine ? 'column' : 'row', "$gap": 4 },
+            React__default.default.createElement(paragraph.P, { as: "span", "$semiBold": true }, title),
+            React__default.default.createElement(paragraph.P, { as: "span", sx: setContentInNewLine ? 'margin-top: 12px;' : '' }, content),
+            additionalContent && React__default.default.createElement(paragraph.P, { as: "span" }, additionalContent),
+            href && (React__default.default.createElement(paragraph.P, { as: "a", href: href, "$color": "primary-blue-2" }, "Read more"))),
+        onClose && (React__default.default.createElement(button.Button, { icon: React__default.default.createElement(close.Close, { size: 24 }), onClick: onClose, type: "special" }))));
 };
 const Wrapper = styled.styled.output `
   width: 100%;

package/dist/components/feedback/chip/chip.js

@@ -5,6 +5,10 @@ var React = require('react');
 var styled = require('styled-components');
 var close = require('../../../icons/basic/close.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const colorLookup = {
     'primary-blue': {
         primary: 'var(--color-primary-blue-2)',
@@ -56,10 +60,10 @@ const Chip = ({ children, color, dot, onDismiss, size }) => {
     const bgColor = colorLookup[color].primary;
     const textColor = colorLookup[color].text;
     const dotColor = colorLookup[color].secondary;
-    return (React.createElement(Component, { "$bgColor": bgColor, "$size": size, "$textColor": textColor },
-        dot && React.createElement(Dot, { "$secondaryColor": dotColor }),
+    return (React__default.default.createElement(Component, { "$bgColor": bgColor, "$size": size, "$textColor": textColor },
+        dot && React__default.default.createElement(Dot, { "$secondaryColor": dotColor }),
         children,
-        onDismiss && React.createElement(close.Close, { size: 16, onClick: onDismiss })));
+        onDismiss && React__default.default.createElement(close.Close, { size: 16, onClick: onDismiss })));
 };
 const Component = styled.styled.div `
   display: flex;