@monolith-forensics/monolith-ui 1.3.71 → 1.3.92

package/dist/FieldLabel/FieldLabel.d.ts

@@ -7,7 +7,7 @@ interface InfoComponentProps {
     label?: string | ReactNode;
 }
 export declare const InfoComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<InfoComponentProps, never>> & string & Omit<({ className, children, description, label }: InfoComponentProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined, keyof import("react").Component<any, {}, any>>;
-interface FieldLabelProps {
+export interface FieldLabelProps {
     className?: string;
     children?: ReactNode;
     error?: string;
@@ -15,6 +15,7 @@ interface FieldLabelProps {
     size?: Size;
     asterisk?: boolean;
     style?: React.CSSProperties;
+    actionComponent?: ReactNode;
 }
-declare const FieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FieldLabelProps, never>> & string & Omit<({ className, children, error, description, size, style, }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const FieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FieldLabelProps, never>> & string & Omit<({ className, children, error, description, size, style, actionComponent, }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default FieldLabel;

package/dist/FieldLabel/FieldLabel.js

@@ -24,22 +24,38 @@ export const InfoComponent = styled(({ className, children, description, label }
     margin-bottom: 5px;
   }
 `;
-const FieldLabel = styled(({ className, children, error, description, size = "sm", style, }) => {
-    return (_jsxs("div", { className: className + " FieldLabel", style: style, children: [_jsx(InfoComponent, { description: description, label: children, children: _jsx("div", { className: "label", children: children }) }), error && (_jsx("div", { className: "error", title: error, children: error || "Invalid Value" }))] }));
+const FieldLabel = styled(({ className, children, error, description, size = "sm", style, actionComponent, }) => {
+    return (_jsxs("div", { className: className + " FieldLabel", style: style, children: [_jsxs("div", { className: "label-content", children: [_jsx(InfoComponent, { description: description, label: children, children: _jsx("div", { className: "label", children: children }) }), error && (_jsx("div", { className: "error", title: error, children: error || "Invalid Value" }))] }), actionComponent && (_jsx("div", { className: "action-section", children: actionComponent }))] }));
 }) `
   user-select: none;
-  font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
+  font-family:
+    apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
   user-select: none;
   display: flex;
   flex-direction: row;
-  align-items: baseline;
-  gap: 5px;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
 
   min-height: 15px;
   font-weight: 400;
   margin-bottom: 2.5px;
 
+  .label-content {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 5px;
+    flex: 1;
+  }
+
+  .action-section {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+  }
+
   font-size: ${({ size = "sm" }) => size === "xs"
     ? "10px"
     : size === "sm"

package/dist/FieldLabel/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./FieldLabel";
+export type { FieldLabelProps } from "./FieldLabel";

package/dist/ItemTotal/ItemTotal.d.ts

@@ -1,11 +1,9 @@
 import React from "react";
-interface ItemTotalProps {
+export type 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 };
+};
+export 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>>;

package/dist/ItemTotal/ItemTotal.js

@@ -1,6 +1,6 @@
 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", }) => {
+export 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,
@@ -19,4 +19,3 @@ const ItemTotal = styled(({ className, total, Icon, style = {}, title = "Total I
     color: ${({ theme }) => theme.palette.text.primary};
   }
 `;
-export default ItemTotal;

package/dist/ItemTotal/index.d.ts

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

package/dist/ItemTotal/index.js

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

package/dist/SearchableTextArea/SearchableTextArea.d.ts

@@ -0,0 +1,25 @@
+export interface SearchableTextAreaProps {
+    label?: string;
+    data?: Array<{
+        label: string;
+        value: string;
+    }>;
+    searchable?: boolean;
+    allowCustomValue?: boolean;
+    required?: boolean;
+    error?: string;
+    description?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    selectProps?: Record<string, any>;
+    textAreaPlaceholder?: string;
+    textAreaMinRows?: number;
+    textAreaMaxRows?: number;
+    textAreaProps?: Record<string, any>;
+    initialValue?: string;
+}
+declare function SearchableTextArea({ label, data, searchable, allowCustomValue, required, error, description, selectProps, value, onChange, textAreaPlaceholder, textAreaMinRows, textAreaMaxRows, textAreaProps, initialValue, }: SearchableTextAreaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SearchableTextArea {
+    var displayName: string;
+}
+export default SearchableTextArea;

package/dist/SearchableTextArea/SearchableTextArea.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import styled from "styled-components";
+import { MoreHorizontal } from "lucide-react";
+import { SelectBox } from "../SelectBox";
+import FieldLabel from "../FieldLabel";
+import DropDownMenu from "../DropDownMenu";
+// Wrapper components for layout
+const CombinedInputWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+`;
+const TextAreaRow = styled.div `
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+`;
+const SelectBoxWrapper = styled.div `
+  position: relative;
+  width: 100%;
+`;
+const StyledSelectBox = styled(SelectBox) `
+  /* Completely hide the SelectBox but keep it functional for dropdown */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  pointer-events: auto; /* Allow interactions for dropdown */
+  z-index: -1;
+`;
+const StyledFieldLabel = styled(FieldLabel) `
+  .action-section {
+    margin-left: 2px !important; /* Reduce spacing from default 8px */
+  }
+
+  .label-content {
+    gap: 2px !important; /* Reduce gap from default 5px */
+  }
+`;
+// Styled TextArea that is now the primary input
+const StyledTextArea = styled.textarea `
+  border: 1px solid
+    ${({ theme, $hasError }) => $hasError ? theme.palette.error.main : theme.palette.input.border};
+  border-radius: 4px;
+  padding: 10px;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 13px;
+  background-color: ${({ theme }) => theme.palette.input.background};
+  color: ${({ theme }) => theme.palette.text.primary};
+  resize: none;
+  outline: none;
+  transition: border-color 0.2s ease;
+  width: 100%;
+  min-height: ${({ $minRows = 3 }) => $minRows * 1.5 + 1.5}em;
+  ${({ $maxRows }) => $maxRows && `max-height: ${$maxRows * 1.5 + 1.5}em;`}
+  pointer-events: auto;
+  user-select: text;
+  z-index: 2;
+  position: relative;
+
+  &:focus {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+    z-index: 3;
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.palette.text.secondary};
+    opacity: 0.5;
+  }
+`;
+function SearchableTextArea({ label, data, searchable, allowCustomValue, required, error, description, selectProps = {}, value, onChange, textAreaPlaceholder, textAreaMinRows = 3, textAreaMaxRows, textAreaProps = {}, initialValue = "", }) {
+    // Use controlled value if provided, otherwise use internal state
+    const [internalValue, setInternalValue] = useState(initialValue);
+    const [selectValue, setSelectValue] = useState(null);
+    const [selectKey, setSelectKey] = useState(0); // Force rerender key
+    // Ref to control the SelectBox dropdown
+    const selectBoxRef = useRef(null);
+    const textAreaValue = value !== undefined ? value : internalValue;
+    // Handle SelectBox selection - overrides textarea content then clears selectbox
+    const handleSelectChange = (newValue) => {
+        if (newValue) {
+            // Override textarea content with selected value
+            setInternalValue(newValue);
+            // Also call onChange if provided (for form integration)
+            if (onChange) {
+                onChange(newValue);
+            }
+            setTimeout(() => {
+                setSelectValue(null);
+                setSelectKey((prev) => prev + 1);
+            }, 100);
+        }
+        else {
+            setSelectValue(newValue);
+        }
+    };
+    // Handle textarea changes
+    const handleTextAreaChange = (event) => {
+        const newValue = event.target.value;
+        // Always update internal state for display purposes
+        setInternalValue(newValue);
+        // Also call onChange if provided (for form integration)
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+    // Handle keyboard shortcuts for dropdown
+    const handleTextAreaKeyDown = (event) => {
+        // Ctrl/Cmd + Space to open dropdown
+        if ((event.ctrlKey || event.metaKey) && event.code === "Space") {
+            event.preventDefault();
+            handleSearchClick();
+        }
+    };
+    const handleSearchClick = () => {
+        if (selectBoxRef.current) {
+            const selectInput = selectBoxRef.current.querySelector("input");
+            if (selectInput) {
+                selectInput.focus();
+                selectInput.click();
+            }
+        }
+    };
+    // Used to create red border when zod validation detects errors
+    const hasError = Boolean(error);
+    return (_jsxs(CombinedInputWrapper, { children: [label && (_jsx(StyledFieldLabel, { asterisk: required, error: error, description: description, actionComponent: _jsx(DropDownMenu, { data: [
+                        {
+                            value: "search",
+                            label: "Select Recent Entry",
+                            visible: true,
+                        },
+                    ], variant: "text", size: "xs", arrow: false, onItemSelect: (item) => {
+                        if (item.value === "search") {
+                            handleSearchClick();
+                        }
+                    }, buttonProps: {
+                        style: {
+                            minWidth: "auto",
+                            border: "none",
+                            background: "transparent",
+                            padding: "0",
+                            margin: "0",
+                            height: "16px",
+                            width: "16px",
+                        },
+                    }, children: _jsx(MoreHorizontal, { size: 16 }) }), children: label })), _jsx(TextAreaRow, { children: _jsx(StyledTextArea, Object.assign({ placeholder: textAreaPlaceholder || "Enter details about the move", "$minRows": textAreaMinRows, "$maxRows": textAreaMaxRows, "$hasError": hasError, value: textAreaValue, onChange: handleTextAreaChange, onKeyDown: handleTextAreaKeyDown }, textAreaProps)) }), _jsx(SelectBoxWrapper, { ref: selectBoxRef, children: _jsx(StyledSelectBox, Object.assign({ data: data, searchable: searchable, allowCustomValue: allowCustomValue, arrow: false, value: selectValue || undefined, onChange: handleSelectChange, hasError: hasError }, selectProps), selectKey) })] }));
+}
+SearchableTextArea.displayName = "SearchableTextArea";
+export default SearchableTextArea;

package/dist/SearchableTextArea/index.d.ts

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

package/dist/SearchableTextArea/index.js

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

package/dist/SelectBox/SelectBox.d.ts

@@ -1,5 +1,4 @@
 import { SelectBoxProps } from "..";
-export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    width?: string | number | null;
-}>> & string;
+import { StyledInputContainer } from "./select-box.styled-components";
+export { StyledInputContainer };
 export declare const SelectBox: React.FC<SelectBoxProps>;

package/dist/SelectBox/SelectBox.js

@@ -1,253 +1,69 @@
-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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled, { useTheme } from "styled-components";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
 import { useFloating, flip, offset, FloatingPortal, autoUpdate, } from "@floating-ui/react";
-import { useCallback, useEffect, useRef, useState, } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Input, FieldLabel, Tooltip, Loader } from "..";
 import { useDebouncedCallback } from "use-debounce";
 import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
-export const StyledInputContainer = styled.div `
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  border: none;
-  outline: none;
-  height: fit-content;
-
-  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`;
-}};
-
-  &[data-disabled="true"] {
-    opacity: 0.5;
-    pointer-events: none;
-
-    > * {
-      pointer-events: none;
-    }
-  }
-`;
-const StyledInnerItemContainer = styled.div `
-  overflow-y: auto;
-
-  &[data-scroll-active="true"] {
-    padding-right: 5px;
-  }
-`;
-const EmptyComponent = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 5px;
-  font-size: 12px;
-  font-weight: 500;
-  color: ${(props) => props.theme.palette.text.secondary};
-`;
-const GroupTitle = styled((_a) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsxs("div", Object.assign({ className: className }, props, { children: [_jsx("div", { className: "group-line" }), _jsx("div", { className: "group-label", children: children }), _jsx("div", { className: "group-line" })] })));
-}) `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-
-  color: ${(props) => props.theme.palette.text.secondary};
-
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
-
-  .group-label {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: fit-content;
-    min-width: fit-content;
-
-    font-weight: 500;
-
-    font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
-  }
-
-  .group-line {
-    border-top: 1px solid ${(props) => props.theme.palette.divider};
-    width: 100%;
-  }
-`;
-const ActionMenu = styled.div ``;
-const StyledItem = styled.div `
-  color: ${(props) => props.theme.palette.text.primary};
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  min-height: 25px;
-  padding: 7px 10px;
-  position: relative;
-  user-select: none;
-  outline: none;
-
-  cursor: pointer;
-
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-
-  font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
-
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
-
-  &:hover {
-    background-color: ${(props) => props.theme.palette.action.hover};
-    color: ${(props) => props.theme.palette.text.primary};
-  }
-
-  // Custom prop, checks if item is selected and returns true
-  &[data-selected="true"] {
-    background-color: ${(props) => props.theme.palette.divider};
-    color: ${(props) => props.theme.palette.text.primary};
-  }
-
-  &[data-disabled] {
-    color: ${(props) => props.theme.palette.text.secondary};
-    opacity: 0.5;
-    pointer-events: none;
-  }
-`;
-/**
- *
- * Attempts to resolve the value to an Option object
- * if the value is a string, it will attempt to find the corresponding Option object
- * if the value is an Option object, it will attempt to find the corresponding Option object
- * if the value is not found, it will return the value as is so that custom values can be displayed without a lookup
- */
-const resolveValue = (value, data) => {
-    let foundOption;
-    if (value === undefined)
-        return undefined;
-    if (value === null)
-        return null;
-    if (typeof value === "string") {
-        foundOption = data.find((item) => item.value === value);
-    }
-    else if (typeof value === "number") {
-        foundOption = data.find((item) => item.value === value);
-    }
-    else if (typeof value === "object") {
-        foundOption = data.find((item) => item.value == value.value);
-    }
-    if (foundOption)
-        return foundOption;
-    if (typeof value === "string") {
-        return { value, label: value };
-    }
-    if (typeof value === "number") {
-        return { value, label: value.toString() };
-    }
-    return value;
-};
-const StyledContainer = styled.div `
-  position: relative;
-  cursor: pointer;
-  width: 100%;
-`;
-export const SelectBox = ({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
+import { DEFAULT_DROPDOWN_HEIGHT, DROPDOWN_OFFSET, getEmptyMessage, KEYBOARD_KEYS, resolveValue, } from "./select-box.utils";
+import { StyledInputContainer, StyledInnerItemContainer, EmptyComponent, GroupTitle, ActionMenu, StyledItem, StyledContainer, } from "./select-box.styled-components";
+// Re-export for backward compatibility
+export { StyledInputContainer };
+export const SelectBox = ({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
 DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
+    // Component setup and data processing
     const theme = useTheme();
-    const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
-    // Determine controlled status only once at mount
+    // Type guard to check if an item is an Option object
+    const isOption = (item) => {
+        return (typeof item === "object" &&
+            item !== null &&
+            typeof item.label === "string" &&
+            item.value !== undefined);
+    };
     const isControlled = useRef(value !== undefined);
-    const resolvedOptions = data.map((item) => ({
-        value: isObjectArray ? item.value : item,
-        label: isObjectArray ? item.label : item,
-        group: isObjectArray ? item.group : undefined,
-        disabled: isObjectArray ? item.disabled : undefined,
-        data: isObjectArray ? item.data : undefined,
-    }));
-    /**
-     * Get the correct option if the default value is a string
-     * otherwise, use the default value as is
-     * this allows setting the value with a string or Option object
-     */
+    const resolvedOptions = data.map((item) => {
+        if (isOption(item)) {
+            return {
+                value: item.value,
+                label: item.label,
+                group: item.group,
+                disabled: item.disabled,
+                data: item.data,
+            };
+        }
+        else {
+            // Treat as string
+            const stringValue = item;
+            return {
+                value: stringValue,
+                label: stringValue,
+                group: undefined,
+                disabled: undefined,
+                data: undefined,
+            };
+        }
+    });
     const resolvedDefaultValue = resolveValue(defaultValue, resolvedOptions);
-    /**
-     * Get the correct option if the value is a string
-     * otherwise, use the value as is
-     * this allows setting the value with a string or Option object
-     */
     const resolvedValue = resolveValue(value, resolvedOptions);
+    // Value and input state
     const [valueState, setValueState] = useState(resolvedDefaultValue);
-    /**
-     * Get the correct value based on whether the component is controlled or not
-     * if controlled, use the controlled value, otherwise use the resolved value
-     */
     const _value = isControlled.current ? resolvedValue : valueState;
     const [inputValue, setInputValue] = useState(typeof _value === "object" ? (_value === null || _value === void 0 ? void 0 : _value.label) || "" : _value || "");
+    // Dropdown state
     const [isOpen, setIsOpen] = useState(false);
-    const [searchValue, setSearchValue] = useState("");
-    const [customItems, setCustomItems] = useState([]);
     const [placement, setPlacement] = useState("bottom-start");
     const [dropDownHeight, setDropDownHeight] = useState(null);
+    // Search and custom items state
+    const [searchValue, setSearchValue] = useState("");
+    const [customItems, setCustomItems] = useState([]);
+    // Refs
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
+    // ============================================================================
+    // Data Processing and Filtering
+    // ============================================================================
     // Remove duplicates from search dropdown data
     const uniqueItems = Array.from(new Map([...resolvedOptions, ...customItems].map((item) => [item.value, item])).values());
     // search filter for dropdown items
@@ -293,6 +109,9 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         }))
             .sort((a, b) => a.label.localeCompare(b.label))
         : [];
+    // ============================================================================
+    // Floating UI Setup
+    // ============================================================================
     const { refs, floatingStyles, update } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
@@ -302,6 +121,9 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         middleware: [flip(), offset(5)],
         whileElementsMounted: autoUpdate,
     });
+    // ============================================================================
+    // Event Handlers
+    // ============================================================================
     const toggleOpen = () => {
         setIsOpen((prev) => {
             if (!prev) {
@@ -369,15 +191,10 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         setInputValue((option === null || option === void 0 ? void 0 : option.label) || "");
         onChange === null || onChange === void 0 ? void 0 : onChange(option === null || option === void 0 ? void 0 : option.value, option);
     }, [onChange]);
-    const handleAddItem = useCallback((newItem) => {
-        setCustomItems((prev) => [...prev, newItem]);
-        onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newItem);
-    }, [onItemAdded, isObjectArray, handleChangeSelection]);
     const handleKeyDown = (e) => {
         var _a;
-        const currentInputValue = inputValue;
         // Escape key
-        if (e.key === "Escape") {
+        if (e.key === KEYBOARD_KEYS.ESCAPE) {
             const reference = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
             reference === null || reference === void 0 ? void 0 : reference.blur();
             setSearchValue("");
@@ -386,12 +203,12 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             return;
         }
         // Enter key
-        if (e.key === "Enter") {
+        if (e.key === KEYBOARD_KEYS.ENTER) {
             toggleOpen();
             return;
         }
         // Arrow down
-        if (e.key === "ArrowDown") {
+        if (e.key === KEYBOARD_KEYS.ARROW_DOWN) {
             e.preventDefault();
             let newItem = filteredItems[0]; // Loop back to the first item
             // Find the index of the currently selected item
@@ -410,7 +227,7 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             return;
         }
         // Arrow up
-        if (e.key === "ArrowUp") {
+        if (e.key === KEYBOARD_KEYS.ARROW_UP) {
             e.preventDefault();
             let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
             // Find the index of the currently selected item
@@ -432,7 +249,7 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             return;
         }
         // Tab key
-        if (e.key === "Tab") {
+        if (e.key === KEYBOARD_KEYS.TAB) {
             if (!_value)
                 setInputValue("");
             setSearchValue("");
@@ -449,19 +266,50 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         if (searchable) {
             setSearchValue(value);
             update();
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
         }
     };
-    const referenceEl = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
-    const contentWidth = ((_e = (_d = (_c = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getClientRects) === null || _c === void 0 ? void 0 : _c.call(referenceEl)) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.width) || "100%";
+    // ============================================================================
+    // Render Helper Functions
+    // ============================================================================
+    const renderOptionItem = (item, index) => (_jsx(Tooltip, { content: OptionTooltip ? _jsx(OptionTooltip, { data: item.data }) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
+    const renderActionButton = () => {
+        if (clearable && (_value || !!inputValue)) {
+            return (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                } }));
+        }
+        if (arrow) {
+            return (_jsx(ArrowButton, { onClick: (e) => {
+                    e.preventDefault();
+                }, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggleOpen();
+                } }));
+        }
+        return null;
+    };
+    // ============================================================================
+    // Computed Values
+    // ============================================================================
+    const referenceEl = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
+    const contentWidth = ((_d = (_c = (_b = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getClientRects) === null || _b === void 0 ? void 0 : _b.call(referenceEl)) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.width) || "100%";
     const scrollEl = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
     const scrollActive = scrollEl
         ? (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) > (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.clientHeight)
         : false;
     // get height between bottom of the floating container and the bottom of the viewport
-    const bottomHeight = window.innerHeight - ((_f = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.bottom) - 10;
+    const bottomHeight = window.innerHeight -
+        ((_e = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.bottom) -
+        DROPDOWN_OFFSET;
     // get height between top of the floating container and the top of the viewport
-    const topHeight = (((_g = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.top) - 10);
+    const topHeight = (((_f = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.top) -
+        DROPDOWN_OFFSET);
+    // ============================================================================
+    // Effects
+    // ============================================================================
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
@@ -480,15 +328,6 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating, refs.reference, handleBlur]);
-    // Sync inputValue with controlled value changes
-    useEffect(() => {
-        if (isControlled.current && resolvedValue !== undefined) {
-            const newLabel = typeof resolvedValue === "object"
-                ? (resolvedValue === null || resolvedValue === void 0 ? void 0 : resolvedValue.label) || ""
-                : resolvedValue || "";
-            setInputValue(newLabel);
-        }
-    }, [resolvedValue, isControlled]);
     // handle scroll item into view
     useEffect(() => {
         var _a, _b;
@@ -498,7 +337,7 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
         }
     }, [_value]);
     useEffect(() => {
-        if (bottomHeight < 250) {
+        if (bottomHeight < DEFAULT_DROPDOWN_HEIGHT) {
             setPlacement("top-start");
             setDropDownHeight(topHeight);
         }
@@ -511,35 +350,22 @@ DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
             setDropDownHeight(bottomHeight);
         };
     }, [topHeight, bottomHeight, isOpen]);
-    return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (_value || !!inputValue) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                        } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
-                            e.preventDefault();
-                        }, onMouseDown: (e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            toggleOpen();
-                        } })) : null] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
+    // ============================================================================
+    // Render
+    // ============================================================================
+    return (_jsxs(StyledContainer, { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), renderActionButton()] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
                         containerRef.current = ref;
                         refs.setFloating(ref);
                     }, style: floatingStyles, className: "mfFloating", children: _jsxs(StyledContent, Object.assign({ className: "mfFloatingContent", style: {
                             width: contentWidth,
                             maxWidth: contentWidth,
                             maxHeight: DropDownProps.autoHeight
-                                ? (dropDownHeight || 250) - 10
+                                ? (dropDownHeight || DEFAULT_DROPDOWN_HEIGHT) -
+                                    DROPDOWN_OFFSET
                                 : "",
                         }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && actionComponent && (_jsx(ActionMenu, { onClick: () => {
                                     setIsOpen(false);
-                                }, children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: allowCustomValue && searchValue
-                                    ? `Add "${searchValue}" as a new item`
-                                    : !!searchValue
-                                        ? `No items found`
-                                        : "No items" })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
-                                    ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
-                                                return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
-                                            })] }, group.label)))
-                                    : filteredItems.map((item, index) => {
-                                        return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
-                                    }) }))] })) }) }))] }));
+                                }, children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: getEmptyMessage(allowCustomValue, searchValue) })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
+                                    ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => renderOptionItem(item, index))] }, group.label)))
+                                    : filteredItems.map((item, index) => renderOptionItem(item, index)) }))] })) }) }))] }));
 };

