@monolith-forensics/monolith-ui 1.3.4 → 1.3.61

package/dist/Divider/Divider.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+export interface DividerProps {
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Divider/Divider.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+const StyledDivider = styled.div `
+  height: 1px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.palette.divider};
+  margin: 16px 0;
+`;
+export const Divider = forwardRef((_a, ref) => {
+    var { className, style } = _a, other = __rest(_a, ["className", "style"]);
+    return (_jsx(StyledDivider, Object.assign({ ref: ref, className: className, style: style }, other)));
+});
+Divider.displayName = "Divider";

package/dist/Divider/index.d.ts

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

package/dist/Divider/index.js

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

package/dist/Input/Input.d.ts

@@ -5,6 +5,9 @@ export interface InputProps {
     size?: Size;
     variant?: Variant;
     width?: string | number | null | undefined;
+    password?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
 }
 declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/Input/Input.js

@@ -9,9 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
+import { Eye, EyeOff, X } from "lucide-react";
 const StyledInput = styled.input `
   font-family: ${({ theme }) => theme.typography.fontFamily};
   pointer-events: "all";
@@ -143,8 +144,73 @@ const StyledInput = styled.input `
     opacity: 0.5;
   }
 `;
+const InputContainer = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: ${({ width }) => {
+    if (typeof width === "undefined")
+        return "100%";
+    if (width === null)
+        return "100%";
+    if (typeof width === "string")
+        return width;
+    if (typeof width === "number")
+        return `${width}px`;
+}};
+`;
+const InputButton = styled.button `
+  position: absolute;
+  right: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(props) => props.theme.palette.text.secondary};
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: ${(props) => props.theme.palette.text.primary};
+    background-color: ${(props) => props.theme.palette.action.hover};
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px ${(props) => props.theme.palette.primary.main}40;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
 const Input = forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return _jsx(StyledInput, Object.assign({ ref: ref, className: className }, props));
+    var { className, password = false, clearable = false, onClear, width, value } = _a, props = __rest(_a, ["className", "password", "clearable", "onClear", "width", "value"]);
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const hasButton = password || (clearable && value);
+    const handlePasswordToggle = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setPasswordVisible((prev) => !prev);
+    };
+    const handleClear = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    return (_jsxs(InputContainer, { className: className, width: width, children: [_jsx(StyledInput, Object.assign({ ref: ref, value: value, width: width, type: password && !passwordVisible ? "password" : "text", style: {
+                    paddingRight: hasButton ? "36px" : undefined,
+                } }, props)), password ? (_jsx(InputButton, { onClick: handlePasswordToggle, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, type: "button", children: passwordVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) })) : clearable && value ? (_jsx(InputButton, { onClick: handleClear, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, type: "button", children: _jsx(X, {}) })) : null] }));
 });
+Input.displayName = "Input";
 export default Input;

package/dist/ItemTotal/ItemTotal.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ItemTotalProps {
+    className?: string;
+    total: number;
+    Icon: React.ComponentType<any>;
+    style?: React.CSSProperties;
+    title?: string;
+}
+declare const ItemTotal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ItemTotalProps, never>> & string & Omit<({ className, total, Icon, style, title, }: ItemTotalProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
+export default ItemTotal;
+export type { ItemTotalProps };

package/dist/ItemTotal/ItemTotal.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+const ItemTotal = styled(({ className, total, Icon, style = {}, title = "Total Items", }) => {
+    return (_jsxs("div", { className: className, title: title, style: style, children: [_jsx(Icon, { size: 14, style: {
+                    fontSize: 14,
+                    marginRight: 5,
+                } }), _jsx("div", { style: {
+                    fontSize: 12,
+                }, children: total || 0 })] }));
+}) `
+  display: flex;
+  align-content: center;
+  align-items: center;
+  margin-left: 10px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.palette.text.secondary};
+
+  &:hover {
+    color: ${({ theme }) => theme.palette.text.primary};
+  }
+`;
+export default ItemTotal;

package/dist/ItemTotal/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ItemTotal";
+export type { ItemTotalProps } from "./ItemTotal";

package/dist/ItemTotal/index.js

@@ -0,0 +1 @@
+export { default } from "./ItemTotal";

package/dist/RichTextEditor/Enums/Controls.d.ts

@@ -16,6 +16,5 @@ export declare enum Controls {
     TEXT_ALIGN_RIGHT = "textAlignRight",
     TEXT_ALIGN_JUSTIFIED = "textAlignJustified",
     FONT = "font",
-    COLOR = "color",
-    TABLE = "table"
+    COLOR = "color"
 }

package/dist/RichTextEditor/Enums/Controls.js

@@ -18,5 +18,4 @@ export var Controls;
     Controls["TEXT_ALIGN_JUSTIFIED"] = "textAlignJustified";
     Controls["FONT"] = "font";
     Controls["COLOR"] = "color";
-    Controls["TABLE"] = "table";
 })(Controls || (Controls = {}));

package/dist/RichTextEditor/Enums/SlashCommands.d.ts

@@ -6,7 +6,6 @@ export declare enum SlashCommands {
     Heading4 = "Heading 4",
     BulletList = "Bullet List",
     NumberedList = "Numbered List",
-    Table = "Table",
     CurrentDate = "Current Date",
     CurrentTimestamp = "Current Timestamp",
     Image = "Image"

package/dist/RichTextEditor/Enums/SlashCommands.js

@@ -7,7 +7,6 @@ export var SlashCommands;
     SlashCommands["Heading4"] = "Heading 4";
     SlashCommands["BulletList"] = "Bullet List";
     SlashCommands["NumberedList"] = "Numbered List";
-    SlashCommands["Table"] = "Table";
     SlashCommands["CurrentDate"] = "Current Date";
     SlashCommands["CurrentTimestamp"] = "Current Timestamp";
     SlashCommands["Image"] = "Image";

package/dist/RichTextEditor/Extensions/SlashCommandList.d.ts

@@ -1,11 +1,9 @@
-import { SuggestionItem } from "./getSlashCommand";
-import { Editor, Range } from "@tiptap/react";
 interface SlashCommandListProps {
     className?: string;
-    items: SuggestionItem[];
-    command: (item: SuggestionItem) => void;
-    editor: Editor;
-    range: Range;
+    items: any[];
+    command: (item: any) => void;
+    editor: any;
+    range: any;
 }
 declare const SlashCommandList: ({ items, command, editor, range, }: SlashCommandListProps) => import("react/jsx-runtime").JSX.Element | null;
 export default SlashCommandList;

package/dist/RichTextEditor/Extensions/SlashCommandList.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
 import styled from "styled-components";
-import { useToolbarState } from "../Toolbar/useToolbarState";
-import { SlashCommands } from "../Enums";
 const SlashCommandListContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -40,11 +38,6 @@ const SlashCommandItem = styled.button `
   &.selected {
     background-color: ${({ theme }) => theme.palette.action.hover};
   }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
 `;
 const CommandIcon = styled.div `
   display: flex;
