@monolith-forensics/monolith-ui 1.8.0 → 1.8.1-dev.1

package/dist/Table/types.d.ts

@@ -10,6 +10,42 @@ 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: {
@@ -55,6 +91,7 @@ export type TableState = {
     sortState?: SortState;
     filterState?: Query;
     searchState?: string;
+    expandedKeys?: ExpandedKeysState;
 };
 export interface onResizeFinishedProps {
     column: ColumnState;
@@ -103,6 +140,17 @@ export type TableContextType = {
     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;
@@ -214,6 +262,11 @@ 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: {
@@ -335,6 +388,10 @@ export interface TableProps {
     defaultFilterState?: Query;
     filterState?: Query;
     onFilterChange?: (e: Query) => void;
+    treeOptions?: TreeOptions;
+    defaultExpandedKeys?: ExpandedKeysState;
+    expandedKeys?: ExpandedKeysState;
+    onExpandedChange?: OnExpandedChangeFn;
 }
 export type TableInstance = {
     columnState: ColumnState[];
@@ -355,4 +412,11 @@ 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.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, } from "../core";
+import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, getControlSizeTokens, } from "../core";
 const StyledInputContainer = styled.div `
   position: relative;
   cursor: pointer;
@@ -29,17 +29,7 @@ const StyledInputContainer = styled.div `
   pointer-events: all;
   outline: none;
 
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "6px 12px"
-            : size === "lg"
-                ? "7px 14px"
-                : size === "xl"
-                    ? "8px 16px"
-                    : "4px 10px"};
+  padding: ${({ size }) => `0px ${getControlSizeTokens(size).inputPaddingX}px`};
 
   border-radius: 5px;
   transition: border 0.1s ease-in-out;
@@ -58,33 +48,13 @@ const StyledInputContainer = styled.div `
 }};
   font-weight: 500;
   color: ${(props) => props.theme.palette.text.primary};
-  font-size: ${({ size }) => size === "xs"
-    ? "12px"
-    : size === "sm"
-        ? "14px"
-        : size === "md"
-            ? "16px"
-            : size === "lg"
-                ? "18px"
-                : size === "xl"
-                    ? "20px"
-                    : "12px"};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
 
   width: 100%;
-  min-height: ${({ size }) => size === "xs"
-    ? "26px"
-    : size === "sm"
-        ? "30px"
-        : size === "md"
-            ? "36px"
-            : size === "lg"
-                ? "42px"
-                : size === "xl"
-                    ? "50px"
-                    : "26px"};
+  min-height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
 
   &[data-button-right="true"] {
-    padding-right: 36px;
+    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
   }
 
   background-color: ${({ theme, variant }) => {
@@ -199,17 +169,8 @@ const GroupTitle = styled((_a) => {
 
   color: ${(props) => props.theme.palette.text.secondary};
 
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
+  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+  padding: ${({ size }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
   .group-label {
     white-space: nowrap;
@@ -220,17 +181,7 @@ const GroupTitle = styled((_a) => {
 
     font-weight: 500;
 
-    font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
+    font-size: ${({ size }) => `${getControlSizeTokens(size).menuGroupFontSize}px`};
   }
 
   .group-line {
@@ -241,7 +192,7 @@ const GroupTitle = styled((_a) => {
 const PillContainer = styled.div `
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
   flex-wrap: wrap;
   flex-grow: 1;
 
@@ -255,7 +206,7 @@ const StyledInnerContainer = styled.div `
   width: 100%;
 
   &[data-button-right="true"] {
-    padding-right: 30px;
+    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
   }
 `;
 const StyledItem = styled.div `
@@ -264,26 +215,17 @@ const StyledItem = styled.div `
   border-radius: 3px;
   display: flex;
   align-items: center;
-  min-height: 25px;
-  padding: 7px 10px;
+  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+  height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
   position: relative;
   user-select: none;
   outline: none;
 
   cursor: pointer;
 
-  font-family: "Arial", sans-serif;
-  font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  padding: ${({ size }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
   &:hover {
     background-color: ${(props) => props.theme.palette.action.hover};
@@ -642,7 +584,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: "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: [_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) => {
                                         if (searchFn !== undefined) {
                                             searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
                                         }
@@ -651,10 +593,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, { 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, { size: size, onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
-                        } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
+                        } })) : arrow ? (_jsx(ArrowButton, { size: size, onClick: (e) => {
                             e.preventDefault();
                         }, onMouseDown: (e) => {
                             e.preventDefault();

package/dist/TextArea/TextArea.js

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

package/dist/TextInput/TextInput.js

@@ -13,6 +13,7 @@ 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 `
@@ -35,7 +36,9 @@ const InputContainer = styled.div `
 `;
 const InputButton = styled.button `
   position: absolute;
-  right: 8px;
+  right: 0;
+  width: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+  height: 100%;
   background: none;
   border: none;
   cursor: pointer;
@@ -58,8 +61,8 @@ const InputButton = styled.button `
   }
 
   svg {
-    width: 16px;
-    height: 16px;
+    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
   }
 `;
 export const TextInput = forwardRef((_a, ref) => {
@@ -77,11 +80,14 @@ export const TextInput = forwardRef((_a, ref) => {
     };
     // Enhanced features: password or clearable functionality
     const inputType = password && !passwordVisible ? "password" : type || "text";
-    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) => {
+    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) => {
                             e.preventDefault();
                             e.stopPropagation();
-                        }, tabIndex: -1, type: "button", children: passwordVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) })) : clearable && value ? (_jsx(InputButton, { onClick: handleClear, onMouseDown: (e) => {
+                        }, tabIndex: -1, type: "button", children: passwordVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) })) : clearable && value ? (_jsx(InputButton, { size: size, onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         }, tabIndex: -1, type: "button", children: _jsx(X, {}) })) : null] })] }));

