@monolith-forensics/monolith-ui 1.7.1 → 1.8.1-dev.0

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;

package/dist/core/controlSizes.js

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

package/dist/core/index.d.ts

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

package/dist/core/index.js

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

package/dist/index.d.ts

@@ -44,4 +44,5 @@ export * from "./Tabs";
 export * from "./Divider";
 export * from "./SegmentedControl";
 export * from "./Popover";
+export * from "./Charts";
 export * from "./Utilities";

package/dist/index.js

@@ -35,4 +35,5 @@ export * from "./Tabs";
 export * from "./Divider";
 export * from "./SegmentedControl";
 export * from "./Popover";
+export * from "./Charts";
 export * from "./Utilities";