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

package/dist/DateInput/DateInput.js

@@ -10,10 +10,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import moment from "moment";
 import { useFloating, flip, offset, FloatingPortal, useDismiss, useInteractions, autoUpdate, } from "@floating-ui/react";
-import { forwardRef, useEffect, useMemo, useRef, useState, } from "react";
+import { CalendarDaysIcon } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
 import { FieldLabel, Calendar } from "..";
-import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
+import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, getControlSizeTokens, } from "../core";
 import parseTimestamp from "../Utilities/parseTimestamp";
 const StyledContainer = styled.div.attrs({
     className: "mfui-DateInput",
@@ -53,45 +54,19 @@ const StyledInputContainer = styled.div `
   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"
-                    : "11px"};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
 
   width: 100%;
-  height: ${({ size }) => size === "xs"
-    ? "26px"
-    : size === "sm"
-        ? "30px"
-        : size === "md"
-            ? "36px"
-            : size === "lg"
-                ? "42px"
-                : size === "xl"
-                    ? "50px"
-                    : "26px"};
+  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
 
-  padding: ${({ size }) => size === "xs"
-    ? "0px 8px"
-    : size === "sm"
-        ? "0px 10px"
-        : size === "md"
-            ? "0px 12px"
-            : size === "lg"
-                ? "0px 14px"
-                : size === "xl"
-                    ? "0px 16px"
-                    : "0px 8px"};
+  padding: ${({ size }) => `0px ${getControlSizeTokens(size).inputPaddingX}px`};
+
+  &[data-button-left="true"] {
+    padding-left: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+  }
 
   &[data-button-right="true"] {
-    padding-right: 36px;
+    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
   }
 
   background-color: ${({ theme, variant }) => {
@@ -151,6 +126,44 @@ const StyledInputContainer = styled.div `
     }
   }
 `;
+const CalendarTriggerButton = styled.button `
+  position: absolute;
+  left: 0;
+  height: 100%;
+  width: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(props) => props.theme.palette.text.secondary};
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    transform 0.1s ease-in-out;
+
+  &:hover {
+    color: ${(props) => props.theme.palette.text.primary};
+    background: ${(props) => props.theme.palette.action.hover};
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    color: ${(props) => props.theme.palette.primary.main};
+    background: ${(props) => props.theme.palette.action.hover};
+  }
+
+  svg {
+    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+  }
+`;
 const InputSegment = styled.div `
   user-select: none;
   display: flex;