package/dist/Utilities/parseTimestamp.js

@@ -7,6 +7,7 @@ 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.
@@ -40,7 +41,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|Z)/).filter((s) => s);
+        return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|A|Z)/).filter((s) => s);
     }
     // Convert each format part into a known token descriptor.
     // Unknown parts are treated as literal separators.
@@ -57,15 +58,19 @@ 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 timestamp), use the placeholder as the value.
+    // For separators (or empty/invalid timestamps), use the placeholder as the value.
     const segments = splitFormat(format).map((segment, i) => {
         const { pattern, placeholder, type, momentType } = matchSegment(segment);
-        const value = timestamp
-            ? utc === true
-                ? moment.utc(timestamp).format(pattern)
-                : moment(timestamp).format(pattern)
+        const value = hasValidTimestamp && parsedTimestamp
+            ? parsedTimestamp.format(pattern)
             : placeholder;
         return {
             value,

package/dist/core/ArrowButton.d.ts

@@ -1,5 +1,7 @@
+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,9 +12,10 @@ 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: 16 }) })));
+    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(ChevronDownIcon, { size: getControlSizeTokens(props.size).iconSize }) })));
 }) `
   color: ${(props) => props.theme.palette.text.secondary};
   transition: transform 0.2s ease-in-out;
@@ -28,16 +29,19 @@ 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, {}) })));
+    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ArrowIcon, { size: props.size }) })));
 }) `
   position: absolute;
   right: 0;
   height: 100%;
-  padding-inline: 10px;
+  width: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).adornmentWidth}px`};
   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,5 +1,7 @@
+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,9 +12,10 @@ 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: 16 }) })));
+    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(X, { size: getControlSizeTokens(props.size).iconSize }) })));
 }) `
   color: ${(props) => props.theme.palette.text.secondary};
   transition: transform 0.2s ease-in-out;
@@ -28,16 +29,19 @@ 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, {}) })));
+    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ClearIcon, { size: props.size }) })));
 }) `
   position: absolute;
   right: 0;
   height: 100%;
-  padding-inline: 10px;
+  width: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).adornmentWidth}px`};
   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.d.ts

@@ -0,0 +1,34 @@
+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;