package/dist/SelectBox/select-box.styled-components.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { Size } from "../core";
+export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    width?: string | number | null;
+}>> & string;
+export declare const StyledInnerItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface GroupTitleProps {
+    className?: string;
+    children?: ReactNode;
+    size?: Size;
+}
+export declare const GroupTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<GroupTitleProps, never>> & string & Omit<({ className, children, ...props }: GroupTitleProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const ActionMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: Size;
+}>> & string;
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/SelectBox/select-box.styled-components.js

@@ -0,0 +1,172 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+export const StyledInputContainer = styled.div `
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  border: none;
+  outline: none;
+  height: fit-content;
+
+  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`;
+}};
+
+  &[data-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+
+    > * {
+      pointer-events: none;
+    }
+  }
+`;
+export const StyledInnerItemContainer = styled.div `
+  overflow-y: auto;
+
+  &[data-scroll-active="true"] {
+    padding-right: 5px;
+  }
+`;
+export const EmptyComponent = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+export const GroupTitle = styled((_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsxs("div", Object.assign({ className: className }, props, { children: [_jsx("div", { className: "group-line" }), _jsx("div", { className: "group-label", children: children }), _jsx("div", { className: "group-line" })] })));
+}) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+
+  .group-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: fit-content;
+    min-width: fit-content;
+
+    font-weight: 500;
+
+    font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+  }
+
+  .group-line {
+    border-top: 1px solid ${(props) => props.theme.palette.divider};
+    width: 100%;
+  }
+`;
+export const ActionMenu = styled.div ``;
+export const StyledItem = styled.div `
+  color: ${(props) => props.theme.palette.text.primary};
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  min-height: 25px;
+  padding: 7px 10px;
+  position: relative;
+  user-select: none;
+  outline: none;
+
+  cursor: pointer;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  // Custom prop, checks if item is selected and returns true
+  &[data-selected="true"] {
+    background-color: ${(props) => props.theme.palette.divider};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  &[data-disabled] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    opacity: 0.5;
+    pointer-events: none;
+  }
+`;
+export const StyledContainer = styled.div `
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+`;