@@ -161,17 +174,7 @@ const InputSegment = styled.div `
   border: none;
   padding: 0;
 
-  height: ${({ size }) => size === "xs"
-    ? "22px"
-    : size === "sm"
-        ? "26px"
-        : size === "md"
-            ? "32px"
-            : size === "lg"
-                ? "38px"
-                : size === "xl"
-                    ? "46px"
-                    : "22px"};
+  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
 
   height: 100%;
 
@@ -179,17 +182,7 @@ const InputSegment = styled.div `
   color: ${(props) => props.theme.palette.text.primary};
 
   ::placeholder {
-    font-size: ${({ size }) => size === "xs"
-    ? "10px"
-    : size === "sm"
-        ? "12px"
-        : size === "md"
-            ? "14px"
-            : size === "lg"
-                ? "16px"
-                : size === "xl"
-                    ? "18px"
-                    : "10px"};
+    font-size: ${({ size }) => `${getControlSizeTokens(size).placeholderFontSize}px`};
   }
 `;
 const DateInput = forwardRef(({ className, style = {}, defaultValue, value, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, disabled = false, }, _ref) => {
@@ -212,23 +205,83 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         middleware: [flip(), offset(5)],
         whileElementsMounted: autoUpdate,
     });
-    const dismiss = useDismiss(context);
-    const { getReferenceProps } = useInteractions([dismiss]);
-    const segments = useMemo(() => parseTimestamp(moment(_value).toISOString(), format, utc), [_value, format, utc]);
-    const checkValidRange = (value) => {
+    const dismiss = useDismiss(context, {
+        outsidePress: (event) => {
+            var _a, _b;
+            const target = event.target;
+            if (((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, ".mfui-DropDownMenu")) ||
+                ((_b = target === null || target === void 0 ? void 0 : target.closest) === null || _b === void 0 ? void 0 : _b.call(target, ".Menu"))) {
+                return false;
+            }
+            return true;
+        },
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+    const parseValue = useCallback((input) => {
+        if (!input)
+            return null;
+        const parsed = utc ? moment.utc(input) : moment(input);
+        return parsed.isValid() ? parsed : null;
+    }, [utc]);
+    const getEditableMoment = useCallback((input) => {
+        var _a;
+        return (_a = parseValue(input)) !== null && _a !== void 0 ? _a : (utc ? moment.utc() : moment());
+    }, [parseValue, utc]);
+    const serializeMoment = useCallback((nextMoment) => {
+        return isDateOnly
+            ? nextMoment.format("YYYY-MM-DD")
+            : nextMoment.toISOString();
+    }, [isDateOnly]);
+    const commitValue = useCallback((nextValue) => {
+        if (!isControlled.current) {
+            setUncontrolledValue(nextValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    }, [onChange]);
+    const segments = useMemo(() => parseTimestamp(_value || "", format, utc), [_value, format, utc]);
+    const checkValidRange = useCallback((value) => {
         if (!value)
             return false;
-        if (min && moment(value).isBefore(min))
+        const parsed = parseValue(value);
+        if (!parsed)
+            return false;
+        if (min && parsed.isBefore(min))
             return false;
-        if (max && moment(value).isAfter(max))
+        if (max && parsed.isAfter(max))
             return false;
         return true;
-    };
+    }, [parseValue, min, max]);
+    const getCalendarValue = useCallback(() => {
+        const parsed = parseValue(_value);
+        if (!parsed)
+            return undefined;
+        if (!utc) {
+            return parsed.toDate();
+        }
+        // Convert UTC date parts into a local Date so the Calendar highlights
+        // the same wall-clock day the input is displaying.
+        return new Date(parsed.year(), parsed.month(), parsed.date(), parsed.hour(), parsed.minute(), parsed.second(), parsed.millisecond());
+    }, [_value, parseValue, utc]);
+    const updateValue = useCallback((updater) => {
+        const currentMoment = getEditableMoment(_value);
+        const nextMoment = updater(_value, currentMoment.clone());
+        if (!nextMoment || !nextMoment.isValid())
+            return;
+        const nextValue = serializeMoment(nextMoment);
+        if (!checkValidRange(nextValue))
+            return;
+        commitValue(nextValue);
+    }, [
+        _value,
+        getEditableMoment,
+        serializeMoment,
+        checkValidRange,
+        commitValue,
+    ]);
     const handleClear = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        setUncontrolledValue(null);
-        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        commitValue(null);
         setIsOpen(false);
     };
     const handleSegmentClick = (e, segment) => {
@@ -256,6 +309,18 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         setIsOpen(true);
         setSelectedSegment(segments[0]);
     };
+    const handleCalendarTriggerClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
+            const input = mainRef.current.querySelector("div[data-type='input']");
+            if (input) {
+                input.focus();
+            }
+        }
+        setIsOpen((prev) => !prev);
+        setSelectedSegment(segments[0]);
+    };
     const nextSegment = () => {
         setSelectedSegment((prev) => {
             if (!prev)
@@ -302,34 +367,18 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         // Up Arrow
         if (e.key === "ArrowUp") {
             e.preventDefault();
-            if (selectedSegment.type !== "separator") {
-                let newValue = _value
-                    ? moment(_value).add(1, selectedSegment.type).toISOString()
-                    : moment().toISOString();
-                if (!checkValidRange(newValue))
-                    return;
-                if (isDateOnly) {
-                    newValue = moment(newValue).format("YYYY-MM-DD");
-                }
-                setUncontrolledValue(newValue);
-                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-            }
+            const segmentType = selectedSegment.type;
+            if (segmentType === "separator")
+                return;
+            updateValue((_, currentMoment) => currentMoment.add(1, segmentType));
         }
         // Down Arrow
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            if (selectedSegment.type !== "separator") {
-                let newValue = _value
-                    ? moment(_value).subtract(1, selectedSegment.type).toISOString()
-                    : moment().toISOString();
-                if (!checkValidRange(newValue))
-                    return;
-                if (isDateOnly) {
-                    newValue = moment(newValue).format("YYYY-MM-DD");
-                }
-                setUncontrolledValue(newValue);
-                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-            }
+            const segmentType = selectedSegment.type;
+            if (segmentType === "separator")
+                return;
+            updateValue((_, currentMoment) => currentMoment.subtract(1, segmentType));
         }
         // handle paste
         if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
@@ -348,10 +397,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             setUncontrolledValue((prev) => {
                 if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
                     return prev;
-                // if prev is null, use undefined - passing null to moment returns a null moment value
-                const momentValue = utc
-                    ? moment.utc(prev || undefined)
-                    : moment(prev || undefined);
+                const momentValue = getEditableMoment(prev);
                 let newValue = moment(momentValue)
                     .set(selectedSegment.momentType, parseInt(tempValue, 10) -
                     (selectedSegment.type === "month" ? 1 : 0))
@@ -359,7 +405,13 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
                 if (!checkValidRange(newValue))
                     return prev;
                 if (isDateOnly) {
-                    newValue = moment(newValue).format("YYYY-MM-DD");
+                    newValue = utc
+                        ? moment.utc(newValue).format("YYYY-MM-DD")
+                        : moment(newValue).format("YYYY-MM-DD");
+                }
+                if (isControlled.current) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                    return prev;
                 }
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
                 return newValue;
@@ -374,66 +426,65 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         if (!selectedSegment) {
             return;
         }
-        if (selectedSegment.type !== "separator") {
-            let newValue = e.deltaY > 0
-                ? moment(_value).subtract(1, selectedSegment.type).toISOString()
-                : moment(_value).add(1, selectedSegment.type).toISOString();
-            if (!checkValidRange(newValue))
-                return;
-            if (isDateOnly) {
-                newValue = moment(newValue).format("YYYY-MM-DD");
-            }
-            setUncontrolledValue(newValue);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
+        const segmentType = selectedSegment.type;
+        if (segmentType === "separator")
+            return;
+        updateValue((_, currentMoment) => e.deltaY > 0
+            ? currentMoment.subtract(1, segmentType)
+            : currentMoment.add(1, segmentType));
     };
     const handlePaste = (e) => __awaiter(void 0, void 0, void 0, function* () {
         const pastedText = yield window.navigator.clipboard.readText();
-        let parsedTimestamp = null;
+        let parsedMoment = null;
         if (!pastedText)
             return; // do nothing if clipboard is empty
         // check for unix timestamp in seconds
         else if (pastedText.match(/^\d{10}$/)) {
-            parsedTimestamp = moment.unix(parseInt(pastedText, 10)).toISOString();
+            parsedMoment = moment.unix(parseInt(pastedText, 10));
         }
         // check for unix timestamp in seconds with fractional seconds
         else if (pastedText.match(/^\d{10}\.\d{1,6}$/)) {
-            parsedTimestamp = moment.unix(parseFloat(pastedText)).toISOString();
+            parsedMoment = moment.unix(parseFloat(pastedText));
         }
         // check for unix timestamp in milliseconds
         else if (pastedText.match(/^\d{13}$/)) {
-            parsedTimestamp = moment
-                .unix(parseInt(pastedText, 10) / 1000)
-                .toISOString();
+            parsedMoment = moment.unix(parseInt(pastedText, 10) / 1000);
         }
         // check for windows ldap or filetime timestamp
         else if (pastedText.match(/^\d{18}$/)) {
-            parsedTimestamp = moment
-                .unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000)
-                .toISOString();
+            parsedMoment = moment.unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000);
         }
         // check for YMD ldap timestamp in format YYYYMMDDHHMMSSZ
         else if (pastedText.match(/^\d{14}Z$/)) {
-            parsedTimestamp = moment
-                .utc(pastedText, "YYYYMMDDHHmmssZ")
-                .toISOString();
+            parsedMoment = moment.utc(pastedText, "YYYYMMDDHHmmssZ");
         }
         // check if pasted text is any other valid timestamp
         else if (!moment(pastedText).isValid())
             return;
         else {
-            parsedTimestamp = moment.utc(pastedText).toISOString();
+            parsedMoment = utc ? moment.utc(pastedText) : moment(pastedText);
+        }
+        if (!(parsedMoment === null || parsedMoment === void 0 ? void 0 : parsedMoment.isValid()))
+            return;
+        if (utc) {
+            parsedMoment = parsedMoment.clone().utc();
         }
-        setUncontrolledValue(parsedTimestamp);
-        onChange === null || onChange === void 0 ? void 0 : onChange(parsedTimestamp);
+        const parsedTimestamp = serializeMoment(parsedMoment);
+        if (!checkValidRange(parsedTimestamp))
+            return;
+        commitValue(parsedTimestamp);
     });
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const target = e.target;
             const referenceElement = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
             const floatingElement = (_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current;
+            if (((_c = target === null || target === void 0 ? void 0 : target.closest) === null || _c === void 0 ? void 0 : _c.call(target, ".mfui-DropDownMenu")) ||
+                ((_d = target === null || target === void 0 ? void 0 : target.closest) === null || _d === void 0 ? void 0 : _d.call(target, ".Menu"))) {
+                return;
+            }
             if (floatingElement && // Check if the floating element exists
                 e.target !== referenceElement && // Check if the target is not the reference (input)
                 !referenceElement.contains(target) && // Check if the target is not inside the reference (input)
@@ -446,18 +497,18 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating]);
-    return (_jsxs(StyledContainer, { ref: (ref) => {
+    return (_jsxs(StyledContainer, Object.assign({ ref: (ref) => {
             if (typeof _ref === "function") {
                 _ref(ref);
             }
             mainRef.current = ref;
             refs.setReference(ref);
-        }, onWheel: (e) => handleWheelEvent(e), className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "input-container", onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
+        }, onWheel: (e) => handleWheelEvent(e), className: className }, getReferenceProps(), { children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "input-container", onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
                     e.preventDefault();
                     setSelectedSegment(segments[0]);
                 }, onBlur: () => {
                     setSelectedSegment(null);
-                }, "data-empty": !_value, "data-disabled": disabled, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, style: style, children: [segments.map((segment, i) => {
+                }, "data-empty": !_value, "data-disabled": disabled, role: "textbox", size: size, variant: variant, "data-button-left": enableCalendar, "data-button-right": arrow || clearable, style: style, children: [enableCalendar && (_jsx(CalendarTriggerButton, { size: size, type: "button", "aria-label": "Toggle calendar", onClick: handleCalendarTriggerClick, "data-default-btn": true, children: _jsx(CalendarDaysIcon, {}) })), segments.map((segment, i) => {
                         if (segment.type === "separator") {
                             return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
                                     e.preventDefault();
@@ -465,21 +516,25 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
                                 }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
                         }
                         return (_jsx(InputSegment, { className: "input", tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: _value ? segment.text : segment.placeholder }, i));
-                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && _value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), !disabled && enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getReferenceProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: _value ? moment(_value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
-                                    setUncontrolledValue((prev) => {
-                                        // make copy of prev variable
-                                        const oldValue = moment(prev).toISOString();
-                                        const result = `${moment(date).format("YYYY-MM-DD")}T${moment(prev || undefined).format("HH:mm:ss")}`;
-                                        let isoResult = moment(result).toISOString();
-                                        if (!checkValidRange(result))
-                                            return oldValue;
-                                        if (isDateOnly) {
-                                            isoResult = moment(result).format("YYYY-MM-DD");
-                                        }
-                                        onChange === null || onChange === void 0 ? void 0 : onChange(isoResult);
-                                        setIsOpen(closeOnSelect ? false : true);
-                                        return isoResult;
-                                    });
-                                }, includeTime: false }, 1) }) }) })) }))] }));
+                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && _value ? (_jsx(ClearButton, { size: size, onClick: handleClear })) : arrow ? (_jsx(ArrowButton, { size: size })) : null] }), !disabled && enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: getCalendarValue(), clearable: false, min: min, max: max, onChange: (date, meta) => {
+                                    if (!date) {
+                                        commitValue(null);
+                                        setIsOpen((meta === null || meta === void 0 ? void 0 : meta.source) === "month" || (meta === null || meta === void 0 ? void 0 : meta.source) === "year"
+                                            ? true
+                                            : closeOnSelect
+                                                ? false
+                                                : true);
+                                        return;
+                                    }
+                                    updateValue((_, currentMoment) => currentMoment
+                                        .year(date.getFullYear())
+                                        .month(date.getMonth())
+                                        .date(date.getDate()));
+                                    setIsOpen((meta === null || meta === void 0 ? void 0 : meta.source) === "month" || (meta === null || meta === void 0 ? void 0 : meta.source) === "year"
+                                        ? true
+                                        : closeOnSelect
+                                            ? false
+                                            : true);
+                                }, includeTime: false }, 1) }) }) })) }))] })));
 });
 export default DateInput;

package/dist/DropDownMenu/components/MenuComponent.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useRef, useState } from "react";
 import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import { getControlSizeTokens } from "../../core";
 import { MenuContext } from "./MenuContext";
 import { StyledFloatContainer } from "./StyledFloatContainer";
 import { StyledContent } from "./StyledContent";
@@ -107,7 +108,7 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
                     setHasFocusInside(false);
                     parent.setHasFocusInside(true);
-                } }))), { rightSection: arrow ? (_jsx(ChevronDownIcon, { size: 12 })) : isNested ? (_jsx(ChevronRightIcon, { size: 12 })) : null, size: buttonSize, variant: variant, selected: isOpen, nested: isNested }, buttonProps, { children: label })), _jsx(MenuContext.Provider, { value: {
+                } }))), { rightSection: arrow ? (_jsx(ChevronDownIcon, { size: getControlSizeTokens(buttonSize).iconSize })) : isNested ? (_jsx(ChevronRightIcon, { size: getControlSizeTokens(buttonSize).iconSize })) : null, size: buttonSize, variant: variant, selected: isOpen, nested: isNested }, buttonProps, { children: label })), _jsx(MenuContext.Provider, { value: {
                     activeIndex,
                     setActiveIndex,
                     getItemProps,

package/dist/DropDownMenu/components/MenuItem.js

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import styled from "styled-components";
 import { Button } from "../../Button";
+import { getControlSizeTokens } from "../../core";
 import { useFloatingTree, useListItem, useMergeRefs } from "@floating-ui/react";
 import { MenuContext } from "./MenuContext";
 import Tooltip from "../../Tooltip";
@@ -43,12 +44,12 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     border-radius: 3px;
     display: flex;
     flex-direction: row;
-    gap: 5px;
+    gap: ${({ size = "sm" }) => `${getControlSizeTokens(size).iconGap}px`};
     align-items: center;
-    min-height: 25px;
+    min-height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
     width: 100%;
     min-width: 100%;
-    height: auto;
+    height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
     position: relative;
     user-select: none;
     outline: none;
@@ -65,17 +66,7 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     font-weight: normal;
     letter-spacing: normal;
 
-    padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
+    padding: ${({ size = "sm" }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
     &[data-disabled="true"] {
       opacity: 0.5;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -15,6 +15,7 @@ import styled from "styled-components";
 import { FixedSizeList } from "react-window";
 import { Plus } from "lucide-react";
 import CheckBox from "../../CheckBox";
+import { getControlSizeTokens } from "../../core";
 import { DropDownMenu } from "../DropDownMenu";
 import { MenuItem } from "./MenuItem";
 import { useInfiniteQuery } from "@tanstack/react-query";
@@ -62,28 +63,9 @@ const GroupHeader = styled.div `
   color: ${(props) => props.theme.palette.text.secondary};
   font-weight: 500;
   user-select: none;
