@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.8.1

package/dist/Table/TableRow.js

@@ -1,51 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRightIcon, Maximize2Icon } from "lucide-react";
-import { InnerCellContent, TD, TR, TreeCellContent, TreeCellWrapper, TreeChevronButton, TreeChevronPlaceholder, TreeIndentSpacer, } from "./TableComponents";
+import { Maximize2Icon } from "lucide-react";
+import ColumnResizer from "./ColumnResizer";
+import { InnerCellContent, TD, TR } from "./TableComponents";
 import useTable from "./useTable";
 import ActionCell from "./ActionCell";
 import ActionButton from "./ActionButton";
 import CheckBox from "../CheckBox";
 import { LoadingCellIndicator } from "./LoadingCellIndicator";
 const TableRow = ({ rowData, loading, rowStyle }) => {
-    const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, isRowFocused, onRowUpdated, treeOptions, firstVisibleDataField, isRowExpanded, toggleRowExpanded, tableLayout, } = useTable();
+    const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, isRowFocused, onRowUpdated, } = useTable();
     const selected = isRowSelected(rowData);
     const focused = isRowFocused(rowData);
     const handleSelectionChange = (e) => {
         e === true ? selectRow(rowData) : deselectRow(rowData);
     };
-    return (_jsxs(TR, { className: "mfui-tr", "data-key": rowData.__key, "data-selected": selected, "data-focused": focused, style: Object.assign(Object.assign({}, rowStyle), { width: tableLayout.contentWidth }), children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action row-selection-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
-                var _a;
+    return (_jsxs(TR, { className: "mfui-tr", style: rowStyle, "data-key": rowData.__key, "data-selected": selected, "data-focused": focused, children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action row-selection-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
                 if (column.visible === false)
                     return null;
                 if (loading) {
-                    const columnWidth = tableLayout.columnWidths[column.columnId] || column.minWidth;
                     return (_jsx(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, style: {
-                            width: columnWidth,
+                            width: column.width,
                             minWidth: column.minWidth,
-                            maxWidth: column.maxWidth,
-                            flexBasis: columnWidth,
-                            flexGrow: 0,
-                            flexShrink: 0,
+                            flex: column.width ? "0 0 auto" : "1",
                         }, children: _jsx(LoadingCellIndicator, {}) }, index));
                 }
-                const cellBody = column.render
-                    ? column.render({ rowData, onRowUpdated })
-                    : rowData[column.dataField];
-                const isTreeColumn = (treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.enabled) === true &&
-                    column.dataField === firstVisibleDataField;
-                const expanded = isTreeColumn ? isRowExpanded(rowData) : false;
-                const columnWidth = tableLayout.columnWidths[column.columnId] || column.minWidth;
-                return (_jsx(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, "data-tree-cell": isTreeColumn ? "true" : undefined, style: {
-                        width: columnWidth,
+                return (_jsxs(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, style: {
+                        width: column.width,
                         minWidth: column.minWidth,
-                        maxWidth: column.maxWidth,
-                        flexBasis: columnWidth,
-                        flexGrow: 0,
-                        flexShrink: 0,
-                    }, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: isTreeColumn ? (_jsxs(TreeCellWrapper, { children: [_jsx(TreeIndentSpacer, { "$level": (_a = rowData.__level) !== null && _a !== void 0 ? _a : 0, "$indentPx": treeOptions.indentPx }), rowData.__hasChildren ? (_jsx(TreeChevronButton, { type: "button", "$expanded": expanded, onClick: (e) => {
-                                        e.stopPropagation();
-                                        toggleRowExpanded(rowData);
-                                    }, "aria-label": expanded ? "Collapse row" : "Expand row", "aria-expanded": expanded, children: _jsx(ChevronRightIcon, { size: 14 }) })) : (_jsx(TreeChevronPlaceholder, {})), _jsx(TreeCellContent, { children: cellBody })] })) : (cellBody) }) }, index));
+                        flex: column.width ? "0 0 auto" : "1",
+                    }, children: [(column === null || column === void 0 ? void 0 : column.enableResize) === true && _jsx(ColumnResizer, { column: column }), _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: column.render
+                                ? column.render({
+                                    rowData,
+                                    onRowUpdated,
+                                })
+                                : rowData[column.dataField] })] }, index));
             })] }));
 };
 export default TableRow;

package/dist/Table/Utils/index.d.ts

@@ -1,3 +1,4 @@
 export { default as resolveColumnResize } from "./resolveColumnResize";
 export { default as syncColumnState } from "./syncColumnState";