package/dist/SelectBox/select-box.utils.d.ts

@@ -0,0 +1,19 @@
+import { Option } from "./types";
+/**
+ *
+ * Attempts to resolve the value to an Option object
+ * if the value is a string, it will attempt to find the corresponding Option object
+ * if the value is an Option object, it will attempt to find the corresponding Option object
+ * if the value is not found, it will return the value as is so that custom values can be displayed without a lookup
+ */
+export declare const KEYBOARD_KEYS: {
+    readonly ESCAPE: "Escape";
+    readonly ENTER: "Enter";
+    readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_UP: "ArrowUp";
+    readonly TAB: "Tab";
+};
+export declare const DEFAULT_DROPDOWN_HEIGHT = 250;
+export declare const DROPDOWN_OFFSET = 10;
+export declare const getEmptyMessage: (allowCustomValue: boolean, searchValue: string) => string;
+export declare const resolveValue: (value: number | string | Option | undefined, data: Option[]) => Option | null | undefined;

package/dist/SelectBox/select-box.utils.js

@@ -0,0 +1,46 @@
+/**
+ *
+ * Attempts to resolve the value to an Option object
+ * if the value is a string, it will attempt to find the corresponding Option object
+ * if the value is an Option object, it will attempt to find the corresponding Option object
+ * if the value is not found, it will return the value as is so that custom values can be displayed without a lookup
+ */
+// Constants
+export const KEYBOARD_KEYS = {
+    ESCAPE: "Escape",
+    ENTER: "Enter",
+    ARROW_DOWN: "ArrowDown",
+    ARROW_UP: "ArrowUp",
+    TAB: "Tab",
+};
+export const DEFAULT_DROPDOWN_HEIGHT = 250;
+export const DROPDOWN_OFFSET = 10;
+// Helper functions
+export const getEmptyMessage = (allowCustomValue, searchValue) => {
+    if (allowCustomValue && searchValue) {
+        return `Add "${searchValue}" as a new item`;
+    }
+    return searchValue ? "No items found" : "No items";
+};
+export const resolveValue = (value, data) => {
+    let foundOption;
+    if (value === undefined)
+        return undefined;
+    if (value === null)
+        return null;
+    if (typeof value === "object") {
+        foundOption = data.find((item) => item.value == value.value);
+    }
+    else {
+        foundOption = data.find((item) => item.value === value);
+    }
+    if (foundOption)
+        return foundOption;
+    if (typeof value === "string") {
+        return { value, label: value };
+    }
+    if (typeof value === "number") {
+        return { value, label: value.toString() };
+    }
+    return value;
+};

package/dist/index.d.ts

@@ -14,6 +14,8 @@ export type { DropDownItem } from "./DropDownMenu";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";
+export { default as SearchableTextArea } from "./SearchableTextArea";
+export type { SearchableTextAreaProps } from "./SearchableTextArea";
 export { default as TagBox } from "./TagBox";
 export type { TagBoxProps, TagboxOption } from "./TagBox";
 export { default as FieldLabel } from "./FieldLabel";
@@ -28,8 +30,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 type { ItemTotalProps } from "./ItemTotal";
+export * from "./ItemTotal";
 export * from "./RichTextEditor";
 export { default as Loader } from "./Loader";
 export type { LoaderProps } from "./Loader";

package/dist/index.js

@@ -8,6 +8,7 @@ export { default as DropDownMenu } from "./DropDownMenu";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";
+export { default as SearchableTextArea } from "./SearchableTextArea";
 export { default as TagBox } from "./TagBox";
 export { default as FieldLabel } from "./FieldLabel";
 export { default as Modal } from "./Modal";
@@ -21,7 +22,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 "./ItemTotal";
 export * from "./RichTextEditor";
 export { default as Loader } from "./Loader";
 export * from "./QueryFilter";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.71",
+  "version": "1.3.92",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",