-  padding: ${({ $size }) => $size === "xs"
-    ? "2px 8px"
-    : $size === "sm"
-        ? "4px 10px"
-        : $size === "md"
-            ? "4px 12px"
-            : $size === "lg"
-                ? "5px 14px"
-                : $size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
-  font-size: ${({ $size }) => $size === "xs"
-    ? "10px"
-    : $size === "sm"
-        ? "11px"
-        : $size === "md"
-            ? "13px"
-            : $size === "lg"
-                ? "15px"
-                : $size === "xl"
-                    ? "17px"
-                    : "10px"};
+  min-height: ${({ $size = "sm" }) => `${getControlSizeTokens($size).menuRowHeight}px`};
+  padding: ${({ $size = "sm" }) => `0px ${getControlSizeTokens($size).menuItemPaddingX}px`};
+  font-size: ${({ $size = "sm" }) => `${getControlSizeTokens($size).menuGroupFontSize}px`};
 
   .group-line {
     border-top: 1px solid ${(props) => props.theme.palette.divider};
@@ -197,7 +179,8 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
         }
     }, [targetElm.current, isLoading]);
     const overscanCount = 10;
-    const itemHeight = 25;
+    const sizeTokens = getControlSizeTokens(size || "sm");
+    const itemHeight = sizeTokens.menuRowHeight;
     const itemCount = (displayItems === null || displayItems === void 0 ? void 0 : displayItems.length) || 0;
     const height = viewPortDimensions.height
         ? viewPortDimensions.height
