@monolith-forensics/monolith-ui 1.8.1 → 1.9.0

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -32,10 +32,6 @@ export interface MonolithDefaultTheme {
             main: string;
             contrastText: string;
         };
-        warning: {
-            main: string;
-            contrastText: string;
-        };
         background: {
             default: string;
             paper: string;

package/dist/Tabs/Tab.js

@@ -12,14 +12,6 @@ const StyledTabButton = styled(Button) `
   color: ${({ theme }) => theme.palette.text.secondary};
   font-weight: 500;
 
-  &:focus {
-    text-decoration: none;
-  }
-
-  &:focus-visible {
-    background-color: ${({ theme }) => theme.palette.action.hover};
-  }
-
   ${({ orientation }) => orientation === "horizontal" &&
     css `
       border-bottom: 2px solid transparent;

package/dist/TagBox/TagBox.d.ts

@@ -1,3 +1,3 @@
 import { TagBoxProps } from "./types";
-declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, disabled, renderOption, renderTag, OptionTooltip, DropDownProps, }: 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, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, enableSelectAll, maxDisplayed, openOnFocus, label, description, required, error, loading, sort, disabled, renderOption, renderTag, OptionTooltip, DropDownProps, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default TagBox;

package/dist/TagBox/TagBox.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
 import { useFloating, flip, offset, autoUpdate, FloatingPortal, } from "@floating-ui/react";