@@ -85,7 +78,6 @@ const updateScrollView = (container, item) => {
 };
 const SlashCommandList = ({ items, command, editor, range, }) => {
     const [selectedIndex, setSelectedIndex] = useState(0);
-    const { isInsideTable } = useToolbarState(editor);
     const selectItem = useCallback((index) => {
         const item = items[index];
         if (item) {
@@ -113,9 +105,6 @@ const SlashCommandList = ({ items, command, editor, range, }) => {
                     return true;
                 }
                 if (e.key === "Enter") {
-                    if (items[selectedIndex].disabled) {
-                        return true;
-                    }
                     selectItem(selectedIndex);
                     return true;
                 }
@@ -138,10 +127,7 @@ const SlashCommandList = ({ items, command, editor, range, }) => {
             updateScrollView(container, item);
     }, [selectedIndex]);
     return items.length > 0 ? (_jsx(SlashCommandListContainer, { ref: commandListContainer, className: "slash-command", children: items.map((item, index) => {
-            if (item.title === SlashCommands.Table && isInsideTable) {
-                item.disabled = true;
-            }
-            return (_jsxs(SlashCommandItem, { className: `slash-command-item ${index === selectedIndex ? "selected" : ""}`, onClick: () => selectItem(index), disabled: item.disabled, children: [_jsx(CommandIcon, { className: "item-icon", children: _jsx(item.icon, { size: 18 }) }), _jsxs("div", { children: [_jsx(CommandTitle, { className: "item-title", children: item.title }), _jsx(CommandDescription, { className: "item-description", children: item.description })] })] }, index));
+            return (_jsxs(SlashCommandItem, { className: `slash-command-item ${index === selectedIndex ? "selected" : ""}`, onClick: () => selectItem(index), children: [_jsx(CommandIcon, { className: "item-icon", children: _jsx(item.icon, { size: 18 }) }), _jsxs("div", { children: [_jsx(CommandTitle, { className: "item-title", children: item.title }), _jsx(CommandDescription, { className: "item-description", children: item.description })] })] }, index));
         }) })) : null;
 };
 export default SlashCommandList;

package/dist/RichTextEditor/Extensions/getSlashCommand.d.ts

@@ -1,18 +1,7 @@
-import { Extension, Editor } from "@tiptap/core";
+import { Extension } from "@tiptap/core";
 import { HandleImageUpload } from "../Plugins/UploadImagesPlugin.js";
 import { SlashCommands } from "../Enums";
 type CommandName = keyof typeof SlashCommands;
-export type SuggestionItem = {
-    title: CommandName;
-    description: string;
-    searchTerms?: string[];
-    icon: any;
-    disabled?: boolean;
-    command: (props: {
-        editor: Editor;
-        range: any;
-    }) => void;
-};
 interface SlashCommandOptions {
     handleImageUpload?: HandleImageUpload;
     commands?: CommandName[];

package/dist/RichTextEditor/Extensions/getSlashCommand.js

@@ -11,7 +11,7 @@ import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
-import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, Image as ImageIcon, Calendar, ClockIcon, Table, } from "lucide-react";
+import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, Image as ImageIcon, Calendar, ClockIcon, } from "lucide-react";
 import { startImageUpload, } from "../Plugins/UploadImagesPlugin.js";
 import { PluginKey } from "@tiptap/pm/state";
 import SlashCommandList from "./SlashCommandList";
@@ -115,15 +115,6 @@ const getCommandItems = (values, options) => {
                 editor.chain().focus().deleteRange(range).toggleOrderedList().run();
             },
         },
