@monolith-forensics/monolith-ui 1.1.21 → 1.1.23

package/dist/CheckBox/CheckBox.d.ts

@@ -1,8 +1,10 @@
 import { CSSProperties } from "react";
+import { Size } from "../core";
 interface CheckBoxProps {
     className?: string;
+    size?: Size;
     defaultValue?: boolean;
-    value?: boolean;
+    value?: boolean | undefined;
     partialCheck?: boolean;
     onChange?: (value: boolean) => void;
     style?: CSSProperties;

package/dist/CheckBox/CheckBox.js

@@ -7,7 +7,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = require("react");
 const fa_1 = require("react-icons/fa");
-const CheckBox = (0, styled_components_1.default)(({ className, defaultValue = false, value = false, partialCheck = false, onChange = () => { }, }) => {
+const CheckBox = (0, styled_components_1.default)(({ className, defaultValue = false, value, partialCheck = false, onChange = () => { }, }) => {
+    console.log("defaultValue", defaultValue);
     const [checkedState, setCheckedState] = (0, react_1.useState)(defaultValue);
     const handleChange = (e) => {
         e.stopPropagation();
@@ -15,7 +16,8 @@ const CheckBox = (0, styled_components_1.default)(({ className, defaultValue = f
         onChange(!checkedState);
     };
     (0, react_1.useEffect)(() => {
-        setCheckedState(value);
+        if (value !== undefined)
+            setCheckedState(value);
     }, [value]);
     const _checked = value === undefined ? checkedState : value;
     return ((0, jsx_runtime_1.jsx)("div", { className: className, onClick: handleChange, children: partialCheck === true ? ((0, jsx_runtime_1.jsx)(fa_1.FaRegMinusSquare, { className: "checkbox partial" })) : _checked === true ? ((0, jsx_runtime_1.jsx)(fa_1.FaCheckSquare, { className: "checkbox checked" })) : ((0, jsx_runtime_1.jsx)(fa_1.FaRegSquare, { className: "checkbox unchecked" })) }));
@@ -26,7 +28,20 @@ const CheckBox = (0, styled_components_1.default)(({ className, defaultValue = f
 
   .checkbox {
     color: ${(props) => props.theme.palette.primary.main};
-    font-size: 16px;
+    font-size: ${({ size }) => {
+    switch (size) {
+        case "xs":
+            return "12px";
+        case "sm":
+            return "16px";
+        case "md":
+            return "24px";
+        case "lg":
+            return "32px";
+        default:
+            return "16px";
+    }
+}};
   }
 `;
 exports.default = CheckBox;

package/dist/DateInput/DateInput.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { Size, Variant } from "../core";
 interface DateInputProps {
     className?: string;
-    defaultValue?: string | null;
+    defaultValue?: string | null | undefined;
     format?: string;
     label?: string;
     description?: string;

package/dist/DateInput/DateInput.js

@@ -233,7 +233,7 @@ function parseTimestamp(timestamp, format, utc = false) {
     });
     return segments;
 }
-const DateInput = (0, styled_components_1.default)(({ className, defaultValue = null, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, }) => {
+const DateInput = (0, styled_components_1.default)(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, }) => {
     const [value, setValue] = (0, react_2.useState)(defaultValue);
     const [selectedSegment, setSelectedSegment] = (0, react_2.useState)();
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
@@ -489,7 +489,7 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue =
                                 }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
                         }
                         return ((0, jsx_runtime_1.jsx)(InputSegment, { className: "input", contentEditable: true, suppressContentEditableWarning: true, tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
-                    }), utc && (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), enableCalendar && isOpen && ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: (0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, children: (0, jsx_runtime_1.jsx)(core_1.StyledContent, { maxDropdownHeight: "fit-content", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.Calendar, { value: (0, moment_1.default)(value).toDate(), clearable: false, min: min, max: max, 
+                    }), utc && (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), enableCalendar && isOpen && ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: (0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, children: (0, jsx_runtime_1.jsx)(core_1.StyledContent, { maxDropdownHeight: "fit-content", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.Calendar, { value: value ? (0, moment_1.default)(value).toDate() : undefined, clearable: false, min: min, max: max, 
                                 // hourFormat={hourFormat}
                                 onChange: (date) => {
                                     setValue((prev) => {

package/dist/FieldLabel/FieldLabel.js

@@ -69,7 +69,7 @@ const FieldLabel = (0, styled_components_1.default)(({ className, children, erro
   font-weight: 400;
   margin-bottom: 2.5px;
 
-  font-size: ${({ size }) => size === "xs"
+  font-size: ${({ size = "sm" }) => size === "xs"
     ? "10px"
     : size === "sm"
         ? "12px"
@@ -79,7 +79,7 @@ const FieldLabel = (0, styled_components_1.default)(({ className, children, erro
                 ? "16px"
                 : size === "xl"
                     ? "18px"
-                    : "10px"};
+                    : "12px"};
 
   transition: all 0.2s ease;
   color: ${({ theme, error }) => theme.palette.text.secondary};

package/dist/FileInputField/FileInputField.d.ts

@@ -12,7 +12,8 @@ interface FileInputFieldProps {
     onChange?: (files: File[]) => void;
     onFocus?: () => void;
     dropZoneOptions?: DropzoneOptions;
+    colSpan?: number;
     style?: HTMLAttributes<HTMLDivElement>;
 }
-declare const FileInputField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FileInputFieldProps, never>> & string & Omit<({ className, children, label, error, required, size, onChange, onFocus, dropZoneOptions, style, }: FileInputFieldProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const FileInputField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FileInputFieldProps, never>> & string & Omit<({ className, children, label, error, required, size, onChange, onFocus, dropZoneOptions, colSpan, style, }: FileInputFieldProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default FileInputField;

package/dist/FileInputField/FileInputField.js

@@ -8,7 +8,7 @@ const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_dropzone_1 = require("react-dropzone");
 const __1 = require("..");
-const FileInputField = (0, styled_components_1.default)(({ className, children, label, error, required, size, onChange, onFocus, dropZoneOptions = {}, style = {}, }) => {
+const FileInputField = (0, styled_components_1.default)(({ className, children, label, error, required, size, onChange, onFocus, dropZoneOptions = {}, colSpan, style = {}, }) => {
     const [files, setFiles] = (0, react_1.useState)([]);
     const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
         setFiles(acceptedFiles);
@@ -23,6 +23,7 @@ const FileInputField = (0, styled_components_1.default)(({ className, children,
 }) `
   display: flex;
   flex-direction: column;
+  grid-column: span ${({ colSpan }) => colSpan || 1};
 
   .file-input-container {
     user-select: none;

package/dist/Grid/Grid.d.ts

@@ -1,6 +1,8 @@
 interface GridProps {
+    className?: string;
+    children: React.ReactNode;
     col?: number;
     width?: string | number;
 }
-declare const Grid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
+declare const Grid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<GridProps, never>> & string & Omit<({ className, children }: GridProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default Grid;

package/dist/Grid/Grid.js

@@ -3,8 +3,11 @@ 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 Grid = styled_components_1.default.div `
+const Grid = (0, styled_components_1.default)(({ className, children }) => {
+    return (0, jsx_runtime_1.jsx)("div", { className: className, children: children });
+}) `
   display: grid;
   grid-template-columns: repeat(${({ col }) => col || 1}, minmax(0, 1fr));
   gap: 20px;

package/dist/Input/Input.js

@@ -38,7 +38,7 @@ const Input = (0, styled_components_1.default)((0, react_1.forwardRef)((_a, ref)
                 ? "17px"
                 : size === "xl"
                     ? "19px"
-                    : "11px"};
+                    : "13px"};
 
   height: ${({ size }) => size === "xs"
     ? "26px"
@@ -50,7 +50,7 @@ const Input = (0, styled_components_1.default)((0, react_1.forwardRef)((_a, ref)
                 ? "42px"
                 : size === "xl"
                     ? "50px"
-                    : "26px"};
+                    : "30px"};
 
   min-height: ${({ size }) => size === "xs"
     ? "26px"
@@ -62,7 +62,7 @@ const Input = (0, styled_components_1.default)((0, react_1.forwardRef)((_a, ref)
                 ? "42px"
                 : size === "xl"
                     ? "50px"
-                    : "26px"};
+                    : "30px"};
 
   transition: border 0.1s ease-in-out;
   border-radius: 4px;
@@ -92,7 +92,7 @@ const Input = (0, styled_components_1.default)((0, react_1.forwardRef)((_a, ref)
                 ? "0px 14px"
                 : size === "xl"
                     ? "0px 16px"
-                    : "0px 8px"};
+                    : "0px 10px"};
 
   width: ${({ width }) => {
     if (typeof width === "undefined")
@@ -131,7 +131,7 @@ const Input = (0, styled_components_1.default)((0, react_1.forwardRef)((_a, ref)
                 ? "16px"
                 : size === "xl"
                     ? "18px"
-                    : "10px"};
+                    : "12px"};
   }
 
   &:focus {

package/dist/MonolithUIProvider/GlobalStyle.d.ts

@@ -0,0 +1,4 @@
+declare const GlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
+    theme: any;
+}>;
+export default GlobalStyle;

package/dist/MonolithUIProvider/GlobalStyle.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = require("styled-components");
+const GlobalStyle = (0, styled_components_1.createGlobalStyle) `
+    * {
+        box-sizing: border-box;
+    }
+    
+    body {
+        margin: 0;
+        padding: 0;
+        font-family: ${({ theme }) => theme.typography.fontFamily};
+        background-color: ${({ theme }) => theme.palette.background.default};
+        color: ${({ theme }) => theme.palette.text.primary};
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+
+    #root{
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        font-family: ${({ theme }) => theme.typography.fontFamily};
+        color: ${({ theme }) => theme.palette.text.primary};
+        margin: 0;
+    }
+    
+    h1 {
+        margin: 3px 0px;
+    }
+    
+    h2 {
+        margin: 2px 0px;
+    }
+
+    h3 {
+        margin: 1px 0px;
+    }
+
+    h4, h5, h6 {
+        margin: 0px;
+    }
+
+    a {
+        text-decoration: none;
+        color: unset;
+    }
+`;
+exports.default = GlobalStyle;

package/dist/MonolithUIProvider/MonolithUIProvider.js

@@ -9,6 +9,7 @@ const deepmerge_1 = __importDefault(require("deepmerge"));
 const styled_components_1 = require("styled-components");
 const theme_1 = __importDefault(require("../theme"));
 const react_1 = require("react");
+const GlobalStyle_1 = __importDefault(require("./GlobalStyle"));
 exports.MonolithUIContext = (0, react_1.createContext)(undefined);
 const MonolithUIProvider = ({ children, theme = {}, defaultColorScheme = "dark", }) => {
     const [colorScheme, setColorScheme] = (0, react_1.useState)(defaultColorScheme);
@@ -23,6 +24,6 @@ const MonolithUIProvider = ({ children, theme = {}, defaultColorScheme = "dark",
             colorScheme,
             toggleColorScheme,
             setColorScheme,
-        }, children: (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, { theme: _theme, children: children }) }));
+        }, children: (0, jsx_runtime_1.jsxs)(styled_components_1.ThemeProvider, { theme: _theme, children: [(0, jsx_runtime_1.jsx)(GlobalStyle_1.default, { theme: _theme }), children] }) }));
 };
 exports.default = MonolithUIProvider;

package/dist/Pill/Pill.js

@@ -25,7 +25,13 @@ const Pill = (0, styled_components_1.default)(({ className, children, size = "md
         e.stopPropagation();
         onRemove === null || onRemove === void 0 ? void 0 : onRemove();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("span", { className: "pill-content", children: children }), showRemoveIcon && ((0, jsx_runtime_1.jsx)(StyledButton, { onClick: handleRemove, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, {}) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, children: [(0, jsx_runtime_1.jsx)("span", { className: "pill-content", children: children }), showRemoveIcon && ((0, jsx_runtime_1.jsx)(StyledButton, { onClick: handleRemove, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, {}) }))] }));
 }) `
   user-select: none;
   display: flex;
@@ -41,7 +47,7 @@ const Pill = (0, styled_components_1.default)(({ className, children, size = "md
   color: ${({ theme }) => theme.palette.text.primary};
 
   padding-inline-end: ${({ size, showRemoveIcon }) => {
-    if (showRemoveIcon) {
+    if (showRemoveIcon !== false) {
         return "0px";
     }
     switch (size) {

package/dist/SelectBox/SelectBox.d.ts

@@ -7,7 +7,7 @@ type Option = {
     label: string;
     value: any;
     group?: string;
-    data: any;
+    data?: any;
 };
 interface SelectBoxProps {
     className?: string;

package/dist/SelectBox/SelectBox.js

@@ -378,15 +378,19 @@ const SelectBox = (0, styled_components_1.default)(({ className, data = [], plac
     // Handle default value
     (0, react_2.useEffect)(() => {
         if (defaultValue) {
+            const isOption = defaultValue.value !== undefined;
+            const searchPattern = isOption
+                ? defaultValue.value
+                : defaultValue;
             setSelected(data.find((item) => isObjectArray
-                ? item.value === defaultValue
-                : item === defaultValue) || null);
+                ? item.value === searchPattern
+                : item === searchPattern) || null);
         }
     }, [data, defaultValue, isObjectArray]);
     // handle input value change
     (0, react_2.useEffect)(() => {
         if (inputRef.current) {
-            if (!(selected === null || selected === void 0 ? void 0 : selected.label)) {
+            if (!selected) {
                 inputRef.current.value = "";
             }
             else {
@@ -454,12 +458,16 @@ const SelectBox = (0, styled_components_1.default)(({ className, data = [], plac
                                 : "",
                         }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [actionComponent && (0, jsx_runtime_1.jsx)(ActionMenu, { children: actionComponent }), (0, jsx_runtime_1.jsxs)(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), !loading && grouped
                                         ? groups.map((group, index) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
-                                                    return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (selected === null || selected === void 0 ? void 0 : selected.value) ===
-                                                                ((item === null || item === void 0 ? void 0 : item.value) || item), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }));
+                                                    return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
+                                                                ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
+                                                                    item.value
+                                                                : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
                                                 })] }, group.label)))
                                         : filteredItems.map((item, index) => {
-                                            return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (selected === null || selected === void 0 ? void 0 : selected.value) ===
-                                                        ((item === null || item === void 0 ? void 0 : item.value) || item), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, item.value || item));
+                                            return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
+                                                        ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
+                                                            (item === null || item === void 0 ? void 0 : item.value)
+                                                        : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
                                         })] })] })) }) }))] }));
 }) `
   position: relative;

package/dist/TagBox/TagBox.d.ts

@@ -4,11 +4,11 @@ type Option = {
     label: string;
     value: any;
     group?: string;
-    data: any;
+    data?: any;
 };
 interface TagBoxProps {
     className?: string;
-    data?: Option[];
+    data?: Option[] | string[];
     placeholder?: string;
     arrow?: boolean;
     defaultValue?: Option[];
@@ -24,6 +24,7 @@ interface TagBoxProps {
     allowCustomValue?: boolean;
     searchable?: boolean;
     clearable?: boolean;
+    openOnFocus?: boolean;
     label?: string;
     description?: string;
     required?: boolean;
@@ -34,5 +35,5 @@ interface TagBoxProps {
         data: any;
     }) => JSX.Element;
 }
-declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, loading, renderOption, TooltipContent, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, renderOption, TooltipContent, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default TagBox;

package/dist/TagBox/TagBox.js

@@ -34,6 +34,18 @@ const StyledInputContainer = styled_components_1.default.div `
   pointer-events: all;
   outline: none;
 
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "6px 12px"
+            : size === "lg"
+                ? "7px 14px"
+                : size === "xl"
+                    ? "8px 16px"
+                    : "4px 10px"};
+
   border-radius: 5px;
   transition: border 0.1s ease-in-out;
   border: 1px solid
@@ -146,7 +158,10 @@ const StyledInput = (0, styled_components_1.default)((_a) => {
     color: inherit;
 
     height: 100%;
-    width: 100%;
+    padding: 0px;
+    min-height: 0px;
+
+    min-width: 100px;
 
     &:focus {
       border: 0;
@@ -211,20 +226,6 @@ const PillContainer = styled_components_1.default.div `
   flex-wrap: wrap;
   flex-grow: 1;
 
-  padding: ${({ size }) => size === "xs"
-    ? "0px 8px"
-    : size === "sm"
-        ? "0px 10px"
-        : size === "md"
-            ? "0px 12px"
-            : size === "lg"
-                ? "0px 14px"
-                : size === "xl"
-                    ? "0px 16px"
-                    : "0px 8px"};
-
-  padding-top: 5px;
-
   &[data-empty="true"] {
     display: none;
   }
@@ -282,16 +283,30 @@ const StyledItem = styled_components_1.default.div `
     display: none;
     color: ${(props) => props.theme.palette.primary.main};
   }
+
+  &[data-highlighted="true"] {
+    background-color: ${(props) => props.theme.palette.divider};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
 `;
-const TagBox = (0, styled_components_1.default)(({ className, data = [], placeholder = "Select or enter tags", arrow = true, defaultValue = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "filled", width = "100%", allowCustomValue = true, searchable = false, clearable = false, label, description, required = false, error, loading = false, renderOption, TooltipContent, }) => {
+const TagBox = (0, styled_components_1.default)(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, renderOption, TooltipContent, }) => {
     var _a, _b, _c, _d, _e, _f;
-    const isObjectArray = data.length > 0 && ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.label) !== undefined;
+    const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
     const [selectedItems, setSelectedItems] = (0, react_2.useState)(defaultValue);
+    const [preSelected, setPreSelected] = (0, react_2.useState)(null);
+    const [customItems, setCustomItems] = (0, react_2.useState)([]);
     const [searchValue, setSearchValue] = (0, react_2.useState)("");
     const inputRef = (0, react_2.useRef)(null);
     const scrollContainerRef = (0, react_2.useRef)(null);
     const filteredItems = data
+        .concat(customItems) // Add custom items to the list
+        .filter((item) => {
+        const isSelected = !!selectedItems.find((selectedItem) => isObjectArray
+            ? selectedItem.value === item.value
+            : selectedItem === item);
+        return !isSelected;
+    })
         .filter((item) => {
         const itemValue = (isObjectArray ? item.label : item);
         return itemValue.toLowerCase().includes(searchValue.toLowerCase());
@@ -364,6 +379,18 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
             return [...prev, option];
         });
     }, [onChange]);
+    const handleFocus = () => {
+        var _a, _b;
+        if (openOnFocus) {
+            setIsOpen(true);
+        }
+        if (searchable) {
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (allowCustomValue) {
+            (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
     const handleItemClick = (item) => {
         var _a;
         if ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value)
@@ -371,16 +398,117 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
         setSearchValue("");
         handleChangeSelection(item);
     };
-    const handleRemoveItem = (item) => {
+    const handleRemoveItem = (item, index) => {
         setSelectedItems((prev) => {
-            const newItems = prev.filter((prevItem) => isObjectArray
+            const newItems = prev.filter((prevItem, idx) => isObjectArray
                 ? prevItem.value !== item.value
-                : prevItem !== item);
+                : idx !== index);
             onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
             return newItems;
         });
     };
+    const handleAddItem = (0, react_2.useCallback)((newItem) => {
+        const existingItem = data.concat(customItems).find((item) => {
+            return isObjectArray
+                ? item.label.toLowerCase() === newItem.toLowerCase()
+                : item.toLowerCase() === newItem.toLowerCase();
+        });
+        if (!existingItem) {
+            const newValue = isObjectArray
+                ? { label: newItem, value: newItem }
+                : newItem;
+            setCustomItems([...customItems, newValue]);
+            handleChangeSelection(newValue);
+            onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
+        }
+        else {
+            // check if the item is already selected
+            const isSelected = !!selectedItems.find((selectedItem) => isObjectArray
+                ? selectedItem.value ===
+                    existingItem.value
+                : selectedItem === existingItem);
+            if (!isSelected) {
+                handleChangeSelection(existingItem);
+            }
+        }
+    }, [
+        onItemAdded,
+        isObjectArray,
+        data,
+        handleChangeSelection,
+        selectedItems,
+        customItems,
+    ]);
     const handleKeyDown = (e) => {
+        var _a, _b;
+        const currentInputValue = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        // Escape key
+        if (e.key === "Escape") {
+            const reference = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+            reference === null || reference === void 0 ? void 0 : reference.blur();
+            setSearchValue("");
+            update();
+            setIsOpen(false);
+        }
+        // Enter key
+        if (e.key === "Enter") {
+            if (preSelected) {
+                handleItemClick(preSelected);
+                setPreSelected(null);
+                setSearchValue("");
+                update();
+                return;
+            }
+            else if (currentInputValue &&
+                currentInputValue !== "" &&
+                allowCustomValue) {
+                handleAddItem(currentInputValue);
+                inputRef.current.value = "";
+                setSearchValue("");
+                update();
+            }
+            else {
+                // TODO: decide what to do when user presses enter after typing a search value
+            }
+            // toggleOpen();
+            // setIsOpen(false);
+        }
+        // Backspace key
+        if (e.key === "Backspace" && currentInputValue === "") {
+            setSelectedItems((prev) => {
+                const newItems = prev.slice(0, prev.length - 1);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
+                return newItems;
+            });
+        }
+        // Arrow down
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setPreSelected((prev) => {
+                let newItem = filteredItems[0]; // Loop back to the first item
+                const index = filteredItems.findIndex((item) => isObjectArray
+                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
+                    : item === prev);
+                if (index < filteredItems.length - 1) {
+                    newItem = filteredItems[index + 1];
+                }
+                return newItem;
+            });
+        }
+        // Arrow up
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setPreSelected((prev) => {
+                let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
+                const index = filteredItems.findIndex((item) => isObjectArray
+                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
+                    : item === prev);
+                if (index > 0) {
+                    newItem = filteredItems[index - 1];
+                }
+                return newItem;
+            });
+        }
         // Tab key
         if (e.key === "Tab") {
             setIsOpen(false);
@@ -414,24 +542,32 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
     const scrollActive = scrollEl
         ? (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) > (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.clientHeight)
         : false;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className + " mfTagBox", children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsxs)(StyledInputContainer, { ref: refs.setReference, onClick: toggleOpen, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [(0, jsx_runtime_1.jsxs)(StyledInnerContainer, { "data-button-right": arrow || clearable, children: [(0, jsx_runtime_1.jsx)(PillContainer, { size: size, "data-empty": (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0, children: selectedItems.map((item, index) => ((0, jsx_runtime_1.jsx)(__1.Pill, { size: "xs", onRemove: () => handleRemoveItem(item), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))) }), (searchable || allowCustomValue || selectedItems.length === 0) && ((0, jsx_runtime_1.jsx)(StyledInput, { inputRef: inputRef, onChange: (e) => {
-                                    if (searchFn !== undefined) {
-                                        searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
-                                    }
-                                    else {
-                                        setSearchValue(e.target.value);
-                                    }
-                                    update();
-                                }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue), "data-button-right": arrow || clearable }))] }), clearable &&
-                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), isOpen && ((0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: (0, jsx_runtime_1.jsx)(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0 ||
-                        selectedItems.length === filteredItems.length, children: !loading && grouped
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className + " mfTagBox", children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsxs)(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onClick: () => {
+                    setIsOpen(true);
+                    handleFocus();
+                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [(0, jsx_runtime_1.jsx)(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: (0, jsx_runtime_1.jsxs)(PillContainer, { size: size, children: [selectedItems.map((item, index) => ((0, jsx_runtime_1.jsx)(__1.Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
+                                    allowCustomValue ||
+                                    selectedItems.length === 0) && ((0, jsx_runtime_1.jsx)(StyledInput, { inputRef: inputRef, onChange: (e) => {
+                                        if (searchFn !== undefined) {
+                                            searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
+                                        }
+                                        else {
+                                            setSearchValue(e.target.value);
+                                        }
+                                        update();
+                                    }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue) }))] }) }), clearable &&
+                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), isOpen && ((0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: (0, jsx_runtime_1.jsx)(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0, children: !loading && grouped
                         ? groups.map((group, index) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
-                                    return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(item), "data-selected": selectedItems.some((selectedItem) => selectedItem.value ===
-                                                (item === null || item === void 0 ? void 0 : item.value) || selectedItem === item), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }));
+                                    return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(item), "data-highlighted": isObjectArray
+                                                ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
+                                                    item.value
+                                                : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
                                 })] }, group.label)))
                         : filteredItems.map((item, index) => {
-                            return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(item), "data-selected": selectedItems.some((selectedItem) => selectedItem.value === (item === null || item === void 0 ? void 0 : item.value) ||
-                                        selectedItem === item), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, item.value || item));
+                            return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(item), "data-highlighted": isObjectArray
+                                        ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
+                                            item.value
+                                        : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
                         }) }) }))] }));
 }) `
   position: relative;

package/dist/TextArea/TextArea.js

@@ -25,7 +25,7 @@ const TextArea = (0, styled_components_1.default)(react_textarea_autosize_1.defa
                 ? "17px"
                 : size === "xl"
                     ? "19px"
-                    : "11px"};
+                    : "13px"};
 
   background-color: ${({ theme, variant }) => {
     switch (variant) {
@@ -75,7 +75,7 @@ const TextArea = (0, styled_components_1.default)(react_textarea_autosize_1.defa
                 ? "16px"
                 : size === "xl"
                     ? "18px"
-                    : "10px"};
+                    : "12px"};
   }
 `;
 exports.default = TextArea;

