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

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] })] }));

package/dist/Utilities/parseTimestamp.js

@@ -7,7 +7,6 @@ import moment from "moment";
 // When `timestamp` is empty, segment values fall back to placeholders so the
 // DateInput can still render an editable structure.
 export default function parseTimestamp(timestamp, format, utc = false) {
-    var _a;
     // Supported format tokens and how each token maps to a segment type.
     // `momentType` is used by consumers that need to know which unit the
     // segment represents in Moment's terminology.
@@ -41,7 +40,7 @@ export default function parseTimestamp(timestamp, format, utc = false) {
     // Break the format into ordered parts while keeping separators.
     // Example: "MM/DD/YYYY HH:mm" => ["MM", "/", "DD", "/", "YYYY", " ", "HH", ":", "mm"]
     function splitFormat(format) {
-        return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|A|Z)/).filter((s) => s);
+        return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|Z)/).filter((s) => s);
     }
     // Convert each format part into a known token descriptor.
     // Unknown parts are treated as literal separators.
@@ -58,19 +57,15 @@ export default function parseTimestamp(timestamp, format, utc = false) {
                 index: -1,
             };
     }
-    const parsedTimestamp = timestamp
-        ? utc === true
-            ? moment.utc(timestamp)
-            : moment(timestamp)
-        : null;
-    const hasValidTimestamp = (_a = parsedTimestamp === null || parsedTimestamp === void 0 ? void 0 : parsedTimestamp.isValid()) !== null && _a !== void 0 ? _a : false;
     // Build the final Segment[] in format order.
     // For date/time tokens, format the timestamp using local or UTC mode.
-    // For separators (or empty/invalid timestamps), use the placeholder as the value.
+    // For separators (or empty timestamp), use the placeholder as the value.
     const segments = splitFormat(format).map((segment, i) => {
         const { pattern, placeholder, type, momentType } = matchSegment(segment);
-        const value = hasValidTimestamp && parsedTimestamp
-            ? parsedTimestamp.format(pattern)
+        const value = timestamp
+            ? utc === true
+                ? moment.utc(timestamp).format(pattern)
+                : moment(timestamp).format(pattern)
             : placeholder;
         return {
             value,

package/dist/core/ArrowButton.d.ts

@@ -1,7 +1,5 @@
-import Size from "./Types/Size";
 interface ArrowButtonProps {
     className?: string;
-    size?: Size;
     [key: string]: React.ButtonHTMLAttributes<HTMLButtonElement> | any;
 }
 declare const ArrowButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ArrowButtonProps, never>> & string & Omit<({ className, ...props }: ArrowButtonProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/core/ArrowButton.js

@@ -12,10 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 import styled from "styled-components";
-import { DEFAULT_CONTROL_SIZE, getControlSizeTokens } from "./controlSizes";
 const ArrowIcon = styled((_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(ChevronDownIcon, { size: getControlSizeTokens(props.size).iconSize }) })));
+    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(ChevronDownIcon, { size: 16 }) })));
 }) `
   color: ${(props) => props.theme.palette.text.secondary};
   transition: transform 0.2s ease-in-out;
@@ -29,19 +28,16 @@ const ArrowIcon = styled((_a) => {
 `;
 const ArrowButton = styled((_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ArrowIcon, { size: props.size }) })));
+    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ArrowIcon, {}) })));
 }) `
   position: absolute;
   right: 0;
   height: 100%;
-  width: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+  padding-inline: 10px;
   background: none;
   border: none;
   cursor: pointer;
   margin: 0;
   outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 `;
 export default ArrowButton;

package/dist/core/ClearButton.d.ts

@@ -1,7 +1,5 @@
-import Size from "./Types/Size";
 interface ClearButtonProps {
     className?: string;
-    size?: Size;
     [key: string]: React.ButtonHTMLAttributes<HTMLButtonElement> | any;
 }
 declare const ClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ClearButtonProps, never>> & string & Omit<({ className, ...props }: ClearButtonProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/core/ClearButton.js

@@ -12,10 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import styled from "styled-components";
-import { DEFAULT_CONTROL_SIZE, getControlSizeTokens } from "./controlSizes";
 const ClearIcon = styled((_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(X, { size: getControlSizeTokens(props.size).iconSize }) })));
+    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(X, { size: 16 }) })));
 }) `
   color: ${(props) => props.theme.palette.text.secondary};
   transition: transform 0.2s ease-in-out;
@@ -29,19 +28,16 @@ const ClearIcon = styled((_a) => {
 `;
 const ClearButton = styled((_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ClearIcon, { size: props.size }) })));
+    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ClearIcon, {}) })));
 }) `
   position: absolute;
   right: 0;
   height: 100%;
-  width: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+  padding-inline: 10px;
   background: none;
   border: none;
   cursor: pointer;
   margin: 0;
   outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 `;
 export default ClearButton;

package/dist/core/controlSizes.js

@@ -26,7 +26,7 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 6,
         pillIconSize: 10,
         pillGap: 4,
-        segmentedHeight: 22,
+        segmentedHeight: 24,
         segmentedFontSize: 11,
         sectionTitleFontSize: 12,
         sectionIconSize: 12,
@@ -57,7 +57,7 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 8,
         pillIconSize: 12,
         pillGap: 5,
-        segmentedHeight: 26,
+        segmentedHeight: 28,
         segmentedFontSize: 12,
         sectionTitleFontSize: 13,
         sectionIconSize: 12,
@@ -89,7 +89,7 @@ const CONTROL_SIZE_TOKENS = {
         pillIconSize: 14,
         pillGap: 5,
         segmentedHeight: 32,
-        segmentedFontSize: 14,
+        segmentedFontSize: 13,
         sectionTitleFontSize: 14,
         sectionIconSize: 14,
     },
@@ -119,8 +119,8 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 12,
         pillIconSize: 16,
         pillGap: 5,
-        segmentedHeight: 38,
-        segmentedFontSize: 16,
+        segmentedHeight: 36,
+        segmentedFontSize: 14,
         sectionTitleFontSize: 16,
         sectionIconSize: 18,
     },
@@ -150,8 +150,8 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 14,
         pillIconSize: 18,
         pillGap: 5,
-        segmentedHeight: 46,
-        segmentedFontSize: 18,
+        segmentedHeight: 44,
+        segmentedFontSize: 15,
         sectionTitleFontSize: 18,
         sectionIconSize: 24,
     },
@@ -181,8 +181,8 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 16,
         pillIconSize: 20,
         pillGap: 5,
-        segmentedHeight: 56,
-        segmentedFontSize: 20,
+        segmentedHeight: 52,
+        segmentedFontSize: 16,
         sectionTitleFontSize: 20,
         sectionIconSize: 28,
     },