@monolith-forensics/monolith-ui 1.1.5 → 1.1.8

package/dist/Flyout/Flyout.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 interface FlyoutProps {
     children: React.ReactNode;
     open?: boolean;

package/dist/Flyout/Flyout.js

@@ -106,6 +106,6 @@ const Flyout = ({ children, open = false, onClose = () => { }, style = {}, close
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: open && ((0, jsx_runtime_1.jsx)(StyledOverlay, { className: "mf-ModalOverlay", lockScroll: true, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: true, children: (0, jsx_runtime_1.jsxs)(StyledContent, Object.assign({ style: style, className: `mf-Modal mf-Flyout`, ref: refs.setFloating }, floatingStyles, { children: [showCloseButton && ((0, jsx_runtime_1.jsx)(StyledClose, { children: (0, jsx_runtime_1.jsx)(StyledButton, { onMouseDown: () => onClose === null || onClose === void 0 ? void 0 : onClose(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { size: 18 }) }) })), (0, jsx_runtime_1.jsx)(StyledInnerContent, { className: "mf-Flyout inner-content", children: children })] })) }) })) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: open && ((0, jsx_runtime_1.jsx)(StyledOverlay, { className: "mf-ModalOverlay", lockScroll: true, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: true, children: (0, jsx_runtime_1.jsxs)(StyledContent, Object.assign({ style: style, className: `mf-Modal mf-Flyout`, ref: refs.setFloating }, floatingStyles, { translate: undefined, children: [showCloseButton && ((0, jsx_runtime_1.jsx)(StyledClose, { children: (0, jsx_runtime_1.jsx)(StyledButton, { onMouseDown: () => onClose === null || onClose === void 0 ? void 0 : onClose(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { size: 18 }) }) })), (0, jsx_runtime_1.jsx)(StyledInnerContent, { className: "mf-Flyout inner-content", children: children })] })) }) })) }));
 };
 exports.default = Flyout;

package/dist/Modal/Modal.js