-import { useCallback, useEffect, useRef, useState, } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { Input, Tooltip, FieldLabel, Pill, Loader } from "..";
-import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, } from "../core";
+import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, getControlSizeTokens, } from "../core";
 const StyledInputContainer = styled.div `
   position: relative;
   cursor: pointer;
@@ -306,6 +306,43 @@ const StyledItem = styled.div `
     pointer-events: none;
   }
 `;
+const SelectAllItem = styled.button `
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight + 4}px`};
+  padding: 0 ${({ size }) => `${getControlSizeTokens(size).menuItemPaddingX}px`};
+  margin-bottom: 4px;
+  border: 0;
+  border-bottom: 1px solid ${(props) => props.theme.palette.divider};
+  background-color: ${(props) => props.theme.palette.input.background};
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  color: ${(props) => props.theme.palette.text.primary};
+  text-align: left;
+  appearance: none;
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background-color: ${(props) => props.theme.palette.action.hover};
+    outline: 2px solid ${(props) => props.theme.palette.primary.main};
+    outline-offset: -2px;
+  }
+`;
 const EmptyComponent = styled.div `
   display: flex;
   align-items: center;
@@ -341,7 +378,7 @@ const resolveValues = (value, data) => {
     }
     return resolvedValues;
 };
-const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue, value, 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, sort = false, disabled = false, renderOption, renderTag, OptionTooltip, DropDownProps = {}, }) => {
+const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, enableSelectAll = false, maxDisplayed, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, disabled = false, renderOption, renderTag, OptionTooltip, DropDownProps = {}, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
     const isControlled = value !== undefined;
@@ -349,15 +386,19 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
      * Resolve the options to a consistent format
      * also remove duplicates
      */
-    const resolvedOptions = Array.from(new Map(data
+    const resolvedOptions = useMemo(() => Array.from(new Map(data
         .map((item) => ({
-        value: isObjectArray ? item.value : item,
-        label: isObjectArray ? item.label : 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,
     }))
-        .map((item) => [item.value, item])).values());
+        .map((item) => [item.value, item])).values()), [data, isObjectArray]);
     /**
      * Get the correct option if the default value is a string
      * otherwise, use the default value as is
@@ -431,6 +472,36 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         }))
             .sort((a, b) => a.label.localeCompare(b.label))
         : [];
+    const selectableMatchingItems = useMemo(() => resolvedOptions
+        .concat(customItems)
+        .filter((item) => !item.disabled)
+        .filter((item) => item.label.toLowerCase().includes(searchValue.toLowerCase())), [resolvedOptions, customItems, searchValue]);
+    const selectedValueKeys = useMemo(() => new Set(_value.map((v) => v.value)), [_value]);
+    const selectedMatchingCount = selectableMatchingItems.filter((item) => selectedValueKeys.has(item.value)).length;
+    const allMatchingSelected = selectableMatchingItems.length > 0 &&
+        selectedMatchingCount === selectableMatchingItems.length;
+    const handleToggleSelectAll = useCallback(() => {
+        if (selectableMatchingItems.length === 0)
+            return;
+        if (allMatchingSelected) {
+            const matchingKeys = new Set(selectableMatchingItems.map((i) => i.value));
+            const next = _value.filter((v) => !matchingKeys.has(v.value));
+            !isControlled && setValueState(next);
+            onChange === null || onChange === void 0 ? void 0 : onChange(next.map((v) => v.value), next);
+            return;
+        }
+        const toAdd = selectableMatchingItems.filter((item) => !selectedValueKeys.has(item.value));
+        const next = [..._value, ...toAdd];
+        !isControlled && setValueState(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next.map((v) => v.value), next);
+    }, [
+        selectableMatchingItems,
+        allMatchingSelected,
+        selectedValueKeys,
+        _value,
+        isControlled,
+        onChange,
+    ]);
     const { refs, floatingStyles, update } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
@@ -453,7 +524,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         });
     };
     const handleClear = (e) => {
-        e.preventDefault();
+        e === null || e === void 0 ? void 0 : e.preventDefault();
         if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
             inputRef.current.value = "";
         onChange === null || onChange === void 0 ? void 0 : onChange([]);
@@ -519,18 +590,24 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         customItems,
     ]);
     const handleKeyDown = (e) => {
-        var _a, _b;
+        var _a, _b, _c;
         const currentInputValue = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        // When focus is inside the floating dropdown (e.g., on the Select All
+        // button), let that element handle its own activation rather than the
+        // container-level routing meant for the input.
+        const target = e.target;
+        const floatingElement = (_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current;
+        const focusInsideDropdown = !!floatingElement && floatingElement.contains(target);
         // 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;
+            const reference = (_c = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _c === void 0 ? void 0 : _c.current;
             reference === null || reference === void 0 ? void 0 : reference.blur();
             setSearchValue("");
             update();
             setIsOpen(false);
         }
         // Enter key
-        if (e.key === "Enter") {
+        if (e.key === "Enter" && !focusInsideDropdown) {
             if (preSelected) {
                 handleItemClick(preSelected);
                 setPreSelected(undefined);
@@ -554,13 +631,15 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
             // setIsOpen(false);
         }
         // Backspace key
-        if (e.key === "Backspace" && currentInputValue === "") {
+        if (e.key === "Backspace" &&
+            currentInputValue === "" &&
+            !focusInsideDropdown) {
             const newItems = _value === null || _value === void 0 ? void 0 : _value.slice(0, _value.length - 1);
             !isControlled && setValueState(newItems);
             onChange === null || onChange === void 0 ? void 0 : onChange(newItems.map((v) => v.value), newItems);
         }
         // Arrow down
-        if (e.key === "ArrowDown") {
+        if (e.key === "ArrowDown" && !focusInsideDropdown) {
             e.preventDefault();
             setPreSelected((prev) => {
                 let newItem = filteredItems[0]; // Loop back to the first item
@@ -578,7 +657,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
             });
         }
         // Arrow up
-        if (e.key === "ArrowUp") {
+        if (e.key === "ArrowUp" && !focusInsideDropdown) {
             e.preventDefault();
             setPreSelected((prev) => {
                 let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
@@ -598,9 +677,15 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                 return newItem;
             });
         }
-        // Tab key
+        // Tab key — close when the user is tabbing out of the dropdown itself,
+        // or when no focusable element exists inside it. Otherwise leave it open
+        // so FloatingPortal's preserveTabOrder can route focus to the Select All
+        // button.
         if (e.key === "Tab") {
-            setIsOpen(false);
+            const hasFocusableContent = enableSelectAll && selectableMatchingItems.length > 0;
+            if (focusInsideDropdown || !hasFocusableContent) {
+                setIsOpen(false);
+            }
         }
     };
     // handle scroll item into view
@@ -642,7 +727,14 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
     return (_jsxs("div", { className: className + " mfTagBox", children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onMouseDown: () => {
                     setIsOpen(true);
                     handleFocus();
-                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, tabIndex: 0, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [_value === null || _value === void 0 ? void 0 : _value.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item), children: (renderTag === null || renderTag === void 0 ? void 0 : renderTag(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index))), (searchable || allowCustomValue || (_value === null || _value === void 0 ? void 0 : _value.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
+                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, tabIndex: 0, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [(() => {
+                                    const shouldTruncate = maxDisplayed != null && _value.length > maxDisplayed;
+                                    const displayedItems = shouldTruncate
+                                        ? _value.slice(0, maxDisplayed)
+                                        : _value;
+                                    const overflowCount = _value.length - displayedItems.length;
+                                    return (_jsxs(_Fragment, { children: [displayedItems.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item), children: (renderTag === null || renderTag === void 0 ? void 0 : renderTag(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index))), overflowCount > 0 && (_jsxs(Pill, { size: "xs", showRemoveIcon: false, children: ["+", overflowCount, " more..."] }))] }));
+                                })(), (searchable || allowCustomValue || (_value === null || _value === void 0 ? void 0 : _value.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
                                         if (searchFn !== undefined) {
                                             searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
                                         }
@@ -669,24 +761,32 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                             maxHeight: DropDownProps.autoHeight
                                 ? (dropDownHeight || 250) - 10
                                 : "",
-                        }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: "No Items" })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
-                                    ? groups.map((group) => (_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) => {
-                                                            e.preventDefault();
-                                                            e.stopPropagation();
-                                                            handleItemClick(item);
-                                                        }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
-                                                                ? item
-                                                                : 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) => {
-                                                    console.log("clicked");
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                    handleItemClick(item);
-                                                }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.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));
-                                    }) }))] })) }) }))] }));
+                        }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading &&
+                                filteredItems.length === 0 &&
+                                !(enableSelectAll && selectableMatchingItems.length > 0) && (_jsx(EmptyComponent, { children: "No Items" })), !loading && (_jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [enableSelectAll && selectableMatchingItems.length > 0 && (_jsx(SelectAllItem, { type: "button", size: size, onMouseDown: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                        }, onClick: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            handleToggleSelectAll();
+                                        }, children: allMatchingSelected ? "Deselect all" : "Select all" })), grouped
+                                        ? groups.map((group) => (_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) => {
+                                                                e.preventDefault();
+                                                                e.stopPropagation();
+                                                                handleItemClick(item);
+                                                            }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
+                                                                    ? item
+                                                                    : 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) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        handleItemClick(item);
+                                                    }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.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));
+                                        })] }))] })) }) }))] }));
 }) `
   position: relative;
   cursor: pointer;