+export { default as resizeHandler } from "./resizeHandler";
 export { exportTableToExcel } from "./tableExport";

package/dist/Table/Utils/index.js

@@ -1,3 +1,4 @@
 export { default as resolveColumnResize } from "./resolveColumnResize";
 export { default as syncColumnState } from "./syncColumnState";
+export { default as resizeHandler } from "./resizeHandler";
 export { exportTableToExcel } from "./tableExport";

package/dist/Table/Utils/resizeHandler.d.ts

@@ -0,0 +1,3 @@
+import { ResizeHandlerProps } from "../types";
+declare const resizeHandler: ({ event, columnId, columnProps, onResize, onResizeFinished, }: ResizeHandlerProps) => void;
+export default resizeHandler;

package/dist/Table/Utils/resizeHandler.js

@@ -0,0 +1,84 @@
+import TableDefaults from "../TableDefaults";
+const enableResizeClass = (dataField) => {
+    if (dataField === undefined) {
+        return;
+    }
+    document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
+        resizer.classList.add("isResizing");
+    });
+};
+const disableResizeClass = (dataField) => {
+    if (dataField === undefined) {
+        return;
+    }
+    document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
+        resizer.classList.remove("isResizing");
+    });
+};
+const resizeHandler = ({ event, columnId, columnProps, onResize, onResizeFinished, }) => {
+    let col = event.target
+        .parentElement;
+    let newColumns = [];
+    let x = 0;
+    let w = 0;
+    const mouseMoveHandler = function (e) {
+        const selectedColumn = document.querySelectorAll(`.column-${columnId}`);
+        const columnHeaders = document.querySelectorAll(`.mfui-th.column-${columnId}`);
+        const dx = e.clientX - x;
+        let newWidth = w + dx;
+        // Calculate what the minimum width should be
+        // min width should be the defined column width or the default min width
+        if (columnProps.minWidth === undefined) {
+            if (newWidth < TableDefaults.td.minWidth)
+                newWidth = TableDefaults.td.minWidth;
+        }
+        else {
+            if (newWidth < columnProps.minWidth)
+                newWidth = columnProps.minWidth;
+        }
+        selectedColumn.forEach((col) => {
+            var _a;
+            col.style.width = `${newWidth}px`;
+            col.style.flex = "0 0 auto";
+            // col.style.maxWidth = `${newWidth}px`;
+            // col.style.minWidth = `${newWidth}px`;
+            newColumns.push({
+                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
+                width: newWidth,
+            });
+        });
+        newColumns = Array.from(columnHeaders).map((col) => {
+            var _a;
+            return {
+                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
+                width: newWidth,
+            };
+        });
+        onResize({
+            columns: newColumns,
+        });
+    };
+    const mouseUpHandler = function () {
+        var _a, _b, _c;
+        let newWidth = ((_c = (_b = (_a = document === null || document === void 0 ? void 0 : document.querySelector) === null || _a === void 0 ? void 0 : _a.call(document, `.column-${columnId}`)) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.width) || null;
+        if (newWidth) {
+            newWidth = newWidth.replace("px", "");
+        }
+        disableResizeClass(columnId);
+        document.removeEventListener("mousemove", mouseMoveHandler);
+        document.removeEventListener("mouseup", mouseUpHandler);
+        onResizeFinished === null || onResizeFinished === void 0 ? void 0 : onResizeFinished({
+            column: columnProps,
+            columnId: columnId,
+            targetColumn: document.querySelector(`.column-${columnId}`),
+            newWidth,
+        });
+    };
+    x = event.clientX;
+    const styles = window.getComputedStyle(col);
+    w = parseInt(styles.width, 10);
+    document.addEventListener("mousemove", mouseMoveHandler);
+    document.addEventListener("mouseup", mouseUpHandler);
+    enableResizeClass(columnId);
+};
+export default resizeHandler;

package/dist/Table/types.d.ts

@@ -10,42 +10,6 @@ export type StateStorage = {
     type: "localStorage";
     key: string;
 };
-export type TreeMode = "nested" | "flat";
-export type TreeOptions = {
-    /** Enable tree-row behavior. Default: false */
-    enabled?: boolean;
-    /** Input shape. Default: "nested" */
-    mode?: TreeMode;
-    /** For mode="nested": field name that holds child array. Default: "children" */
-    childrenField?: string;
-    /** For mode="flat": field name that holds parent id. Default: "parentId" */
-    parentIdField?: string;
-    /** For mode="flat": field name that holds the row's stable id. Falls back to keyField. */
-    idField?: string;
-    /** Pixel width of one indentation level. Default: 16 */
-    indentPx?: number;
-    /** If a descendant matches search/filter, auto-expand its ancestors for the effective view. Default: true */
-    autoExpandOnMatch?: boolean;
-};
-export type ResolvedTreeOptions = {
-    enabled: boolean;
-    mode: TreeMode;
-    childrenField: string;
-    parentIdField: string;
-    idField?: string;
-    indentPx: number;
-    autoExpandOnMatch: boolean;
-};
-export type ExpandedKeysState = string[];
-export type OnExpandedChangeFn = (keys: string[]) => void;
-export type TreeMeta = {
-    /** Map of row key -> parent row key (undefined for roots) */
-    parentKeyMap: Map<string, string | undefined>;
-    /** Map of parent key -> ordered list of direct child keys */
-    childrenKeyMap: Map<string | undefined, string[]>;
-    /** All row keys that have children (eligible for expansion) */
-    expandableKeys: string[];
-};
 export type RenderOptions = {
     rowData: any;
     onRowUpdated?: (context: {
@@ -91,9 +55,27 @@ export type TableState = {
     sortState?: SortState;
     filterState?: Query;
     searchState?: string;
-    expandedKeys?: ExpandedKeysState;
 };
+export interface onResizeFinishedProps {
+    column: ColumnState;
+    columnId?: string;
+    targetColumn: Element | null;
+    newWidth: string | null;
+}
+export interface onResizeProps {
+    columns: {
+        dataField: string;
+        width: number;
+    }[];
+}
 export type ColumnStateUpdate = ColumnState[] | ((prevColumnState: ColumnState[]) => ColumnState[]);
+export interface ResizeHandlerProps {
+    event: React.MouseEvent<HTMLDivElement>;
+    columnId?: string;
+    columnProps: ColumnState;
+    onResize: (e: onResizeProps) => void;
+    onResizeFinished?: (e: onResizeFinishedProps) => void;
+}
 export interface TableHeaderProps {
     headerRowHeight?: number;
     enableColumnResize?: boolean;
@@ -112,32 +94,15 @@ export type TableDimensions = {
     width: number;
     height: number;
 };
-export type TableLayout = {
-    contentWidth: number;
-    columnWidths: Record<string, number>;
-};
 export type TableContextType = {
     columnState: ColumnState[];
     setColumnState: (columnStateUpdate: ColumnStateUpdate) => void;
-    tableLayout: TableLayout;
-    setResizeColumnWidths: (widths: Record<string, number> | null) => void;
     sortState?: SortState | null;
     filterState?: Query | null;
     searchState?: string | null;
     data: any[];
     totalRecords?: number;
     keyField?: string;
-    treeOptions: ResolvedTreeOptions;
-    firstVisibleDataField?: string;
-    expandedKeys: string[];
-    effectiveExpandedKeys: Set<string>;
-    isRowExpanded: (row: any) => boolean;
-    toggleRowExpanded: (row: any) => void;
-    expandRow: (row: any) => void;
-    collapseRow: (row: any) => void;
-    expandAllRows: () => void;
-    collapseAllRows: () => void;
-    onExpandedChange?: OnExpandedChangeFn;
     tableHeight?: number;
     tableMaxHeight?: number;
     tableMinHeight?: number;
@@ -249,11 +214,6 @@ export interface TableProviderProps {
     defaultFilterState?: Query;
     filterState?: Query;
     onFilterChange?: (e: Query) => void;
-    treeOptions?: ResolvedTreeOptions;
-    defaultExpandedKeys?: ExpandedKeysState;
-    expandedKeys?: ExpandedKeysState;
-    onExpandedChange?: OnExpandedChangeFn;
-    treeMeta?: TreeMeta;
 }
 export interface TableRowProps {
     rowData: {
@@ -375,10 +335,6 @@ export interface TableProps {
     defaultFilterState?: Query;
     filterState?: Query;
     onFilterChange?: (e: Query) => void;
-    treeOptions?: TreeOptions;
-    defaultExpandedKeys?: ExpandedKeysState;
-    expandedKeys?: ExpandedKeysState;
-    onExpandedChange?: OnExpandedChangeFn;
 }
 export type TableInstance = {
     columnState: ColumnState[];
@@ -399,11 +355,4 @@ export type TableInstance = {
     clearSearch: () => void;
     clearSelections: () => void;
     getTableState: () => TableState;
-    expandRow: (row: any) => void;
-    collapseRow: (row: any) => void;
-    toggleRowExpanded: (row: any) => void;
-    isRowExpanded: (row: any) => boolean;
-    expandAllRows: () => void;
-    collapseAllRows: () => void;
-    getExpandedRowKeys: () => string[];
 };

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, dynamicOptionHeight, 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, 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

@@ -14,7 +14,7 @@ import styled from "styled-components";
 import { useFloating, flip, offset, autoUpdate, FloatingPortal, } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState, } from "react";
 import { Input, Tooltip, FieldLabel, Pill, Loader } from "..";
-import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, getControlSizeTokens, } from "../core";
+import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, } from "../core";
 const StyledInputContainer = styled.div `
   position: relative;
   cursor: pointer;
@@ -29,7 +29,17 @@ const StyledInputContainer = styled.div `
   pointer-events: all;
   outline: none;
 
-  padding: ${({ size }) => `0px ${getControlSizeTokens(size).inputPaddingX}px`};
+  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;
@@ -48,13 +58,33 @@ const StyledInputContainer = styled.div `
 }};
   font-weight: 500;
   color: ${(props) => props.theme.palette.text.primary};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  font-size: ${({ size }) => size === "xs"
+    ? "12px"
+    : size === "sm"
+        ? "14px"
+        : size === "md"
+            ? "16px"
+            : size === "lg"
+                ? "18px"
+                : size === "xl"
+                    ? "20px"
+                    : "12px"};
 
   width: 100%;
-  min-height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  min-height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "26px"};
 
   &[data-button-right="true"] {
-    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+    padding-right: 36px;
   }
 
   background-color: ${({ theme, variant }) => {
@@ -169,8 +199,17 @@ const GroupTitle = styled((_a) => {
 
   color: ${(props) => props.theme.palette.text.secondary};
 
-  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
-  padding: ${({ size }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
+  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;
@@ -181,7 +220,17 @@ const GroupTitle = styled((_a) => {
 
     font-weight: 500;
 
-    font-size: ${({ size }) => `${getControlSizeTokens(size).menuGroupFontSize}px`};
+    font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
   }
 
   .group-line {
@@ -192,7 +241,7 @@ const GroupTitle = styled((_a) => {
 const PillContainer = styled.div `
   display: flex;
   align-items: center;
-  gap: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
+  gap: 5px;
   flex-wrap: wrap;
   flex-grow: 1;
 
@@ -206,27 +255,35 @@ const StyledInnerContainer = styled.div `
   width: 100%;
 
   &[data-button-right="true"] {
-    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+    padding-right: 30px;
   }
 `;
 const StyledItem = styled.div `
   line-height: 1;
   color: ${(props) => props.theme.palette.text.primary};
   border-radius: 3px;
-  box-sizing: border-box;
   display: flex;
   align-items: center;
-  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
-  height: ${({ size, $dynamicHeight }) => $dynamicHeight ? "auto" : `${getControlSizeTokens(size).menuRowHeight}px`};
+  min-height: 25px;
+  padding: 7px 10px;
   position: relative;
   user-select: none;
   outline: none;
 
   cursor: pointer;
 
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
-  padding: ${({ size, $dynamicHeight }) => `${$dynamicHeight ? 6 : 0}px ${getControlSizeTokens(size).menuItemPaddingX}px`};
+  font-family: "Arial", sans-serif;
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
 
   &:hover {
     background-color: ${(props) => props.theme.palette.action.hover};
@@ -284,7 +341,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, dynamicOptionHeight, 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, 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;
@@ -585,7 +642,7 @@ 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: size, 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: [_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) => {
                                         if (searchFn !== undefined) {
                                             searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
                                         }
@@ -594,10 +651,10 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                                         }
                                         update();
                                     }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue), "data-disabled": disabled }))] }) }), clearable &&
-                        (((_f = _value === null || _value === void 0 ? void 0 : _value.length) !== null && _f !== void 0 ? _f : 0) > 0 || !!((_g = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _g === void 0 ? void 0 : _g.value)) ? (_jsx(ClearButton, { size: size, onClick: handleClear, onMouseDown: (e) => {
+                        (((_f = _value === null || _value === void 0 ? void 0 : _value.length) !== null && _f !== void 0 ? _f : 0) > 0 || !!((_g = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _g === void 0 ? void 0 : _g.value)) ? (_jsx(ClearButton, { onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
-                        } })) : arrow ? (_jsx(ArrowButton, { size: size, onClick: (e) => {
+                        } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
                             e.preventDefault();
                         }, onMouseDown: (e) => {
                             e.preventDefault();
@@ -618,16 +675,17 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                                                             e.preventDefault();
                                                             e.stopPropagation();
                                                             handleItemClick(item);
-                                                        }, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, "$dynamicHeight": dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
+                                                        }, "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, "$dynamicHeight": dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption), 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));
+                                                }, "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;

package/dist/TagBox/types.d.ts

@@ -32,7 +32,6 @@ export interface TagBoxProps {
     debounceTime?: number;
     sort?: boolean;
     disabled?: boolean;
-    dynamicOptionHeight?: boolean;
     renderOption?: (item: Option | string) => React.ReactNode;
     renderTag?: (item: Option | string) => React.ReactNode;
     OptionTooltip?: (props: {

package/dist/TextArea/TextArea.js

@@ -1,17 +1,26 @@
 import styled from "styled-components";
 import TextareaAutosize from "react-textarea-autosize";
-import { getControlSizeTokens } from "../core";
 const TextArea = styled(TextareaAutosize) `
   outline: none;
   resize: none;
-  padding: ${({ size }) => `${getControlSizeTokens(size).inputPaddingX}px`};
+  padding: 10px;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
 
   font-family: ${({ theme }) => theme.typography.fontFamily};
   color: ${(props) => props.theme.palette.text.primary};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "13px"};
 
   background-color: ${({ theme, variant }) => {
     switch (variant) {
@@ -50,13 +59,18 @@ const TextArea = styled(TextareaAutosize) `
     border: 1px solid ${(props) => props.theme.palette.primary.main};
   }
 
-  &[disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
   ::placeholder {
-    font-size: ${({ size }) => `${getControlSizeTokens(size).placeholderFontSize}px`};
+    font-size: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "12px"};
   }
 `;
 export default TextArea;

package/dist/TextInput/TextInput.js

@@ -13,7 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { FieldLabel } from "..";
 import Input from "../Input/Input";
-import { getControlSizeTokens } from "../core";
 import { forwardRef, useState } from "react";
 import { Eye, EyeOff, X } from "lucide-react";
 const StyledContainer = styled.div `
@@ -36,9 +35,7 @@ const InputContainer = styled.div `
 `;
 const InputButton = styled.button `
   position: absolute;
-  right: 0;
-  width: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
-  height: 100%;
+  right: 8px;
   background: none;
   border: none;
   cursor: pointer;
@@ -61,8 +58,8 @@ const InputButton = styled.button `
   }
 
   svg {
-    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
-    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+    width: 16px;
+    height: 16px;
   }
 `;
 export const TextInput = forwardRef((_a, ref) => {
@@ -80,14 +77,11 @@ export const TextInput = forwardRef((_a, ref) => {
     };
     // Enhanced features: password or clearable functionality
     const inputType = password && !passwordVisible ? "password" : type || "text";
-    const adornmentWidth = getControlSizeTokens(size).adornmentWidth;
-    const inputStyle = Object.assign(Object.assign({}, style), (password || (clearable && value)
-        ? { paddingRight: `${adornmentWidth}px` }
-        : {}));
-    return (_jsxs(StyledContainer, { className: className, colSpan: colSpan, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(InputContainer, { children: [_jsx(Input, Object.assign({ ref: ref, value: value, size: size, type: inputType, style: inputStyle }, inputProps, rest)), password ? (_jsx(InputButton, { size: size, onClick: handlePasswordToggle, onMouseDown: (e) => {
+    const inputStyle = Object.assign(Object.assign({}, style), (password || (clearable && value) ? { paddingRight: "36px" } : {}));
+    return (_jsxs(StyledContainer, { className: className, colSpan: colSpan, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(InputContainer, { children: [_jsx(Input, Object.assign({ ref: ref, value: value, size: size, type: inputType, style: inputStyle }, inputProps, rest)), password ? (_jsx(InputButton, { onClick: handlePasswordToggle, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
-                        }, tabIndex: -1, type: "button", children: passwordVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) })) : clearable && value ? (_jsx(InputButton, { size: size, onClick: handleClear, onMouseDown: (e) => {
+                        }, tabIndex: -1, type: "button", children: passwordVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) })) : clearable && value ? (_jsx(InputButton, { onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         }, tabIndex: -1, type: "button", children: _jsx(X, {}) })) : null] })] }));