@@ -1,34 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
-const RadixDialog = __importStar(require("@radix-ui/react-dialog"));
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("@floating-ui/react");
 const StyledOverlay = (0, styled_components_1.default)(react_1.FloatingOverlay) `
@@ -90,7 +66,7 @@ const StyledInnerContent = styled_components_1.default.div `
   overflow-y: auto;
   padding: 25px;
 `;
-const StyledClose = (0, styled_components_1.default)(RadixDialog.Close) `
+const StyledClose = styled_components_1.default.div `
   position: absolute;
   top: 15px;
   right: 15px;
@@ -127,7 +103,7 @@ const Modal = ({ children, open = false, onClose, style = {}, showCloseButton =
     const handleMouseDown = () => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: open && ((0, jsx_runtime_1.jsx)(StyledOverlay, { className: "mf-ModalOverlay", lockScroll: true, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, Object.assign({ context: context, modal: true }, FocusProps, { children: (0, jsx_runtime_1.jsxs)(StyledContent, Object.assign({ style: style, className: "mf-Modal", ref: refs.setFloating }, floatingStyles, { children: [showCloseButton && ((0, jsx_runtime_1.jsx)(StyledClose, { asChild: true, children: (0, jsx_runtime_1.jsx)(StyledButton, { onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18 }) }) })), (0, jsx_runtime_1.jsx)(StyledInnerContent, { children: children })] })) })) })) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: open && ((0, jsx_runtime_1.jsx)(StyledOverlay, { className: "mf-ModalOverlay", lockScroll: true, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, Object.assign({ context: context, modal: true }, FocusProps, { children: (0, jsx_runtime_1.jsxs)(StyledContent, Object.assign({ style: style, className: "mf-Modal", ref: refs.setFloating }, floatingStyles, { children: [showCloseButton && ((0, jsx_runtime_1.jsx)(StyledClose, { children: (0, jsx_runtime_1.jsx)(StyledButton, { onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18 }) }) })), (0, jsx_runtime_1.jsx)(StyledInnerContent, { children: children })] })) })) })) }));
 };
 Modal.Title = Title;
 Modal.SubTitle = SubTitle;

package/dist/core/MonolithThemeProvider.d.ts

@@ -0,0 +1,4 @@
+export function MonolithThemeProvider({ children, theme }: {
+    children: any;
+    theme: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/core/MonolithThemeProvider.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonolithThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = require("styled-components");
+const variants_1 = __importDefault(require("@monolith-ui/theme/variants"));
+const MonolithThemeProvider = ({ children, theme }) => {
+    let selectedTheme = theme
+        ? variants_1.default.find((variant) => variant.name === theme)
+        : variants_1.default[1]; // Default to dark theme
+    if (!selectedTheme) {
+        console.warn(new Error(`The theme ${theme} is not valid`));
+        selectedTheme = variants_1.default[1]; // Default to dark theme
+    }
+    return (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, { theme: selectedTheme, children: children });
+};
+exports.MonolithThemeProvider = MonolithThemeProvider;

package/dist/theme/breakpoints.d.ts

@@ -0,0 +1,10 @@
+export default breakpoints;
+declare namespace breakpoints {
+    namespace values {
+        let xs: number;
+        let sm: number;
+        let md: number;
+        let lg: number;
+        let xl: number;
+    }
+}

package/dist/theme/breakpoints.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const breakpoints = {
+    values: {
+        xs: 0,
+        sm: 600,
+        md: 900,
+        lg: 1200,
+        xl: 1536,
+    },
+};
+exports.default = breakpoints;

package/dist/theme/components.d.ts

@@ -0,0 +1,158 @@
+export default components;
+declare namespace components {
+    namespace MuiButtonBase {
+        namespace defaultProps {
+            let disableRipple: boolean;
+        }
+    }
+    namespace MuiLink {
+        export namespace defaultProps_1 {
+            let underline: string;
+        }
+        export { defaultProps_1 as defaultProps };
+    }
+    namespace MuiCardHeader {
+        export namespace defaultProps_2 {
+            namespace titleTypographyProps {
+                let variant: string;
+            }
+        }
+        export { defaultProps_2 as defaultProps };
+        export namespace styleOverrides {
+            namespace action {
+                let marginTop: string;
+                let marginRight: string;
+            }
+        }
+    }
+    namespace MuiCard {
+        export namespace styleOverrides_1 {
+            namespace root {
+                let borderRadius: string;
+                let boxShadow: string;
+                let backgroundImage: string;
+            }
+        }
+        export { styleOverrides_1 as styleOverrides };
+    }
+    namespace MuiPaper {
+        export namespace styleOverrides_2 {
+            export namespace root_1 {
+                let backgroundImage_1: string;
+                export { backgroundImage_1 as backgroundImage };
+            }
+            export { root_1 as root };
+        }
+        export { styleOverrides_2 as styleOverrides };
+    }
+    namespace MuiPickersDay {
+        export namespace styleOverrides_3 {
+            namespace day {
+                let fontWeight: string;
+            }
+        }
+        export { styleOverrides_3 as styleOverrides };
+    }
+    namespace MuiPickersYear {
+        export namespace styleOverrides_4 {
+            export namespace root_2 {
+                let height: string;
+            }
+            export { root_2 as root };
+        }
+        export { styleOverrides_4 as styleOverrides };
+    }
+    namespace MuiPickersCalendar {
+        export namespace styleOverrides_5 {
+            namespace transitionContainer {
+                let marginTop_1: string;
+                export { marginTop_1 as marginTop };
+            }
+        }
+        export { styleOverrides_5 as styleOverrides };
+    }
+    namespace MuiPickersCalendarHeader {
+        export namespace styleOverrides_6 {
+            let iconButton: {
+                backgroundColor: string;
+                "& > *": {
+                    backgroundColor: string;
+                };
+            };
+            namespace switchHeader {
+                let marginTop_2: string;
+                export { marginTop_2 as marginTop };
+                export let marginBottom: string;
+            }
+        }
+        export { styleOverrides_6 as styleOverrides };
+    }
+    namespace MuiPickersClock {
+        export namespace styleOverrides_7 {
+            namespace container {
+                let margin: string;
+            }
+        }
+        export { styleOverrides_7 as styleOverrides };
+    }
+    namespace MuiPickersClockNumber {
+        export namespace styleOverrides_8 {
+            namespace clockNumber {
+                export let left: string;
+                export let width: string;
+                let height_1: string;
+                export { height_1 as height };
+            }
+        }
+        export { styleOverrides_8 as styleOverrides };
+    }
+    namespace MuiPickerDTHeader {
+        export namespace styleOverrides_9 {
+            let dateHeader: {
+                "& h4": {
+                    fontSize: string;
+                    fontWeight: number;
+                };
+            };
+            let timeHeader: {
+                "& h3": {
+                    fontSize: string;
+                    fontWeight: number;
+                };
+            };
+        }
+        export { styleOverrides_9 as styleOverrides };
+    }
+    namespace MuiPickersTimePicker {
+        export namespace styleOverrides_10 {
+            let hourMinuteLabel: {
+                "& h2": {
+                    fontSize: string;
+                    fontWeight: number;
+                };
+            };
+        }
+        export { styleOverrides_10 as styleOverrides };
+    }
+    namespace MuiPickersToolbar {
+        export namespace styleOverrides_11 {
+            let toolbar: {
+                "& h4": {
+                    fontSize: string;
+                    fontWeight: number;
+                };
+            };
+        }
+        export { styleOverrides_11 as styleOverrides };
+    }
+    namespace MuiChip {
+        export namespace styleOverrides_12 {
+            export namespace root_3 {
+                let borderRadius_1: string;
+                export { borderRadius_1 as borderRadius };
+            }
+            export { root_3 as root };
+        }
+        export { styleOverrides_12 as styleOverrides };
+    }
+}

package/dist/theme/components.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const components = {
+    MuiButtonBase: {
+        defaultProps: {
+            disableRipple: true,
+        },
+    },
+    MuiLink: {
+        defaultProps: {
+            underline: "hover",
+        },
+    },
+    MuiCardHeader: {
+        defaultProps: {
+            titleTypographyProps: {
+                variant: "h6",
+            },
+        },
+        styleOverrides: {
+            action: {
+                marginTop: "-4px",
+                marginRight: "-4px",
+            },
+        },
+    },
+    MuiCard: {
+        styleOverrides: {
+            root: {
+                borderRadius: "0px",
+                boxShadow: "0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%) !important",
+                backgroundImage: "none",
+            },
+        },
+    },
+    MuiPaper: {
+        styleOverrides: {
+            root: {
+                backgroundImage: "none",
+            },
+        },
+    },
+    MuiPickersDay: {
+        styleOverrides: {
+            day: {
+                fontWeight: "300",
+            },
+        },
+    },
+    MuiPickersYear: {
+        styleOverrides: {
+            root: {
+                height: "64px",
+            },
+        },
+    },
+    MuiPickersCalendar: {
+        styleOverrides: {
+            transitionContainer: {
+                marginTop: "6px",
+            },
+        },
+    },
+    MuiPickersCalendarHeader: {
+        styleOverrides: {
+            iconButton: {
+                backgroundColor: "transparent",
+                "& > *": {
+                    backgroundColor: "transparent",
+                },
+            },
+            switchHeader: {
+                marginTop: "2px",
+                marginBottom: "4px",
+            },
+        },
+    },
+    MuiPickersClock: {
+        styleOverrides: {
+            container: {
+                margin: `32px 0 4px`,
+            },
+        },
+    },
+    MuiPickersClockNumber: {
+        styleOverrides: {
+            clockNumber: {
+                left: `calc(50% - 16px)`,
+                width: "32px",
+                height: "32px",
+            },
+        },
+    },
+    MuiPickerDTHeader: {
+        styleOverrides: {
+            dateHeader: {
+                "& h4": {
+                    fontSize: "2.125rem",
+                    fontWeight: 400,
+                },
+            },
+            timeHeader: {
+                "& h3": {
+                    fontSize: "3rem",
+                    fontWeight: 400,
+                },
+            },
+        },
+    },
+    MuiPickersTimePicker: {
+        styleOverrides: {
+            hourMinuteLabel: {
+                "& h2": {
+                    fontSize: "3.75rem",
+                    fontWeight: 300,
+                },
+            },
+        },
+    },
+    MuiPickersToolbar: {
+        styleOverrides: {
+            toolbar: {
+                "& h4": {
+                    fontSize: "2.125rem",
+                    fontWeight: 400,
+                },
+            },
+        },
+    },
+    MuiChip: {
+        styleOverrides: {
+            root: {
+                borderRadius: "16px",
+            },
+        },
+    },
+};
+exports.default = components;

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export default createTheme;
+declare function createTheme(name: any): import("@mui/material/styles").Theme;

package/dist/theme/index.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@mui/lab/themeAugmentation");
+const styles_1 = require("@mui/material/styles");
+const variants_1 = __importDefault(require("./variants"));
+const typography_1 = __importDefault(require("./typography"));
+const breakpoints_1 = __importDefault(require("./breakpoints"));
+const components_1 = __importDefault(require("./components"));
+const shadows_1 = __importDefault(require("./shadows"));
+const createTheme = (name) => {
+    let themeConfig = variants_1.default.find((variant) => variant.name === name);
+    if (!themeConfig) {
+        console.warn(new Error(`The theme ${name} is not valid`));
+        themeConfig = variants_1.default[0];
+    }
+    const componentsStyled = Object.assign(Object.assign({}, components_1.default), { MuiButton: {
+            variants: [
+                {
+                    props: { variant: "outlined-filled" },
+                    style: {
+                        border: "1px solid #CCC",
+                        color: themeConfig.palette.secondary.main,
+                        backgroundColor: themeConfig.palette.background.paper,
+                    },
+                },
+            ],
+        }, MuiMenu: {
+            styleOverrides: {
+                paper: {
+                    minWidth: 150,
+                    backgroundColor: themeConfig.palette.menu.background,
+                    border: `1px solid ${themeConfig.name === "DARK"
+                        ? "rgba(255, 255, 255, 0.12)"
+                        : "rgba(0, 0, 0, 0.12)"}`,
+                },
+            },
+        } });
+    return (0, styles_1.createTheme)({
+        spacing: 4,
+        breakpoints: breakpoints_1.default,
+        // @ts-ignore
+        components: componentsStyled,
+        typography: typography_1.default,
+        palette: themeConfig.palette,
+        zIndex: {
+            mobileStepper: 1800,
+            fab: 1801,
+            speedDial: 1802,
+            appBar: 1803,
+            modal: 1501,
+            snackbar: 1806,
+            tooltip: 1807,
+        },
+    }, {
+        name: themeConfig.name,
+        header: themeConfig.header,
+        footer: themeConfig.footer,
+        sidebar: themeConfig.sidebar,
+        scrollbar: themeConfig.scrollbar,
+        mfBorder: themeConfig.mfBorder,
+    });
+};
+exports.default = createTheme;

package/dist/theme/shadows.d.ts

@@ -0,0 +1,2 @@
+export default shadows;
+declare const shadows: string[];

package/dist/theme/shadows.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function createShadow() {
+    return `box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);`;
+}
+const shadows = [
+    "none",
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+    createShadow(),
+];
+exports.default = shadows;

package/dist/theme/typography.d.ts

@@ -0,0 +1,62 @@
+export default typography;
+declare namespace typography {
+    let fontFamily: string;
+    let fontSize: number;
+    let fontWeightLight: number;
+    let fontWeightRegular: number;
+    let fontWeightMedium: number;
+    let fontWeightBold: number;
+    namespace h1 {
+        let fontSize_1: string;
+        export { fontSize_1 as fontSize };
+        export let fontWeight: number;
+        export let lineHeight: number;
+    }
+    namespace h2 {
+        let fontSize_2: string;
+        export { fontSize_2 as fontSize };
+        let fontWeight_1: number;
+        export { fontWeight_1 as fontWeight };
+        let lineHeight_1: number;
+        export { lineHeight_1 as lineHeight };
+    }
+    namespace h3 {
+        let fontSize_3: string;
+        export { fontSize_3 as fontSize };
+        let fontWeight_2: number;
+        export { fontWeight_2 as fontWeight };
+        let lineHeight_2: number;
+        export { lineHeight_2 as lineHeight };
+    }
+    namespace h4 {
+        let fontSize_4: string;
+        export { fontSize_4 as fontSize };
+        let fontWeight_3: number;
+        export { fontWeight_3 as fontWeight };
+        let lineHeight_3: number;
+        export { lineHeight_3 as lineHeight };
+    }
+    namespace h5 {
+        let fontSize_5: string;
+        export { fontSize_5 as fontSize };
+        let fontWeight_4: number;
+        export { fontWeight_4 as fontWeight };
+        let lineHeight_4: number;
+        export { lineHeight_4 as lineHeight };
+    }
+    namespace h6 {
+        let fontSize_6: string;
+        export { fontSize_6 as fontSize };
+        let fontWeight_5: number;
+        export { fontWeight_5 as fontWeight };
+        let lineHeight_5: number;
+        export { lineHeight_5 as lineHeight };
+    }
+    namespace body1 {
+        let fontSize_7: number;
+        export { fontSize_7 as fontSize };
+    }
+    namespace button {
+        let textTransform: string;
+    }
+}

package/dist/theme/typography.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const typography = {
+    fontFamily: [
+        "Inter",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        '"Segoe UI"',
+        "Roboto",
+        '"Helvetica Neue"',
+        "Arial",
+        "sans-serif",
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+    ].join(","),
+    fontSize: 13,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
+    h1: {
+        fontSize: "2rem",
+        fontWeight: 600,
+        lineHeight: 1.25,
+    },
+    h2: {
+        fontSize: "1.75rem",
+        fontWeight: 600,
+        lineHeight: 1.25,
+    },
+    h3: {
+        fontSize: "1.5rem",
+        fontWeight: 600,
+        lineHeight: 1.25,
+    },
+    h4: {
+        fontSize: "1.125rem",
+        fontWeight: 500,
+        lineHeight: 1.25,
+    },
+    h5: {
+        fontSize: "1.0625rem",
+        fontWeight: 500,
+        lineHeight: 1.25,
+    },
+    h6: {
+        fontSize: "1rem",
+        fontWeight: 500,
+        lineHeight: 1.25,
+    },
+    body1: {
+        fontSize: 13,
+    },
+    button: {
+        textTransform: "none",
+    },
+};
+exports.default = typography;

package/dist/theme/variants.d.ts

@@ -0,0 +1,118 @@
+export namespace THEMES {
+    let DEFAULT: string;
+    let DARK: string;
+    let LIGHT: string;
+}
+export default variants;
+declare const variants: {
+    name: string;
+    palette: {
+        mode: string;
+        primary: {
+            main: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            contrastText: string;
+        };
+        third: {
+            main: string;
+            contrastText: string;
+        };
+        fourth: {
+            main: string;
+            contrastText: string;
+        };
+        background: {
+            default: string;
+            paper: string;
+            alt: string;
+            secondary: string;
+            gradient: string;
+        };
+        menu: {
+            background: string;
+        };
+        signature: {
+            penColor: string;
+            borderColor: string;
+            backgroundColor: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+        };
+        input: {
+            background: string;
+            border: string;
+            borderHover: string;
+            borderFocus: string;
+            borderError: string;
+            borderDisabled: string;
+            text: string;
+            textDisabled: string;
+            placeholder: string;
+        };
+        textArea: {
+            background: string;
+            border: string;
+            borderHover: string;
+            borderFocus: string;
+            borderError: string;
+            borderDisabled: string;
+            text: string;
+            textDisabled: string;
+            placeholder: string;
+        };
+        dataGrid: {
+            hover: string;
+        };
+        action: {
+            hover: string;
+        };
+        divider: string;
+    };
+    header: {
+        color: string;
+        background: string;
+        search: {
+            color: string;
+        };
+        indicator: {
+            background: string;
+        };
+    };
+    footer: {
+        color: string;
+        background: string;
+    };
+    sidebar: {
+        color: string;
+        background: string;
+        active: string;
+        header: {
+            color: string;
+            background: string;
+            brand: {
+                color: string;
+            };
+        };
+        badge: {
+            color: string;
+            background: string;
+        };
+    };
+    scrollbar: {
+        track: string;
+        thumb: string;
+        thumbHover: string;
+    };
+    mfBorder: {
+        primary: string;
+        secondary: string;
+    };
+    zIndex: {
+        snackbar: number;
+    };
+}[];

package/dist/theme/variants.js

@@ -0,0 +1,234 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEMES = void 0;
+const deepmerge_1 = __importDefault(require("deepmerge"));
+// Themes
+exports.THEMES = {
+    DEFAULT: "DEFAULT",
+    DARK: "DARK",
+    LIGHT: "LIGHT",
+};
+const customBlue = {
+    50: "#e9f0fb",
+    100: "#c8daf4",
+    200: "#a3c1ed",
+    300: "#7ea8e5",
+    400: "#6395e0",
+    500: "#4782da",
+    600: "#407ad6",
+    700: "#376fd0",
+    800: "#2f65cb",
+    900: "#2052c2 ",
+};
+const defaultVariant = {
+    name: exports.THEMES.DEFAULT,
+    palette: {
+        mode: "light",
+        primary: {
+            main: customBlue[700],
+            contrastText: "#FFF",
+        },
+        secondary: {
+            main: "#FFF",
+            contrastText: "#000",
+        },
+        third: {
+            main: "#000",
+            contrastText: "#FFF",
+        },
+        fourth: {
+            main: "#ff4500",
+            contrastText: "#FFF",
+        },
+        background: {
+            default: "#FFF",
+            paper: "#FFF",
+            alt: "#ededed",
+            secondary: "#f0f0f0",
+            gradient: "linear-gradient(#FFFFFF 0%, #ccdcf9 50%)",
+        },
+        menu: {
+            background: "#FFF",
+        },
+        signature: {
+            penColor: "#000000",
+            borderColor: "#444444",
+            backgroundColor: "",
+        },
+        text: {
+            primary: "rgba(0, 0, 0, 0.95)",
+            secondary: "rgba(0, 0, 0, 0.75)",
+        },
+        input: {
+            background: "#fbfbfb",
+            border: "rgba(0, 0, 0, 0.2)",
+            borderHover: "#BDBDBD",
+            borderFocus: "#BDBDBD",
+            borderError: "#F44336",
+            borderDisabled: "#E0E0E0",
+            text: "#000",
+            textDisabled: "#6d6d6d",
+            placeholder: "#6d6d6d",
+        },
+        textArea: {
+            background: "#f1f1f4",
+            border: "rgba(0, 0, 0, 0.2)",
+            borderHover: "#BDBDBD",
+            borderFocus: "#BDBDBD",
+            borderError: "#F44336",
+            borderDisabled: "#E0E0E0",
+            text: "#000",
+            textDisabled: "#9E9E9E",
+            placeholder: "#9E9E9E",
+        },
+        dataGrid: {
+            hover: "#efefef",
+        },
+        action: {
+            hover: "rgba(0, 0, 0, 0.1)",
+        },
+        divider: "rgba(0, 0, 0, 0.3)",
+    },
+    header: {
+        color: "rgba(0, 0, 0, 0.95)",
+        background: "#FFF",
+        search: {
+            color: "rgba(0, 0, 0, 0.6)",
+        },
+        indicator: {
+            background: customBlue[600],
+        },
+    },
+    footer: {
+        color: "rgba(0, 0, 0, 0.6)",
+        background: "#FFF",
+    },
+    sidebar: {
+        color: "rgba(0, 0, 0, 0.95)",
+        background: "#233044",
+        active: "#455466",
+        header: {
+            color: "#FFF",
+            background: "#233044",
+            brand: {
+                color: customBlue[500],
+            },
+        },
+        badge: {
+            color: "#FFF",
+            background: customBlue[500],
+        },
+    },
+    scrollbar: {
+        track: "#f1f1f1",
+        thumb: "#DDD",
+        thumbHover: "#BBB",
+    },
+    mfBorder: {
+        primary: "#f1f1f1",
+        secondary: "#DDD",
+    },
+    zIndex: {
+        snackbar: 999999,
+    },
+};
+const darkVariant = (0, deepmerge_1.default)(defaultVariant, {
+    name: exports.THEMES.DARK,
+    palette: {
+        mode: "dark",
+        divider: "rgba(255, 255, 255, 0.15)",
+        action: {
+            hover: "rgba(255, 255, 255, 0.05)",
+        },
+        primary: {
+            main: customBlue[500],
+            contrastText: "#FFF",
+        },
+        secondary: {
+            main: "#3f3f3f",
+            contrastText: "#FFF",
+        },
+        background: {
+            default: "#222222",
+            paper: "#333333",
+            alt: "#1e1e1e",
+            secondary: "#303030",
+            gradient: "linear-gradient(#333333 0%, #1e1e1e 50%)",
+        },
+        menu: {
+            background: "#222222",
+        },
+        text: {
+            primary: "rgba(255, 255, 255, 0.95)",
+            secondary: "rgba(255, 255, 255, 0.6)",
+        },
+        divider: "rgba(255, 255, 255, 0.15)",
+        signature: {
+            penColor: "#eeeeee",
+            borderColor: "#999999",
+            backgroundColor: "rgba(60,60,60,1)",
+        },
+        input: {
+            background: "#272727",
+            border: "#ffffff1a",
+            borderHover: "#BDBDBD",
+            borderFocus: "#BDBDBD",
+            borderError: "#F44336",
+            borderDisabled: "#E0E0E0",
+            text: "#000",
+            textDisabled: "#6d6d6d",
+            placeholder: "#6d6d6d",
+        },
+        textArea: {
+            background: "#292929",
+            border: "rgba(255, 255, 255, 0.2)",
+            borderHover: "#BDBDBD",
+            borderFocus: "#BDBDBD",
+            borderError: "#F44336",
+            borderDisabled: "#E0E0E0",
+            text: "#000",
+            textDisabled: "#9E9E9E",
+            placeholder: "#9E9E9E",
+        },
+        dataGrid: {
+            hover: "#2f2f2f",
+        },
+    },
+    header: {
+        color: "rgba(255, 255, 255, 0.95)",
+        background: "#1B2635",
+        search: {
+            color: "rgba(255, 255, 255, 0.6)",
+        },
+    },
+    footer: {
+        color: "rgba(255, 255, 255, 0.6)",
+        background: "#222222",
+    },
+    sidebar: {
+        color: "rgba(255, 255, 255, 0.95)",
+        background: "#181818",
+        active: "#313131",
+        header: {
+            color: "#FFF",
+            background: "#181818",
+            brand: {
+                color: "#FFFFFF",
+            },
+        },
+    },
+    scrollbar: {
+        thumb: "#3f3f3f",
+        track: "#252525",
+        thumbHover: "#151515",
+    },
+    mfBorder: {
+        primary: "#3f3f3f",
+        secondary: "#252525",
+    },
+});
+const variants = [defaultVariant, darkVariant];
+exports.default = variants;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.5",
+  "version": "1.1.8",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -18,10 +18,15 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.16",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-switch": "^1.0.7",
     "deepmerge": "^4.3.1",
     "lucide-react": "^0.378.0",
     "react-textarea-autosize": "^8.5.3",
-    "styled-components": "^6.1.11"
+    "styled-components": "^6.1.11",
+    "use-debounce": "^10.0.0",
+    "react-dropzone": "^14.2.3",
+    "moment": "^2.29.1",
+    "@mui/icons-material": "^5.11.0"
   },
   "peerDependencies": {
     "react": "18.2.0"