@@ -218,7 +201,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, se
                     alignItems: "center",
                     height: "100%",
                     padding: "10px 0",
-                }, children: [_jsx("div", { style: { fontSize: "12px" }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: _jsx(FixedSizeList, { itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerRef: listElm, children: ({ data, index, style }) => {
+                }, children: [_jsx("div", { style: { fontSize: `${sizeTokens.supportingFontSize}px` }, children: "Loading..." }), _jsx(Loader, {})] })), !isLoading && (_jsx(ListViewPort, { ref: targetElm, children: _jsx(FixedSizeList, { itemData: displayItems, overscanCount: overscanCount, height: height, width: width, itemCount: itemCount, itemSize: itemHeight, outerRef: listElm, children: ({ data, index, style }) => {
                         const item = data === null || data === void 0 ? void 0 : data[index];
                         if (!item)
                             return null;

package/dist/DropDownMenu/components/StyledFloatContainer.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
 export const StyledFloatContainer = styled.div `
-  z-index: 1500;
+  z-index: 100002;
   outline: none;
 `;

package/dist/FieldLabel/FieldLabel.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import * as Tooltip from "@radix-ui/react-tooltip";
+import { getControlSizeTokens } from "../core";
 export const InfoComponent = styled(({ className, children, description, label }) => {
     if (!description)
         return children;
@@ -56,17 +57,8 @@ const FieldLabel = styled(({ className, children, error, description, size = "sm
     margin-left: 8px;
   }
 
-  font-size: ${({ size = "sm" }) => size === "xs"
-    ? "10px"
-    : size === "sm"
-        ? "12px"
-        : size === "md"
-            ? "14px"
-            : size === "lg"
-                ? "16px"
-                : size === "xl"
-                    ? "18px"
-                    : "12px"};
+  font-size: ${({ size = "sm" }) => `${getControlSizeTokens(size).labelFontSize}px`};
+  line-height: 1.3;
 
   transition: all 0.2s ease;
   color: ${({ theme, error }) => theme.palette.text.secondary};
@@ -92,7 +84,7 @@ const FieldLabel = styled(({ className, children, error, description, size = "sm
     transition: all 0.2s ease;
     cursor: pointer;
     color: ${({ theme }) => theme.palette.error.main};
-    font-size: 10px;
+    font-size: ${({ size = "sm" }) => `${getControlSizeTokens(size).supportingFontSize}px`};
     max-width: 85%;
     white-space: nowrap;
     overflow: hidden;