-        {
-            title: SlashCommands.Table,
-            description: "Create a table.",
-            searchTerms: ["table"],
-            icon: Table,
-            command: ({ editor, range }) => {
-                editor.chain().focus().deleteRange(range).insertTable().run();
-            },
-        },
         {
             title: SlashCommands.CurrentDate,
             description: "Insert the current date.",

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -3,10 +3,13 @@ import StarterKit from "@tiptap/starter-kit";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Underline from "@tiptap/extension-underline";
 import TextAlign from "@tiptap/extension-text-align";
-import { TableKit } from "@tiptap/extension-table";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
 import Placeholder from "@tiptap/extension-placeholder";
 import { Color } from "@tiptap/extension-color";
-import { TextStyle } from "@tiptap/extension-text-style";
+import TextStyle from "@tiptap/extension-text-style";
 import { InputRule, Extension } from "@tiptap/core";
 import Focus from "@tiptap/extension-focus";
 import { UploadImagesPlugin } from "../Plugins";
@@ -118,13 +121,22 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
         },
         {
             name: Extensions.Table,
-            extension: TableKit.configure({
-                table: {
-                    resizable: true,
-                    // View: CustomTableView,
-                },
+            extension: Table.configure({
+                resizable: true,
             }),
         },
+        {
+            name: Extensions.TableRow,
+            extension: TableRow,
+        },
+        {
+            name: Extensions.TableHeader,
+            extension: TableHeader,
+        },
+        {
+            name: Extensions.TableCell,
+            extension: TableCell,
+        },
         {
             name: Extensions.Image,
             extension: CustomImage.configure({

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js

@@ -107,8 +107,7 @@ export const UploadImagesPlugin = () => new Plugin({
     },
     props: {
         decorations(state) {
-            const decos = this.getState(state);
-            return decos !== null && decos !== void 0 ? decos : null;
+            return this.getState(state);
         },
     },
 });

package/dist/RichTextEditor/RichTextEditor.js

@@ -59,119 +59,23 @@ const StyledContent = styled.div `
     word-break: break-word;
     text-rendering: optimizeLegibility;
 
-    .tableWrapper {
-      position: relative;
-
-      .tiptap-table-menu-container {
-        position: absolute;
-        left: -20px;
-        top: 0;
-
-        display: flex;
-        flex-direction: column;
-      }
-
-      .tiptap-table-menu {
-        display: none;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        background-color: ${({ theme }) => theme.palette.background.default};
-        border-radius: 4px;
-        border: 1px solid ${({ theme }) => theme.palette.divider};
-        padding: 10px;
-        width: 100px;
-        height: 100px;
-
-        z-index: 1000;
-        position: absolute;
-        top: 30px;
-        left: 0px;
-
-        &.show {
-          display: flex;
-        }
-      }
-
-      .tiptap-table-menu-btn {
-        display: none;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        cursor: pointer;
-
-        padding: 3px;
-        border-radius: 4px;
-        color: ${({ theme }) => theme.palette.text.secondary};
-        font-weight: 500;
-        font-size: 1.25rem;
-
-        &:hover {
-          background-color: ${({ theme }) => theme.palette.action.hover};
-          color: ${({ theme }) => theme.palette.text.primary};
-        }
-      }
-
-      .tiptap-table-addcol-btn {
-        display: none;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        cursor: pointer;
-        position: absolute;
-        right: -20px;
-        top: 0;
-        width: 20px;
-        height: 100%;
-        background-color: transparent;
-        font-weight: 500;
-        border-radius: 0 4px 4px 0;
-        border-top: 1px solid ${({ theme }) => theme.palette.action.hover};
-        border-bottom: 1px solid ${({ theme }) => theme.palette.action.hover};
-        border-right: 1px solid ${({ theme }) => theme.palette.action.hover};
-        color: ${({ theme }) => theme.palette.text.secondary};
-
-        &:hover {
-          background-color: ${({ theme }) => theme.palette.action.hover};
-          color: ${({ theme }) => theme.palette.text.primary};
-        }
-      }
-    }
-
     table {
-      position: relative;
       border-collapse: collapse;
       width: 100%;
-      table-layout: fixed;
-
-      tr.is-empty::before {
-        display: none;
-      }
 
       th,
       td {
         border: 1px solid ${({ theme }) => theme.palette.divider};
-        padding: 5px;
+        padding: 0.5rem;
         min-width: 100px;
-        white-space: normal;
-        word-break: break-word;
-        overflow-wrap: anywhere;
-      }
-
-      th.is-empty p::before {
-        display: none;
-      }
-
-      td.is-empty p::before {
-        display: none;
       }
 
       // for table header
       th {
-        background-color: ${({ theme }) => theme.palette.background.alt};
         border: 1px solid ${({ theme }) => theme.palette.divider};
-        padding: 5px;
+        padding: 0.5rem;
         min-width: 100px;
+        background-color: ${({ theme }) => theme.palette.action.hover};
         font-weight: 500;
       }
     }
@@ -235,7 +139,6 @@ const StyledContent = styled.div `
     color: #888;
     pointer-events: none;
     height: 0;
-    white-space: nowrap;
   }
   .ProseMirror .is-empty::before {
     content: attr(data-placeholder);
@@ -243,7 +146,6 @@ const StyledContent = styled.div `
     color: #888;
     pointer-events: none;
     height: 0;
-    white-space: nowrap;
   }
 
   .ProseMirror .monolith-image.uploading {

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

@@ -18,7 +18,7 @@ export type ToolbarOptions = {
 };
 export type ToolbarProps = {
     className?: string;
-    editor: Editor;
+    editor: Editor | null;
     toolbarOptions?: ToolbarOptions;
 };
-export declare const Toolbar: React.FC<ToolbarProps>;
+export declare const Toolbar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ToolbarProps, never>> & string & Omit<({ className, editor, toolbarOptions }: ToolbarProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -10,27 +10,14 @@ import RichTextEditorContext from "../Contexts/RichTextEditorContext";
 import { Button } from "../../Button";
 import TextColors from "../Enums/TextColors";
 import { SquircleIcon } from "lucide-react";
-import { useToolbarState } from "./useToolbarState";
-const ToolbarContainer = styled.div `
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  margin-bottom: 10px;
-  border-radius: 5px 5px 0 0;
-  border: 1px solid transparent;
-`;
-export const Toolbar = ({ className, editor, toolbarOptions, }) => {
+export 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"));
     const { font, setFont } = useContext(RichTextEditorContext);
-    const { isInsideTable } = useToolbarState(editor);
-    return (_jsxs(ToolbarContainer, { className: className, children: [(_a = customItems === null || customItems === void 0 ? void 0 : customItems.map) === null || _a === void 0 ? void 0 : _a.call(customItems, (item, index) => {
+    return (_jsxs("div", { className: className, children: [(_a = customItems === null || customItems === void 0 ? void 0 : customItems.map) === null || _a === void 0 ? void 0 : _a.call(customItems, (item, index) => {
                 var _a, _b;
                 if (item.type === "button") {
                     return (_jsx(Button, Object.assign({}, item.options, { children: (_a = item === null || item === void 0 ? void 0 : item.options) === null || _a === void 0 ? void 0 : _a.label }), index));
@@ -73,80 +60,14 @@ export const Toolbar = ({ className, editor, toolbarOptions, }) => {
                                 borderRadius: "3px",
                             } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
                     title: "Select Color",
-                }, children: "Color" })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TABLE)) && (_jsx(DropDownMenu, { data: [
-                    {
-                        label: "Insert Table",
-                        value: "insert-table",
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertTable().run();
-                        },
-                        disabled: isInsideTable,
-                    },
-                    {
-                        label: "Insert Column Before",
-                        value: "insert-column-before",
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().addColumnBefore().run();
-                        },
-                        disabled: !isInsideTable,
-                    },
-                    {
-                        label: "Insert Column After",
-                        value: "insert-column-after",
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().addColumnAfter().run();
-                        },
-                        disabled: !isInsideTable,
-                    },
-                    {
-                        label: "Delete Column",
-                        value: "delete-column",
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().deleteColumn().run();
-                        },
-                        disabled: !isInsideTable,
-                    },
-                    {
-                        label: "Insert Row Before",
-                        value: "insert-row-before",
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().addRowBefore().run();
-                        },
-                        disabled: !isInsideTable,
-                    },
-                    {
-                        label: "Insert Row After",
-                        value: "insert-row-after",
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().addRowAfter().run();
-                        },
-                        disabled: !isInsideTable,
-                    },
-                    {
-                        label: "Delete Row",
-                        value: "delete-row",
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().deleteRow().run();
-                        },
-                        disabled: !isInsideTable,
-                    },
-                    {
-                        label: "Toggle Header Row",
-                        value: "toggle-header-row",
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleHeaderRow().run();
-                        },
-                        disabled: !isInsideTable,
-                    },
-                    {
-                        label: "Delete Table",
-                        value: "delete-table",
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().deleteTable().run();
-                        },
-                        disabled: !isInsideTable,
-                    },
-                ], size: "xxs", variant: "outlined", arrow: true, buttonProps: {
-                    title: "Select Color",
-                }, children: "Table" })), _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 }))] })] }));
-};
+                }, 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 }))] })] }));
+}) `
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 10px;
+  border-radius: 5px 5px 0 0;
+  border: 1px solid transparent;
+`;

package/dist/index.d.ts

@@ -28,6 +28,8 @@ export { default as Tooltip } from "./Tooltip";
 export { default as Pill } from "./Pill";
 export { default as Calendar } from "./Calendar";
 export { default as Typography } from "./Typography";
+export { default as ItemTotal } from "./ItemTotal";
+export type { ItemTotalProps } from "./ItemTotal";
 export * from "./RichTextEditor";
 export { default as Loader } from "./Loader";
 export type { LoaderProps } from "./Loader";
@@ -38,3 +40,4 @@ export * from "./FileViewer";
 export * from "./Table";
 export type { ColumnProps, TableProps } from "./Table";
 export * from "./Tabs";
+export * from "./Divider";

package/dist/index.js

@@ -21,6 +21,7 @@ export { default as Tooltip } from "./Tooltip";
 export { default as Pill } from "./Pill";
 export { default as Calendar } from "./Calendar";
 export { default as Typography } from "./Typography";
+export { default as ItemTotal } from "./ItemTotal";
 export * from "./RichTextEditor";
 export { default as Loader } from "./Loader";
 export * from "./QueryFilter";
@@ -29,3 +30,4 @@ export * from "./MonolithUIProvider";
 export * from "./FileViewer";
 export * from "./Table";
 export * from "./Tabs";
+export * from "./Divider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.4",
+  "version": "1.3.61",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -33,23 +33,22 @@
     "@radix-ui/react-switch": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tabler/icons-react": "^3.11.0",
-    "@tiptap/extension-color": "^3.0.9",
-    "@tiptap/extension-focus": "^3.0.9",
-    "@tiptap/extension-horizontal-rule": "^3.0.9",
-    "@tiptap/extension-image": "^3.0.9",
-    "@tiptap/extension-placeholder": "^3.0.9",
-    "@tiptap/extension-table": "^3.0.9",
-    "@tiptap/extension-table-cell": "^3.0.9",
-    "@tiptap/extension-table-header": "^3.0.9",
-    "@tiptap/extension-table-row": "^3.0.9",
-    "@tiptap/extension-text-align": "^3.0.9",
-    "@tiptap/extension-text-style": "^3.0.9",
-    "@tiptap/extension-underline": "^3.0.9",
-    "@tiptap/extensions": "^3.0.9",
-    "@tiptap/pm": "^3.0.9",
-    "@tiptap/react": "^3.0.9",
-    "@tiptap/starter-kit": "^3.0.9",
-    "@tiptap/suggestion": "^3.0.9",
+    "@tiptap/extension-color": "^2.9.1",
+    "@tiptap/extension-focus": "^2.5.9",
+    "@tiptap/extension-horizontal-rule": "^2.5.9",
+    "@tiptap/extension-image": "^2.5.9",
+    "@tiptap/extension-placeholder": "^2.5.9",
+    "@tiptap/extension-table": "^2.5.8",
+    "@tiptap/extension-table-cell": "^2.5.8",
+    "@tiptap/extension-table-header": "^2.5.8",
+    "@tiptap/extension-table-row": "^2.5.8",
+    "@tiptap/extension-text-align": "^2.5.8",
+    "@tiptap/extension-text-style": "^2.9.1",
+    "@tiptap/extension-underline": "^2.5.8",
+    "@tiptap/pm": "^2.5.8",
+    "@tiptap/react": "^2.5.8",
+    "@tiptap/starter-kit": "^2.5.8",
+    "@tiptap/suggestion": "^2.5.9",
     "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
     "deepmerge": "^4.3.1",

package/dist/RichTextEditor/Extensions/CustomTableView.d.ts

@@ -1,22 +0,0 @@
-import { TableView as DefaultTableView } from "@tiptap/extension-table";
-import { EditorView } from "@tiptap/pm/view";
-import type { Node as PMNode } from "prosemirror-model";
-export declare class CustomTableView extends DefaultTableView {
-    private addColumnBtn;
-    private tableMenuBtn;
-    private tableMenu;
-    private isOpen;
-    private selectionHandler;
-    private clickOutsideHandler;
-    private view;
-    constructor(node: PMNode, cellMinWidth: number, view: EditorView);
-    update(node: PMNode): boolean;
-    destroy(): void;
-    private renderTableMenu;
-    private renderAddColumnBtn;
-    private updateColumnButtonVisibility;
-    private updateTableMenuVisibility;
-    private toggleMenu;
-    private openMenu;
-    private closeMenu;
-}

package/dist/RichTextEditor/Extensions/CustomTableView.js

@@ -1,137 +0,0 @@
-import { TableView as DefaultTableView } from "@tiptap/extension-table";
-import { addColumnAfter, } from "prosemirror-tables";
-/** Walk up from $pos to find the nearest ancestor table. */
-function findTable(state) {
-    const { $from } = state.selection;
-    return findAncestorOfType($from, "table");
-}
-/** Generic ancestor finder by node.type.name */
-function findAncestorOfType($pos, typeName) {
-    var _a;
-    for (let depth = $pos.depth; depth >= 0; depth--) {
-        const node = $pos.node(depth);
-        if (((_a = node.type) === null || _a === void 0 ? void 0 : _a.name) === typeName) {
-            const pos = depth === 0 ? 0 : $pos.before(depth);
-            return { node, pos };
-        }
-    }
-    return null;
-}
-export class CustomTableView extends DefaultTableView {
-    // NOTE: signature has NO getPos
-    constructor(node, cellMinWidth, view) {
-        // keep default resizing/DOM from the base TableView
-        super(node, cellMinWidth);
-        this.isOpen = true;
-        this.view = view;
-        this.addColumnBtn = null;
-        this.tableMenuBtn = null;
-        this.tableMenu = null;
-        this.selectionHandler = null;
-        this.clickOutsideHandler = () => { };
-        // this.renderTableMenu();
-        this.renderAddColumnBtn();
-    }
-    update(node) {
-        const ok = super.update(node);
-        if (ok)
-            this.updateColumnButtonVisibility();
-        // if (ok) this.updateTableMenuVisibility();
-        return ok;
-    }
-    destroy() {
-        if (this.selectionHandler) {
-            this.view.dom.ownerDocument.removeEventListener("selectionchange", this.selectionHandler);
-        }
-    }
-    renderTableMenu() {
-        var _a;
-        const tableMenuContainer = document.createElement("div");
-        tableMenuContainer.className = "tiptap-table-menu-container";
-        this.tableMenuBtn = document.createElement("div");
-        this.tableMenuBtn.textContent = "⋮";
-        this.tableMenuBtn.title = "Table menu";
-        this.tableMenuBtn.className = "tiptap-table-menu-btn";
-        tableMenuContainer.appendChild(this.tableMenuBtn);
-        this.tableMenu = document.createElement("div");
-        this.tableMenu.className = "tiptap-table-menu";
-        this.tableMenu.style.display = this.isOpen ? "block" : "none";
-        tableMenuContainer.appendChild(this.tableMenu);
-        this.tableMenuBtn.addEventListener("mousedown", (e) => e.preventDefault());
-        this.tableMenuBtn.addEventListener("click", () => {
-            this.toggleMenu();
-        });
-        (_a = this.table.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(tableMenuContainer);
-        // Visibility & lifecycle
-        this.selectionHandler = () => this.updateTableMenuVisibility();
-        this.view.dom.ownerDocument.addEventListener("selectionchange", this.selectionHandler);
-        this.updateTableMenuVisibility();
-        this.clickOutsideHandler = (e) => {
-            var _a;
-            if (!this.isOpen)
-                return;
-            const target = e.target;
-            if (!((_a = this.tableMenu) === null || _a === void 0 ? void 0 : _a.contains(target)) && target !== this.tableMenuBtn) {
-                this.closeMenu();
-            }
-        };
-        this.view.dom.ownerDocument.addEventListener("mousedown", this.clickOutsideHandler);
-    }
-    renderAddColumnBtn() {
-        var _a;
-        // Create the left-side button
-        this.addColumnBtn = document.createElement("div");
-        this.addColumnBtn.textContent = "+";
-        this.addColumnBtn.title = "Add column";
-        this.addColumnBtn.className = "tiptap-table-addcol-btn";
-        this.addColumnBtn.addEventListener("mousedown", (e) => e.preventDefault());
-        this.addColumnBtn.addEventListener("click", () => {
-            addColumnAfter(this.view.state, this.view.dispatch);
-            this.view.focus();
-        });
-        // The default TableView sets up a wrapper div at this.dom
-        if (getComputedStyle(this.dom).position === "static") {
-            this.dom.style.position = "relative";
-        }
-        (_a = this.table.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(this.addColumnBtn);
-        // Toggle visibility on selection changes
-        const doc = this.view.dom.ownerDocument;
-        this.selectionHandler = () => this.updateColumnButtonVisibility();
-        doc.addEventListener("selectionchange", this.selectionHandler);
-        this.updateColumnButtonVisibility();
-    }
-    updateColumnButtonVisibility() {
-        const found = findTable(this.view.state);
-        const isInsideThisTable = !!found && found.node === this.node;
-        if (this.addColumnBtn) {
-            this.addColumnBtn.style.display = isInsideThisTable ? "flex" : "none";
-        }
-        if (this.tableMenuBtn) {
-            this.tableMenuBtn.style.display = isInsideThisTable ? "flex" : "none";
-        }
-    }
-    updateTableMenuVisibility() {
-        const found = findTable(this.view.state);
-        const inside = !!found && found.node === this.node;
-        if (!inside)
-            this.closeMenu();
-        // Optional: update position relative to table (e.g., snap left/top)
-        // You can also use the selected cell rect for context-sensitive placement.
-    }
-    toggleMenu() {
-        this.isOpen ? this.closeMenu() : this.openMenu();
-    }
-    openMenu() {
-        this.isOpen = true;
-        if (this.tableMenu) {
-            this.tableMenu.style.display = "block";
-            this.tableMenu.focus();
-        }
-    }
-    closeMenu() {
-        this.isOpen = false;
-        if (this.tableMenu) {
-            this.tableMenu.style.display = "none";
-        }
-    }
-}

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

@@ -1,30 +0,0 @@
-import { Editor } from "@tiptap/react";
-export declare const useToolbarState: (editor: Editor) => {
-    isBold: boolean;
-    canBold: boolean;
-    isItalic: boolean;
-    canItalic: boolean;
-    isStrike: boolean;
-    canStrike: boolean;
-    isCode: boolean;
-    canCode: boolean;
-    canClearMarks: boolean;
-    isParagraph: boolean;
-    isHeading1: boolean;
-    isHeading2: boolean;
-    isHeading3: boolean;
-    isHeading4: boolean;
-    isHeading5: boolean;
-    isHeading6: boolean;
-    isBulletList: boolean;
-    isOrderedList: boolean;
-    isCodeBlock: boolean;
-    isBlockquote: boolean;
-    canUndo: boolean;
-    canRedo: boolean;
-    isTable: boolean;
-    isTableRow: boolean;
-    isTableCell: boolean;
-    isTableHeader: boolean;
-    isInsideTable: boolean;
-};

package/dist/RichTextEditor/Toolbar/useToolbarState.js

@@ -1,44 +0,0 @@
-import { useEditorState } from "@tiptap/react";
-export const useToolbarState = (editor) => {
-    const editorState = useEditorState({
-        editor,
-        selector: (ctx) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-            const isTable = (_a = ctx.editor.isActive("table")) !== null && _a !== void 0 ? _a : false;
-            const isTableRow = (_b = ctx.editor.isActive("tableRow")) !== null && _b !== void 0 ? _b : false;
-            const isTableCell = (_c = ctx.editor.isActive("tableCell")) !== null && _c !== void 0 ? _c : false;
-            const isTableHeader = (_d = ctx.editor.isActive("tableHeader")) !== null && _d !== void 0 ? _d : false;
-            const isInsideTable = isTable || isTableRow || isTableCell || isTableHeader;
-            return {
-                isBold: (_e = ctx.editor.isActive("bold")) !== null && _e !== void 0 ? _e : false,
-                canBold: (_f = ctx.editor.can().chain().toggleBold().run()) !== null && _f !== void 0 ? _f : false,
-                isItalic: (_g = ctx.editor.isActive("italic")) !== null && _g !== void 0 ? _g : false,
-                canItalic: (_h = ctx.editor.can().chain().toggleItalic().run()) !== null && _h !== void 0 ? _h : false,
-                isStrike: (_j = ctx.editor.isActive("strike")) !== null && _j !== void 0 ? _j : false,
-                canStrike: (_k = ctx.editor.can().chain().toggleStrike().run()) !== null && _k !== void 0 ? _k : false,
-                isCode: (_l = ctx.editor.isActive("code")) !== null && _l !== void 0 ? _l : false,
-                canCode: (_m = ctx.editor.can().chain().toggleCode().run()) !== null && _m !== void 0 ? _m : false,
-                canClearMarks: (_o = ctx.editor.can().chain().unsetAllMarks().run()) !== null && _o !== void 0 ? _o : false,
-                isParagraph: (_p = ctx.editor.isActive("paragraph")) !== null && _p !== void 0 ? _p : false,
-                isHeading1: (_q = ctx.editor.isActive("heading", { level: 1 })) !== null && _q !== void 0 ? _q : false,
-                isHeading2: (_r = ctx.editor.isActive("heading", { level: 2 })) !== null && _r !== void 0 ? _r : false,
-                isHeading3: (_s = ctx.editor.isActive("heading", { level: 3 })) !== null && _s !== void 0 ? _s : false,
-                isHeading4: (_t = ctx.editor.isActive("heading", { level: 4 })) !== null && _t !== void 0 ? _t : false,
-                isHeading5: (_u = ctx.editor.isActive("heading", { level: 5 })) !== null && _u !== void 0 ? _u : false,
-                isHeading6: (_v = ctx.editor.isActive("heading", { level: 6 })) !== null && _v !== void 0 ? _v : false,
-                isBulletList: (_w = ctx.editor.isActive("bulletList")) !== null && _w !== void 0 ? _w : false,
-                isOrderedList: (_x = ctx.editor.isActive("orderedList")) !== null && _x !== void 0 ? _x : false,
-                isCodeBlock: (_y = ctx.editor.isActive("codeBlock")) !== null && _y !== void 0 ? _y : false,
-                isBlockquote: (_z = ctx.editor.isActive("blockquote")) !== null && _z !== void 0 ? _z : false,
-                canUndo: (_0 = ctx.editor.can().chain().undo().run()) !== null && _0 !== void 0 ? _0 : false,
-                canRedo: (_1 = ctx.editor.can().chain().redo().run()) !== null && _1 !== void 0 ? _1 : false,
-                isTable,
-                isTableRow,
-                isTableCell,
-                isTableHeader,
-                isInsideTable,
-            };
-        },
-    });
-    return editorState;
-};