package/dist/TextAreaInput/TextAreaInput.d.ts

@@ -13,7 +13,7 @@ interface TextAreaInputProps {
         rowHeight: number;
     }) => void;
     cacheMeasurements?: boolean;
-    style?: React.CSSProperties;
+    style?: any;
 }
 declare const TextAreaInput: ({ label, error, required, colSpan, size, description, inputRef, maxRows, minRows, onHeightChange, cacheMeasurements, style, }: TextAreaInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TextAreaInput;

package/dist/TextAreaInput/TextAreaInput.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const __1 = require("..");
-const TextAreaInput = ({ label, error, required, colSpan = 1, size = "sm", description, inputRef = null, maxRows, minRows, onHeightChange, cacheMeasurements, style, }) => {
+const TextAreaInput = ({ label, error, required, colSpan = 1, size = "sm", description, inputRef = null, maxRows = 6, minRows = 3, onHeightChange, cacheMeasurements, style, }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             gridColumn: `span ${colSpan}`,
             height: "fit-content",

package/dist/TextInput/TextInput.d.ts

@@ -1,6 +1,7 @@
 import { InputProps } from "../Input/Input";
 import { Size } from "../core";
 interface TextInputProps extends InputProps {
+    className?: string;
     label?: string;
     error?: string;
     required?: boolean;
@@ -8,5 +9,5 @@ interface TextInputProps extends InputProps {
     colSpan?: number;
     description?: string;
 }
-declare const TextInput: React.FC<TextInputProps>;
+declare const TextInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TextInputProps, never>> & string & Omit<({ className, label, error, required, colSpan, description, size, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default TextInput;

package/dist/TextInput/TextInput.js

@@ -15,16 +15,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
 const __1 = require("..");
 const Input_1 = __importDefault(require("../Input/Input"));
-const TextInput = (_a) => {
-    var { label, error, required, colSpan = 1, description, size } = _a, rest = __rest(_a, ["label", "error", "required", "colSpan", "description", "size"]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            gridColumn: `span ${colSpan}`,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            width: "100%",
-        }, children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsx)(Input_1.default, Object.assign({ size: size }, rest))] }));
-};
+const TextInput = (0, styled_components_1.default)((_a) => {
+    var { className, label, error, required, colSpan = 1, description, size = "sm" } = _a, rest = __rest(_a, ["className", "label", "error", "required", "colSpan", "description", "size"]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsx)(Input_1.default, Object.assign({ size: size }, rest))] }));
+}) `
+  grid-column: span ${({ colSpan }) => colSpan || 1};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+`;
 exports.default = TextInput;

package/dist/theme/variants.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.THEMES = void 0;
 const deepmerge_1 = __importDefault(require("deepmerge"));
-const typography_js_1 = __importDefault(require("./typography.js"));
+const typography_1 = __importDefault(require("./typography"));
 // Themes
 exports.THEMES = {
     DARK: "dark",
@@ -49,7 +49,7 @@ const green = {
 };
 const lightVariant = {
     name: exports.THEMES.LIGHT,
-    typography: typography_js_1.default,
+    typography: typography_1.default,
     palette: {
         mode: "light",
         primary: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -13,8 +13,9 @@
     "dist/"
   ],
   "scripts": {
-    "prepublish": "rm -r ./dist && tsc",
-    "release": "yarn prepublish && yarn version --patch"
+    "clean": "rm -r ./dist",
+    "build": "tsc",
+    "release": "yarn version --minor --deferred && yarn build && npm publish && yarn clean"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.16",