@monolith-forensics/monolith-ui 1.2.91 → 1.2.92

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { useTheme } from "styled-components";
 import Extensions from "../Enums/Extensions";
 import { BoldIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, RemoveFormattingIcon, SquircleIcon, } from "lucide-react";
 import DropDownMenu from "../../DropDownMenu";
@@ -7,8 +7,7 @@ import { FloatingPortal, useFloating } from "@floating-ui/react";
 import { useEffect, useRef } from "react";
 import Button from "../../Button";
 import TextColors from "../Enums/TextColors";
-import DefaultColorIcon from "./DefaultColorIcon";
-const getMenuItems = (editor, customMenuItems) => {
+const getMenuItems = (editor, customMenuItems, theme) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const node = (_c = (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.state) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.$from) === null || _c === void 0 ? void 0 : _c.parent;
     const pos = (_e = (_d = editor === null || editor === void 0 ? void 0 : editor.state) === null || _d === void 0 ? void 0 : _d.selection) === null || _e === void 0 ? void 0 : _e.$from;
@@ -60,8 +59,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Text",
                     value: "text",
-                    leftSection: _jsx(CaseSensitiveIcon, { size: 16 }),
                     data: {
+                        Icon: CaseSensitiveIcon,
                         command: (editor) => {
                             // remove ordered list
                             editor
@@ -76,8 +75,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Heading 1",
                     value: "heading_1",
-                    leftSection: _jsx(Heading1Icon, { size: 16 }),
                     data: {
+                        Icon: Heading1Icon,
                         command: (editor) => {
                             editor.chain().focus().setHeading({ level: 1 }).run();
                         },
@@ -86,8 +85,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Heading 2",
                     value: "heading_2",
-                    leftSection: _jsx(Heading2Icon, { size: 16 }),
                     data: {
+                        Icon: Heading2Icon,
                         command: (editor) => {
                             editor.chain().focus().setHeading({ level: 2 }).run();
                         },
@@ -96,8 +95,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Heading 3",
                     value: "heading_3",
-                    leftSection: _jsx(Heading3Icon, { size: 16 }),
                     data: {
+                        Icon: Heading3Icon,
                         command: (editor) => {
                             editor.chain().focus().setHeading({ level: 3 }).run();
                         },
@@ -106,8 +105,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Heading 4",
                     value: "heading_4",
-                    leftSection: _jsx(Heading4Icon, { size: 16 }),
                     data: {
+                        Icon: Heading4Icon,
                         command: (editor) => {
                             editor.chain().focus().setHeading({ level: 4 }).run();
                         },
@@ -116,8 +115,8 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Bullet List",
                     value: "bullet_list",
-                    leftSection: _jsx(ListIcon, { size: 16 }),
                     data: {
+                        Icon: ListIcon,
                         command: (editor) => {
                             editor.chain().focus().toggleBulletList().run();
                         },
@@ -126,14 +125,17 @@ const getMenuItems = (editor, customMenuItems) => {
                 {
                     label: "Ordered List",
                     value: "ordered_list",
-                    leftSection: _jsx(ListOrderedIcon, { size: 16 }),
                     data: {
+                        Icon: ListOrderedIcon,
                         command: (editor) => {
                             editor.chain().focus().toggleOrderedList().run();
                         },
                     },
                 },
             ],
+            dropDownProps: {
+                renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(item.data.Icon, { size: 16 }), item.label] })),
+            },
         },
         {
             name: "color",
@@ -145,15 +147,11 @@ const getMenuItems = (editor, customMenuItems) => {
                 style: { fontSize: 11, padding: "4px" },
             },
             items: [
-                // remove Color Style
                 {
                     label: "Default",
                     value: "default",
-                    leftSection: _jsx(DefaultColorIcon, { size: 12 }),
-                    data: {
-                        command: (editor) => {
-                            editor.chain().focus().unsetColor().run();
-                        },
+                    onClick: () => {
+                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
                     },
                 },
                 ...Object.keys(TextColors).map((color) => {
@@ -161,18 +159,22 @@ const getMenuItems = (editor, customMenuItems) => {
                     return {
                         label: color,
                         value: TextColors[colorKey],
-                        leftSection: (_jsx(SquircleIcon, { size: 12, color: TextColors[colorKey], style: {
-                                backgroundColor: TextColors[colorKey],
-                                borderRadius: "3px",
-                            } })),
-                        data: {
-                            command: (editor) => {
-                                editor.chain().focus().setColor(TextColors[colorKey]).run();
-                            },
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
                         },
                     };
                 }),
             ],
+            dropDownProps: {
+                renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
+                                ? theme.palette.text.primary
+                                : item.value, style: {
+                                backgroundColor: item.value === "default"
+                                    ? theme.palette.text.primary
+                                    : item.value,
+                                borderRadius: "3px",
+                            } }), item.label] })),
+            },
         },
         {
             name: Extensions.Bold,
@@ -274,6 +276,7 @@ const BubbleMenu = ({ editor, rect, open, onOpen, customMenuItems = [], }) => {
     var _a;
     const menuRef = useRef(null);
     const { refs, elements } = useFloating();
+    const theme = useTheme();
     useEffect(() => {
         if (open && onOpen) {
             onOpen(elements.floating);
@@ -301,7 +304,7 @@ const BubbleMenu = ({ editor, rect, open, onOpen, customMenuItems = [], }) => {
             }, style: {
                 top,
                 left,
-            }, children: getMenuItems(editor, customMenuItems).map((item) => {
+            }, children: getMenuItems(editor, customMenuItems, theme).map((item) => {
                 var _a;
                 if (item.type === "button") {
                     const isActive = (_a = item.isActive) === null || _a === void 0 ? void 0 : _a.call(item, editor);

package/dist/RichTextEditor/Components/ColorPicker.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from "@tiptap/react";
+export declare const ColorPicker: React.FC<{
+    editor: Editor;
+}>;

package/dist/RichTextEditor/Components/ColorPicker.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DropDownMenu from "../../DropDownMenu";
+import TextColors from "../Enums/TextColors";
+import { SquircleIcon } from "lucide-react";
+import { useTheme } from "styled-components";
+export const ColorPicker = ({ editor }) => {
+    const theme = useTheme();
+    return (_jsx(DropDownMenu, { data: [
+            {
+                label: "Default",
+                value: "default",
+                onClick: () => {
+                    editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
+                },
+            },
+            ...Object.keys(TextColors).map((color) => {
+                const colorKey = color;
+                return {
+                    label: color,
+                    value: TextColors[colorKey],
+                    onClick: () => {
+                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
+                    },
+                };
+            }),
+        ], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default" ? theme.palette.text.primary : item.value, style: {
+                        backgroundColor: item.value === "default"
+                            ? theme.palette.text.primary
+                            : item.value,
+                        borderRadius: "3px",
+                    } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
+            style: {
+                fontWeight: "normal",
+            },
+            title: "Select Color",
+        }, children: "Color" }));
+};

package/dist/RichTextEditor/Components/index.d.ts

@@ -0,0 +1 @@
+export * from "./ColorPicker";

package/dist/RichTextEditor/Components/index.js

@@ -0,0 +1 @@
+export * from "./ColorPicker";

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -9,6 +9,7 @@ interface RichTextEditorProps {
     extensions?: ExtensionType[];
     slashCommands?: any[];
     defaultValue?: string;
+    value?: string;
     readOnly?: boolean;
     height?: string;
     font?: string;
@@ -21,7 +22,5 @@ interface RichTextEditorProps {
     autoFocus?: boolean;
     style?: React.CSSProperties;
 }
-declare const RichTextEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<RichTextEditorProps & import("react").RefAttributes<unknown>, "ref"> & {
-    ref?: ((instance: unknown) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<unknown> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<RichTextEditorProps & import("react").RefAttributes<unknown>>, keyof import("react").Component<any, {}, any>>;
+declare const RichTextEditor: import("react").ForwardRefExoticComponent<RichTextEditorProps & import("react").RefAttributes<unknown>>;
 export default RichTextEditor;

package/dist/RichTextEditor/RichTextEditor.js

@@ -9,88 +9,7 @@ import { startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
-const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaultValue = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }, ref) => {
-    const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
-    // check if image extension is included
-    if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
-        // Ensure that handleImageUpload is provided
-        if (!handleImageUpload) {
-            throw new Error("handleImageUpload is required when using the image extension.");
-        }
-    }
-    const editor = useEditor({
-        content: defaultValue,
-        editable: !readOnly,
-        extensions: getTipTapExtensions({
-            extensions,
-            slashCommands,
-            bubbleMenuOptions,
-            handleImageUpload,
-        }),
-        editorProps: {
-            handlePaste: (view, event) => {
-                if (!handleImageUpload)
-                    return false;
-                if (!(event === null || event === void 0 ? void 0 : event.clipboardData))
-                    return false;
-                if (event.clipboardData.types.includes("text/html") ||
-                    event.clipboardData.types.includes("text/plain") ||
-                    event.clipboardData.types.includes("text/rtf"))
-                    return false;
-                if (event.clipboardData &&
-                    event.clipboardData.files &&
-                    event.clipboardData.files[0]) {
-                    event.preventDefault();
-                    const file = event.clipboardData.files[0];
-                    const pos = view.state.selection.from;
-                    startImageUpload(file, view, pos, handleImageUpload);
-                    return true;
-                }
-                return false;
-            },
-            handleDrop: (view, event, _slice, moved) => {
-                if (!handleImageUpload)
-                    return false;
-                if (!moved &&
-                    event.dataTransfer &&
-                    event.dataTransfer.files &&
-                    event.dataTransfer.files[0]) {
-                    event.preventDefault();
-                    const file = event.dataTransfer.files[0];
-                    const coordinates = view.posAtCoords({
-                        left: event.clientX,
-                        top: event.clientY,
-                    });
-                    if (!coordinates)
-                        return false;
-                    // here we deduct 1 from the pos or else the image will create an extra node
-                    startImageUpload(file, view, coordinates.pos - 1, handleImageUpload);
-                    return true;
-                }
-                return false;
-            },
-        },
-        onUpdate: ({ editor }) => {
-            onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
-        },
-    });
-    useEffect(() => {
-        const _ref = editorInstanceRef;
-        if (editorInstanceRef) {
-            _ref.current = editor;
-        }
-    }, [editor]);
-    // AutoFocus on the editor
-    useEffect(() => {
-        if (autoFocus && editor) {
-            editor.view.focus();
-        }
-    }, [autoFocus, editor]);
-    return (_jsx("div", { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
-                font: fontState,
-                setFont: setFontState,
-            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
-})) `
+const StyledContent = styled.div `
   position: relative;
   display: flex;
   flex-direction: column;
@@ -99,10 +18,6 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
   justify-content: flex-start;
   align-items: center;
 
-  ::selection {
-    background-color: #705324;
-  }
-
   .editor-content {
     height: ${({ height }) => height || "100%"};
     width: 100%;
@@ -363,4 +278,86 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
     margin: 0 0.125rem;
   }
 `;
+const RichTextEditor = forwardRef(({ className, editorInstanceRef, defaultValue = "", value = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }, ref) => {
+    const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
+    // check if image extension is included
+    if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
+        // Ensure that handleImageUpload is provided
+        if (!handleImageUpload) {
+            throw new Error("handleImageUpload is required when using the image extension.");
+        }
+    }
+    const editor = useEditor({
+        content: defaultValue,
+        editable: !readOnly,
+        extensions: getTipTapExtensions({
+            extensions,
+            slashCommands,
+            bubbleMenuOptions,
+            handleImageUpload,
+        }),
+        editorProps: {
+            handlePaste: (view, event) => {
+                if (!handleImageUpload)
+                    return false;
+                if (!(event === null || event === void 0 ? void 0 : event.clipboardData))
+                    return false;
+                if (event.clipboardData.types.includes("text/html") ||
+                    event.clipboardData.types.includes("text/plain") ||
+                    event.clipboardData.types.includes("text/rtf"))
+                    return false;
+                if (event.clipboardData &&
+                    event.clipboardData.files &&
+                    event.clipboardData.files[0]) {
+                    event.preventDefault();
+                    const file = event.clipboardData.files[0];
+                    const pos = view.state.selection.from;
+                    startImageUpload(file, view, pos, handleImageUpload);
+                    return true;
+                }
+                return false;
+            },
+            handleDrop: (view, event, _slice, moved) => {
+                if (!handleImageUpload)
+                    return false;
+                if (!moved &&
+                    event.dataTransfer &&
+                    event.dataTransfer.files &&
+                    event.dataTransfer.files[0]) {
+                    event.preventDefault();
+                    const file = event.dataTransfer.files[0];
+                    const coordinates = view.posAtCoords({
+                        left: event.clientX,
+                        top: event.clientY,
+                    });
+                    if (!coordinates)
+                        return false;
+                    // here we deduct 1 from the pos or else the image will create an extra node
+                    startImageUpload(file, view, coordinates.pos - 1, handleImageUpload);
+                    return true;
+                }
+                return false;
+            },
+        },
+        onUpdate: ({ editor }) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
+        },
+    });
+    useEffect(() => {
+        const _ref = editorInstanceRef;
+        if (editorInstanceRef) {
+            _ref.current = editor;
+        }
+    }, [editor]);
+    // AutoFocus on the editor
+    useEffect(() => {
+        if (autoFocus && editor) {
+            editor.view.focus();
+        }
+    }, [autoFocus, editor]);
+    return (_jsx(StyledContent, { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
+                font: fontState,
+                setFont: setFontState,
+            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
+});
 export default RichTextEditor;

package/dist/RichTextEditor/Toolbar/ControlsGroup.d.ts

@@ -2,7 +2,5 @@ interface ControlsGroupProps {
     className?: string;
     children?: React.ReactNode;
 }
-declare const ControlsGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ControlsGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<ControlsGroupProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+declare const ControlsGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlsGroupProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<ControlsGroupProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export default ControlsGroup;

package/dist/RichTextEditor/Toolbar/Toolbar.d.ts

@@ -1,7 +1,7 @@
 import { Editor } from "@tiptap/react";
 import Controls from "../Enums/Controls";
+import { DropDownMenuProps } from "../../DropDownMenu";
 import { ReactNode } from "react";
-import { DropDownMenuProps } from "../../DropDownMenu/DropDownMenu";
 import { ButtonProps } from "../../Button";
 export type CustomItem = {
     type: "button";

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import ControlsGroup from "./ControlsGroup";
 import { UndoControl, RedoControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
 import Controls from "../Enums/Controls";
@@ -9,10 +9,10 @@ import { useContext } from "react";
 import RichTextEditorContext from "../Contexts/RichTextEditorContext";
 import Button from "../../Button";
 import TextColors from "../Enums/TextColors";
-import DefaultColorIcon from "../Components/DefaultColorIcon";
 import { SquircleIcon } from "lucide-react";
 const Toolbar = styled(({ className, editor, toolbarOptions }) => {
     var _a;
+    const theme = useTheme();
     const { controls } = toolbarOptions || {};
     const customItems = controls === null || controls === void 0 ? void 0 : controls.filter((control) => typeof control !== "string" &&
         (control.type === "menu" || control.type === "button"));
@@ -32,15 +32,11 @@ const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                         setFont(font);
                     },
                 })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
-                    style: {
-                        fontWeight: "normal",
-                    },
                     title: "Select Font",
                 }, children: (font || Fonts.DEFAULT) })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(DropDownMenu, { data: [
                     {
                         label: "Default",
                         value: "default",
-                        leftSection: _jsx(DefaultColorIcon, { size: 12 }),
                         onClick: () => {
                             editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
                         },
@@ -50,19 +46,19 @@ const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                         return {
                             label: color,
                             value: TextColors[colorKey],
-                            leftSection: (_jsx(SquircleIcon, { size: 12, color: TextColors[colorKey], style: {
-                                    backgroundColor: TextColors[colorKey],
-                                    borderRadius: "3px",
-                                } })),
                             onClick: () => {
                                 editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
                             },
                         };
                     }),
-                ], size: "xxs", variant: "outlined", arrow: true, buttonProps: {
-                    style: {
-                        fontWeight: "normal",
-                    },
+                ], renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
+                                ? theme.palette.text.primary
+                                : item.value, style: {
+                                backgroundColor: item.value === "default"
+                                    ? theme.palette.text.primary
+                                    : item.value,
+                                borderRadius: "3px",
+                            } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
                     title: "Select Color",
                 }, children: "Color" })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] })] }));
 }) `

package/dist/SelectBox/SelectBox.d.ts

@@ -2,5 +2,5 @@ import { SelectBoxProps } from "..";
 export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     width?: string | number | null;
 }>> & string;
-declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, OptionTooltip, DropDownProps, debounceTime, sort, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, OptionTooltip, DropDownProps, debounceTime, sort, disabled, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default SelectBox;