package/dist/TagBox/types.d.ts

@@ -22,6 +22,19 @@ export interface TagBoxProps {
     allowCustomValue?: boolean;
     searchable?: boolean;
     clearable?: boolean;
+    /**
+     * Adds a sticky "Select all" / "Deselect all" button at the top of the
+     * dropdown. The button operates on the currently visible (search-filtered,
+     * non-disabled) options — not the full dataset. When a search filter is
+     * active, only items matching the filter are toggled.
+     */
+    enableSelectAll?: boolean;
+    /**
+     * Maximum number of selected tags to render as Pills. When the selection
+     * exceeds this number, the overflow is summarized as a non-removable
+     * "+{count} more..." indicator. Omit to render every selected tag.
+     */
+    maxDisplayed?: number;
     label?: string;
     description?: ReactNode;
     required?: boolean;

package/dist/core/controlSizes.d.ts

@@ -1,34 +1,8 @@
 import Size from "./Types/Size";
 export declare const DEFAULT_CONTROL_SIZE: Size;
 export type ControlSizeTokens = {
-    height: number;
     fontSize: number;
-    labelFontSize: number;
-    supportingFontSize: number;
-    placeholderFontSize: number;
-    inputPaddingX: number;
-    buttonPaddingX: number;
-    iconSize: number;
-    iconGap: number;
-    adornmentWidth: number;
     menuRowHeight: number;
     menuItemPaddingX: number;
-    menuGroupFontSize: number;
-    switchTrackWidth: number;
-    switchTrackHeight: number;
-    switchThumbSize: number;
-    switchPadding: number;
-    switchGap: number;
-    checkboxIconSize: number;
-    iconButtonPaddingX: number;
-    pillHeight: number;
-    pillFontSize: number;
-    pillPaddingX: number;
-    pillIconSize: number;
-    pillGap: number;
-    segmentedHeight: number;
-    segmentedFontSize: number;
-    sectionTitleFontSize: number;
-    sectionIconSize: number;
 };
 export declare const getControlSizeTokens: (size?: Size) => ControlSizeTokens;

package/dist/core/controlSizes.js

@@ -1,190 +1,34 @@
 export const DEFAULT_CONTROL_SIZE = "sm";
 const CONTROL_SIZE_TOKENS = {
     xxs: {
-        height: 24,
         fontSize: 11,
-        labelFontSize: 11,
-        supportingFontSize: 10,
-        placeholderFontSize: 10,
-        inputPaddingX: 8,
-        buttonPaddingX: 8,
-        iconSize: 14,
-        iconGap: 4,
-        adornmentWidth: 24,
         menuRowHeight: 24,
         menuItemPaddingX: 8,
-        menuGroupFontSize: 10,
-        switchTrackWidth: 24,
-        switchTrackHeight: 14,
-        switchThumbSize: 10,
-        switchPadding: 2,
-        switchGap: 6,
-        checkboxIconSize: 12,
-        iconButtonPaddingX: 4,
-        pillHeight: 18,
-        pillFontSize: 9,
-        pillPaddingX: 6,
-        pillIconSize: 10,
-        pillGap: 4,
-        segmentedHeight: 24,
-        segmentedFontSize: 11,
-        sectionTitleFontSize: 12,
-        sectionIconSize: 12,
     },
     xs: {
-        height: 28,
         fontSize: 12,
-        labelFontSize: 12,
-        supportingFontSize: 11,
-        placeholderFontSize: 11,
-        inputPaddingX: 10,
-        buttonPaddingX: 12,
-        iconSize: 14,
-        iconGap: 6,
-        adornmentWidth: 28,
         menuRowHeight: 28,
         menuItemPaddingX: 10,
-        menuGroupFontSize: 11,
-        switchTrackWidth: 28,
-        switchTrackHeight: 16,
-        switchThumbSize: 12,
-        switchPadding: 2,
-        switchGap: 8,
-        checkboxIconSize: 14,
-        iconButtonPaddingX: 4,
-        pillHeight: 20,
-        pillFontSize: 10,
-        pillPaddingX: 8,
-        pillIconSize: 12,
-        pillGap: 5,
-        segmentedHeight: 28,
-        segmentedFontSize: 12,
-        sectionTitleFontSize: 13,
-        sectionIconSize: 12,
     },
     sm: {
-        height: 32,
         fontSize: 13,
-        labelFontSize: 12,
-        supportingFontSize: 11,
-        placeholderFontSize: 12,
-        inputPaddingX: 12,
-        buttonPaddingX: 14,
-        iconSize: 16,
-        iconGap: 6,
-        adornmentWidth: 32,
         menuRowHeight: 32,
         menuItemPaddingX: 12,
-        menuGroupFontSize: 11,
-        switchTrackWidth: 32,
-        switchTrackHeight: 18,
-        switchThumbSize: 14,
-        switchPadding: 2,
-        switchGap: 8,
-        checkboxIconSize: 16,
-        iconButtonPaddingX: 6,
-        pillHeight: 22,
-        pillFontSize: 12,
-        pillPaddingX: 10,
-        pillIconSize: 14,
-        pillGap: 5,
-        segmentedHeight: 32,
-        segmentedFontSize: 13,
-        sectionTitleFontSize: 14,
-        sectionIconSize: 14,
     },
     md: {
-        height: 36,
         fontSize: 14,
-        labelFontSize: 13,
-        supportingFontSize: 12,
-        placeholderFontSize: 13,
-        inputPaddingX: 12,
-        buttonPaddingX: 16,
-        iconSize: 16,
-        iconGap: 8,
-        adornmentWidth: 36,
         menuRowHeight: 36,
         menuItemPaddingX: 12,
-        menuGroupFontSize: 12,
-        switchTrackWidth: 36,
-        switchTrackHeight: 20,
-        switchThumbSize: 16,
-        switchPadding: 2,
-        switchGap: 10,
-        checkboxIconSize: 18,
-        iconButtonPaddingX: 8,
-        pillHeight: 24,
-        pillFontSize: 14,
-        pillPaddingX: 12,
-        pillIconSize: 16,
-        pillGap: 5,
-        segmentedHeight: 36,
-        segmentedFontSize: 14,
-        sectionTitleFontSize: 16,
-        sectionIconSize: 18,
     },
     lg: {
-        height: 44,
         fontSize: 15,
-        labelFontSize: 14,
-        supportingFontSize: 13,
-        placeholderFontSize: 14,
-        inputPaddingX: 14,
-        buttonPaddingX: 18,
-        iconSize: 18,
-        iconGap: 8,
-        adornmentWidth: 44,
         menuRowHeight: 44,
         menuItemPaddingX: 14,
-        menuGroupFontSize: 13,
-        switchTrackWidth: 44,
-        switchTrackHeight: 24,
-        switchThumbSize: 20,
-        switchPadding: 2,
-        switchGap: 12,
-        checkboxIconSize: 20,
-        iconButtonPaddingX: 10,
-        pillHeight: 26,
-        pillFontSize: 16,
-        pillPaddingX: 14,
-        pillIconSize: 18,
-        pillGap: 5,
-        segmentedHeight: 44,
-        segmentedFontSize: 15,
-        sectionTitleFontSize: 18,
-        sectionIconSize: 24,
     },
     xl: {
-        height: 52,
         fontSize: 16,
-        labelFontSize: 15,
-        supportingFontSize: 14,
-        placeholderFontSize: 15,
-        inputPaddingX: 16,
-        buttonPaddingX: 22,
-        iconSize: 18,
-        iconGap: 10,
-        adornmentWidth: 52,
         menuRowHeight: 52,
         menuItemPaddingX: 16,
-        menuGroupFontSize: 14,
-        switchTrackWidth: 52,
-        switchTrackHeight: 28,
-        switchThumbSize: 24,
-        switchPadding: 2,
-        switchGap: 12,
-        checkboxIconSize: 22,
-        iconButtonPaddingX: 12,
-        pillHeight: 28,
-        pillFontSize: 18,
-        pillPaddingX: 16,
-        pillIconSize: 20,
-        pillGap: 5,
-        segmentedHeight: 52,
-        segmentedFontSize: 16,
-        sectionTitleFontSize: 20,
-        sectionIconSize: 28,
     },
 };
 export const getControlSizeTokens = (size = DEFAULT_CONTROL_SIZE) => CONTROL_SIZE_TOKENS[size];

package/dist/core/index.d.ts

@@ -2,5 +2,6 @@ export { default as StyledContent } from "./StyledContent";
 export { default as StyledFloatContainer } from "./StyledFloatContainer";
 export { default as ArrowButton } from "./ArrowButton";
 export { default as ClearButton } from "./ClearButton";
+export * from "./controlSizes";
 export type { default as Size } from "./Types/Size";
 export type { default as Variant } from "./Types/Variant";

package/dist/core/index.js

@@ -2,3 +2,4 @@ export { default as StyledContent } from "./StyledContent";
 export { default as StyledFloatContainer } from "./StyledFloatContainer";
 export { default as ArrowButton } from "./ArrowButton";
 export { default as ClearButton } from "./ClearButton";
+export * from "./controlSizes";

package/dist/theme/variants.js

@@ -73,10 +73,6 @@ const lightVariant = {
             main: green[700],
             contrastText: "#FFF",
         },
-        warning: {
-            main: "#ffa726",
-            contrastText: "#FFF",
-        },
         background: {
             default: "#FFF",
             paper: "#FFF",
@@ -240,10 +236,6 @@ const darkVariant = merge(lightVariant, {
             main: green[500],
             contrastText: "#FFF",
         },
-        warning: {
-            main: "#ffa726",
-            contrastText: "#FFF",
-        },
         background: {
             default: "#222222",
             paper: "#333333",

package/package.json

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

package/dist/Charts/BarChart/BarChart.d.ts

@@ -1,5 +0,0 @@
-import { ReactElement, RefAttributes } from "react";
-import { ChartHandle } from "../ChartUtils";
-import { BarChartProps } from "./BarChart.types";
-export declare const BarChart: <TData>(props: BarChartProps<TData> & RefAttributes<ChartHandle>) => ReactElement | null;
-export default BarChart;