pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.62

package/dist/esm/Components/DatePicker/ThemeDatePicker.js

@@ -1,21 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { isStringValueProps, } from "./DatePickerProps.js";
 import { RangeDatePicker } from "./RangeDatePicker.js";
 import { SingleDatePicker } from "./SingleDatePicker.js";
 import { TimeOnlyPicker } from "./TimeOnlyPicker.js";
 import { inferPickerTypeFromFormat } from "./pickerField.js";
-export function ThemeDatePicker(props) {
+function ThemeDatePickerInner(props, ref) {
     var _a, _b;
     if (props.isRange) {
-        return _jsx(RangeDatePicker, { ...props });
+        return _jsx(RangeDatePicker, { ref: ref, ...props });
     }
     const singleProps = props;
     const dateFormat = (_a = singleProps.dateFormat) !== null && _a !== void 0 ? _a : "dd/MM/yyyy";
     const pickerType = (_b = singleProps.pickerType) !== null && _b !== void 0 ? _b : inferPickerTypeFromFormat(dateFormat);
     const isTime = pickerType === "time";
     if (isStringValueProps(singleProps)) {
-        return isTime ? _jsx(TimeOnlyPicker, { ...singleProps }) : _jsx(SingleDatePicker, { ...singleProps });
+        return isTime ? _jsx(TimeOnlyPicker, { ref: ref, ...singleProps }) : _jsx(SingleDatePicker, { ref: ref, ...singleProps });
     }
-    return isTime ? _jsx(TimeOnlyPicker, { ...singleProps }) : _jsx(SingleDatePicker, { ...singleProps });
+    return isTime ? _jsx(TimeOnlyPicker, { ref: ref, ...singleProps }) : _jsx(SingleDatePicker, { ref: ref, ...singleProps });
 }
+export const ThemeDatePicker = forwardRef(ThemeDatePickerInner);
+ThemeDatePicker.displayName = "ThemeDatePicker";
 export default ThemeDatePicker;

package/dist/esm/Components/DatePicker/TimeOnlyPicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState, useRef } from "react";
+import { forwardRef, useEffect, useMemo, useState, useRef } from "react";
 import { Box, FormControl, Popover, PopoverBody, PopoverContent, PopoverAnchor, useDisclosure, Button as ChakraButton, } from "@chakra-ui/react";
 import { addDays } from "date-fns";
 import { isStringValueProps, } from "./DatePickerProps.js";
@@ -15,7 +15,7 @@ import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-export function TimeOnlyPicker(props) {
+function TimeOnlyPickerInner(props, ref) {
     var _a, _b, _c, _d;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "HH:mm", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, } = props;
     const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
@@ -92,7 +92,7 @@ export function TimeOnlyPicker(props) {
         };
     }, [isOpen, onClose]);
     const resolvedTempDate = tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0);
-    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsx(Box, { ref: inputWrapperRef, children: _jsx(TimePickerInput, { value: tempDate, onChange: (date) => {
+    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsx(Box, { ref: inputWrapperRef, children: _jsx(TimePickerInput, { ref: ref, value: tempDate, onChange: (date) => {
                                         handleTimeInputChange(date);
                                     }, dateFormat: dateFormat, isDisabled: disabled, placeholder: placeholder, id: ids.inputId, name: name, isRequired: isRequired, describedBy: ids.describedBy, onFocus: () => {
                                         if (!disabled && !isOpen)
@@ -101,4 +101,6 @@ export function TimeOnlyPicker(props) {
                                             handleTimePickerChange(updatedDate);
                                         } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }
+export const TimeOnlyPicker = forwardRef(TimeOnlyPickerInner);
+TimeOnlyPicker.displayName = "TimeOnlyPicker";
 export default TimeOnlyPicker;

package/dist/esm/Components/DatePicker/TimePickerInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { Box, Input, InputGroup, InputRightElement } from "@chakra-ui/react";
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { Box, Input, InputGroup, InputRightElement, useMergeRefs } from "@chakra-ui/react";
 import { format, parse, isValid } from "date-fns";
 import { ClockIcon } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
@@ -89,13 +89,14 @@ const caretFromDigitIndex = (digitIndex, digitsLen) => {
     return digitIndex + 1;
 };
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-/** Masked HH:mm digit input, no seconds. */
-export const TimePickerInput = ({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = DEFAULT_CONTROL_SIZE, }) => {
+/** Masked HH:mm digit input, no seconds; `ref` is the `<input>`. */
+export const TimePickerInput = forwardRef(function TimePickerInput({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = DEFAULT_CONTROL_SIZE, }, ref) {
     const theme = useCustomTheme();
     const sizeKey = typeof size === "string" ? size : DEFAULT_CONTROL_SIZE;
     const iconPx = getTextInputIconSizePx(sizeKey);
     const iconWrapperSx = getTextInputIconWrapperSx(sizeKey);
     const inputRef = useRef(null);
+    const mergedRef = useMergeRefs(inputRef, ref);
     const [digits, setDigits] = useState("");
     const digitsRef = useRef("");
     const [, setIsFocused] = useState(false);
@@ -402,5 +403,6 @@ export const TimePickerInput = ({ value, onChange, dateFormat, isDisabled: disab
             inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return (_jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, id: id, name: name, isRequired: isRequired, "aria-describedby": describedBy, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey }), _jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconWrapperSx, children: _jsx(ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
-};
+    return (_jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: mergedRef, id: id, name: name, isRequired: isRequired, "aria-describedby": describedBy, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey }), _jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconWrapperSx, children: _jsx(ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
+});
+TimePickerInput.displayName = "TimePickerInput";

package/dist/esm/Components/DescriptionList/DescriptionList.js

@@ -7,13 +7,13 @@ const DEFAULT_COLUMNS = { base: 1, md: 2 };
 const toTemplateColumns = (columns) => Object.fromEntries(Object.entries(columns).map(([bp, count]) => [bp, `repeat(${count}, minmax(0, 1fr))`]));
 const isMissing = (value) => value === null || value === undefined || value === "";
 /** Label/value read grid: semantic dl/dt/dd, "stacked" (label above) or "inline" (label left, value right). */
-const DescriptionList = ({ items, columns = DEFAULT_COLUMNS, layout = "stacked", emptyValue = "—", isLoading = false, loadingRows = 6, }) => {
+const DescriptionList = ({ items, columns = DEFAULT_COLUMNS, layout = "stacked", emptyValue = "—", isLoading = false, loadingRows = 6, ...rest }) => {
     const { colors } = useCustomTheme();
     const templateColumns = toTemplateColumns(columns);
     if (isLoading) {
-        return (_jsx(Grid, { role: "group", "aria-busy": "true", "aria-label": "Loading", templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: Array.from({ length: loadingRows }, (_, index) => (_jsxs(Flex, { direction: "column", gap: 1.5, children: [_jsx(Skeletons, { type: "skeleton", height: 3, width: "40%" }), _jsx(Skeletons, { type: "skeleton", height: 4, width: "75%" })] }, index))) }));
+        return (_jsx(Grid, { ...rest, role: "group", "aria-busy": "true", "aria-label": "Loading", templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: Array.from({ length: loadingRows }, (_, index) => (_jsxs(Flex, { direction: "column", gap: 1.5, children: [_jsx(Skeletons, { type: "skeleton", height: 3, width: "40%" }), _jsx(Skeletons, { type: "skeleton", height: 4, width: "75%" })] }, index))) }));
     }
-    return (_jsx(Grid, { as: "dl", m: 0, templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: items.map((item, index) => {
+    return (_jsx(Grid, { ...rest, as: "dl", m: 0, templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: items.map((item, index) => {
             const displayValue = isMissing(item.value) ? emptyValue : item.value;
             const canCopy = item.copyable && typeof item.value === "string" && item.value !== "";
             const copyTooltip = typeof item.label === "string" ? `Copy ${item.label}` : "Copy";

package/dist/esm/Components/Dropdown/DropDown.js

@@ -11,6 +11,7 @@ import { rafThrottle } from "../../Utils/rafThrottle.js";
 import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 import { optionRowSpec, OPTION_ROW_RADIUS } from "../../Theme/tokens/primitives/optionRowSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 const MotionBox = motion(forwardRef((props, ref) => (_jsx(Box, { ref: ref, ...props }))));
@@ -204,6 +205,8 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
         };
     }, [isOpen, updateMenuPos]);
     useEffect(() => {
+        if (!isOpen)
+            return;
         const handleClickOutside = (event) => {
             var _a, _b;
             const target = event.target;
@@ -218,7 +221,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [onClose]);
+    }, [isOpen, onClose]);
     const setMenuRef = (node) => {
         menuRef.current = node;
         if (typeof ref === "function")
@@ -237,7 +240,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
     };
     const DropdownContentRender = () => {
         const hoverTint = rowBackgrounds.active;
-        return (_jsx(List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.surfaceRaised, border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: theme.shadows.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: scrollbarStyles(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => (_jsxs(ListItem, { ref: (node) => {
+        return (_jsx(List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.surfaceRaised, border: `${BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: theme.shadows.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: scrollbarStyles(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => (_jsxs(ListItem, { ref: (node) => {
                     itemRefs.current[index] = node;
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
                     handleListItemClick(option.id, option.label);
@@ -254,10 +257,15 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
                     color: theme.colors.accentText,
                     boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
                 }, borderBottom: divider
-                    ? `0.063rem solid ${theme.colors.boxborder[200]}`
+                    ? `${BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`
                     : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...reducedMotionSx() }, style: ItemStyle, fontWeight: 500, children: [option.image && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), _jsx(Box, { as: "span", fontSize: rowSpec.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));
     };
-    return (_jsxs(Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && (_jsx(Portal, { children: _jsx(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: prefersReducedMotion ? false : { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
+    return (_jsxs(Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && (_jsx(Portal, { children: _jsx(MotionBox, { ref: setMenuRef, position: "fixed", zIndex: "popover", initial: prefersReducedMotion ? false : { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: {
+                        top: `${menuPos.top}px`,
+                        left: `${menuPos.left}px`,
+                        minWidth: `${menuPos.width}px`,
+                        ...headStyle,
+                    }, children: DropdownContentRender() }) }))] }));
 });
 Dropdown.displayName = "Dropdown";
 export default Dropdown;

package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, PinInput, PinInputField, Box, Text, Button, Flex, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { fieldFocusVisible } from "../../../Theme/chakra/focusRing.styles.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
 import { MailCheck } from "lucide-react";
 /** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
 export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = useCustomTheme();
-    return (_jsxs(Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.accentText }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: _jsx(PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+    return (_jsxs(Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.accentText }) }), _jsx(Text, { fontSize: "2xl", fontWeight: 700, mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: _jsx(PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.accentText, fontWeight: 600, onClick: resendMail, children: "Resend Code" })] }) })] }));
 }

package/dist/esm/Components/EmptyState/EmptyState.js

@@ -21,7 +21,7 @@ const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "seconda
         ? colors.gray
         : colors.semantic[scheme];
 /** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
-const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon: IconComp = Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, }) => {
+const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon: IconComp = Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, ...rest }) => {
     const theme = useCustomTheme();
     const s = sizeMap[size];
     const hasDescription = description !== undefined && description !== null && description !== false && description !== "";
@@ -39,7 +39,7 @@ const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon
                 bg: "transparent",
             }
             : {};
-    return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? (_jsx(Image, { src: image, alt: imageAlt, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: reducedMotionSx() })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, position: "relative", isolation: "isolate", _before: {
+    return (_jsxs(Flex, { ...rest, direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? (_jsx(Image, { src: image, alt: imageAlt, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: reducedMotionSx() })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, position: "relative", isolation: "isolate", _before: {
                     content: '""',
                     position: "absolute",
                     inset: "-0.5rem",

package/dist/esm/Components/FileUpload/FileUpload.js

@@ -6,12 +6,28 @@ import { Upload, FileText, Eye } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { DEFAULT_MAX_SIZE_KB, mimeMap, toMB } from "./constants.js";
+import { useObjectUrl } from "./useObjectUrl.js";
 import Modal, { ModalBody, ModalHeader } from "../Modal/Modal.js";
 import { TextLabel } from "../Common/FormLabel.js";
 import FieldMessage from "../Common/FieldMessage.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
 import { FIELD_RADIUS, FIELD_TRANSITION } from "../Common/fieldStyles.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+const FileThumbnail = ({ file, radius, onPreview, }) => {
+    const url = useObjectUrl(file);
+    return (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+            ".hover-icon": {
+                opacity: 1,
+                bg: "blackAlpha.500",
+            },
+        }, onClick: () => url && onPreview(url), children: [_jsx("img", { src: url, alt: file.name, style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    borderRadius: radius,
+                } }), _jsx(Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: _jsx(Eye, { color: "white" }) })] }));
+};
 /** Controlled drop zone — you own the `uploadedFiles`/File[] state; `maxSizeKB` defaults to 5 MB. */
 const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = DEFAULT_MAX_SIZE_KB, maxFiles = undefined, progress = {}, size = "md", inputAriaLabel = "Upload files", id, label, isRequired = false, isDisabled = false, error = false, errorMessage, helperText, }) => {
     const ids = useFieldIds(id, { error, errorMessage, helperText });
@@ -66,29 +82,19 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                                     "aria-label": label !== null && label !== void 0 ? label : inputAriaLabel,
                                     "aria-describedby": ids.describedBy,
                                     "aria-disabled": isDisabled || undefined,
-                                }), border: "1px dashed", borderColor: border, borderRadius: FIELD_RADIUS, p: compact ? 3 : 10, textAlign: "center", bg: isDisabled ? colors.background[100] : colors.background[50], color: isDisabled ? colors.textMuted : undefined, cursor: isDisabled ? "not-allowed" : "pointer", transition: FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: focusVisibleStyles(colors), position: "relative", children: _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), _jsxs(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }) }), _jsx("input", { ...getInputProps({
+                                }), border: "1px dashed", borderColor: border, borderRadius: FIELD_RADIUS, p: compact ? 3 : 10, textAlign: "center", bg: isDisabled ? colors.background[100] : colors.background[50], color: isDisabled ? colors.textMuted : undefined, cursor: isDisabled ? "not-allowed" : "pointer", transition: FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: focusVisibleStyles(colors), position: "relative", children: _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: 500, fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), _jsxs(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }) }), _jsx("input", { ...getInputProps({
                                     id: ids.inputId,
                                     disabled: isDisabled,
                                     "aria-label": label ? undefined : inputAriaLabel,
                                     "aria-describedby": ids.describedBy,
-                                }) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(ListItem, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
-                                                                ".hover-icon": {
-                                                                    opacity: 1,
-                                                                    bg: "blackAlpha.500",
-                                                                },
-                                                            }, onClick: () => {
-                                                                setPreviewUrl(URL.createObjectURL(file));
+                                }) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "sm", lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(ListItem, { borderWidth: BORDER_WIDTHS.hairline, borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsx(FileThumbnail, { file: file, radius: radii.base, onPreview: (url) => {
+                                                                setPreviewUrl(url);
                                                                 setPreviewTitle(file.name);
                                                                 onOpen();
-                                                            }, children: [_jsx("img", { src: URL.createObjectURL(file), alt: file.name, style: {
-                                                                        width: "100%",
-                                                                        height: "100%",
-                                                                        objectFit: "cover",
-                                                                        borderRadius: radii.base,
-                                                                    } }), _jsx(Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: _jsx(Eye, { color: "white" }) })] })) : (_jsx(ListIcon, { as: FileText, color: accentTextOnCanvas(colors.blue, colors.background[50]), boxSize: 8 })), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontSize: "sm", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: [toMB(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && (_jsx(CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (_jsx(Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), _jsxs(Modal, { isOpen: isOpen, onClose: () => {
+                                                            } })) : (_jsx(ListIcon, { as: FileText, color: accentTextOnCanvas(colors.blue, colors.background[50]), boxSize: 8 })), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontSize: "sm", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: [toMB(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && (_jsx(CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (_jsx(Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), _jsxs(Modal, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);
-                }, size: "xl", isCentered: true, children: [_jsx(ModalHeader, { children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 16, textTransform: "uppercase", children: previewTitle }) }), _jsx(ModalBody, { children: previewUrl && (_jsx(Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" })) })] })] }));
+                }, size: "xl", isCentered: true, children: [_jsx(ModalHeader, { children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "md", textTransform: "uppercase", children: previewTitle }) }), _jsx(ModalBody, { children: previewUrl && (_jsx(Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" })) })] })] }));
 };
 export default FileUpload;

package/dist/esm/Components/FileUpload/useObjectUrl.js

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+export const useObjectUrl = (file) => {
+    const [url, setUrl] = useState();
+    useEffect(() => {
+        const created = URL.createObjectURL(file);
+        setUrl(created);
+        return () => URL.revokeObjectURL(created);
+    }, [file]);
+    return url;
+};

package/dist/esm/Components/FileUploader/FileUploader.js

@@ -7,6 +7,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { FIELD_RADIUS } from "../Common/fieldStyles.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 /** Self-contained widget; onFilesChange returns {id,name,size,previewUrl} metadata, never real File objects — cannot be used to upload bytes. */
 const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
     const { showToast } = useToaster();
@@ -71,9 +72,14 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     const handleBrowseClick = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
     // ✅ Convert ["png","pdf","zip"] → ".png,.pdf,.zip" for input accept
     const acceptString = acceptTypes.map((ext) => `.${ext}`).join(",");
-    return (_jsxs(Box, { maxW: "500px", mx: "auto", p: 6, children: [_jsxs(Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), _jsxs(Box, { "data-testid": "file-uploader-dropzone", border: "1px dashed", borderColor: isDragOver ? colors.primary[500] : colors.boxborder[500], bg: isDragOver ? colors.backgroundColor.muted : undefined, borderRadius: FIELD_RADIUS, transition: transitionFor(["border-color", "background-color"]), p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && (_jsx(Box, { children: _jsx(Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
+    return (_jsxs(Box, { maxW: "500px", mx: "auto", p: 6, children: [_jsxs(Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", _jsxs(Text, { as: "span", fontWeight: 500, color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", _jsxs(Text, { as: "span", fontWeight: 500, children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), _jsxs(Box, { "data-testid": "file-uploader-dropzone", border: "1px dashed", borderColor: isDragOver ? colors.primary[500] : colors.boxborder[500], bg: isDragOver ? colors.backgroundColor.muted : undefined, borderRadius: FIELD_RADIUS, transition: transitionFor(["border-color", "background-color"]), p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && (_jsx(Box, { children: _jsx(Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
                                 var _a;
-                                return (_jsxs(Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [_jsxs(HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? (_jsx(Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : (_jsx(Box, { boxSize: "28px", borderRadius: "sm", bg: colors.backgroundColor.muted, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: colors.textMuted, children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), _jsxs(Box, { minW: "0", children: [_jsx(Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), _jsx(HStack, { spacing: 1, children: _jsx(Tooltip, { label: "Remove", children: _jsx(IconButton, { "aria-label": "Remove", icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
-                            }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), _jsxs(Box, { "data-testid": "file-uploader-drop-target", p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", onClick: handleBrowseClick, children: [_jsx(Box, { children: _jsxs(Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", _jsx(Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
+                                return (_jsxs(Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [_jsxs(HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? (_jsx(Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : (_jsx(Box, { boxSize: "28px", borderRadius: "sm", bg: colors.backgroundColor.muted, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: colors.textMuted, children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), _jsxs(Box, { minW: "0", children: [_jsx(Text, { fontSize: "sm", fontWeight: 500, noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), _jsx(HStack, { spacing: 1, children: _jsx(Tooltip, { label: "Remove", children: _jsx(IconButton, { "aria-label": "Remove", icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
+                            }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), _jsxs(Box, { "data-testid": "file-uploader-drop-target", p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: handleBrowseClick, onKeyDown: (e) => {
+                            if (e.key !== "Enter" && e.key !== " ")
+                                return;
+                            e.preventDefault();
+                            handleBrowseClick();
+                        }, children: [_jsx(Box, { children: _jsxs(Text, { fontWeight: 500, fontSize: "md", children: ["Drag and drop the files here, or", _jsx(Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 export default FileUploader;

package/dist/esm/Components/FilterBar/FilterBar.js

@@ -5,8 +5,8 @@ import Tag from "../Tag/Tag.js";
 import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 /** Toolbar row: search + filter controls left, summary + actions right, active filters as chips below. */
-const FilterBar = ({ search, searchLabel = "Search", children, actions, summary, activeFilters = [], onRemoveFilter, onClearAll, }) => {
+const FilterBar = ({ search, searchLabel = "Search", children, actions, summary, activeFilters = [], onRemoveFilter, onClearAll, ...rest }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Flex, { direction: "column", gap: 2, w: "100%", children: [_jsxs(Flex, { gap: 3, wrap: "wrap", align: "center", children: [search && (_jsx(Flex, { role: "search", "aria-label": searchLabel, children: search })), children, _jsxs(Flex, { gap: 2, align: "center", wrap: "wrap", ml: { base: 0, md: "auto" }, children: [summary && (_jsx(Text, { fontSize: "xs", color: colors.textMuted, whiteSpace: "nowrap", children: summary })), actions] })] }), activeFilters.length > 0 && (_jsxs(Flex, { gap: 1.5, wrap: "wrap", align: "center", children: [activeFilters.map((filter) => (_jsx(Tag, { label: filter.label, colorScheme: "gray", icon: onRemoveFilter ? X : undefined, onIconClick: onRemoveFilter ? () => onRemoveFilter(filter.id) : undefined }, filter.id))), onClearAll && _jsx(Button, { variant: "ghost", colorScheme: "gray", label: "Clear all", onClick: onClearAll })] }))] }));
+    return (_jsxs(Flex, { ...rest, direction: "column", gap: 2, w: "100%", children: [_jsxs(Flex, { gap: 3, wrap: "wrap", align: "center", children: [search && (_jsx(Flex, { role: "search", "aria-label": searchLabel, children: search })), children, _jsxs(Flex, { gap: 2, align: "center", wrap: "wrap", ml: { base: 0, md: "auto" }, children: [summary && (_jsx(Text, { fontSize: "xs", color: colors.textMuted, whiteSpace: "nowrap", children: summary })), actions] })] }), activeFilters.length > 0 && (_jsxs(Flex, { gap: 1.5, wrap: "wrap", align: "center", children: [activeFilters.map((filter) => (_jsx(Tag, { label: filter.label, colorScheme: "gray", icon: onRemoveFilter ? X : undefined, onIconClick: onRemoveFilter ? () => onRemoveFilter(filter.id) : undefined }, filter.id))), onClearAll && _jsx(Button, { variant: "ghost", colorScheme: "gray", label: "Clear all", onClick: onClearAll })] }))] }));
 };
 export default FilterBar;

package/dist/esm/Components/FilterSidebar/FilterSidebar.js

@@ -77,7 +77,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
         });
     };
     const items = sidebarOptions.map((section) => ({
-        header: (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [_jsx(ToolTip, { label: section.label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.text[500], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: section.label }) }), (() => {
+        header: (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [_jsx(ToolTip, { label: section.label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Text, { fontWeight: 700, fontSize: "md", color: theme.colors.text[500], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: section.label }) }), (() => {
                     const sel = internalSelected[section.id];
                     const hasValue = Array.isArray(sel) ? sel.length > 0 : !!sel;
                     return hasValue;
@@ -116,7 +116,11 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                         border: none;
                         cursor: pointer;
                       }
-                    ` }), _jsxs(Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [_jsx(Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.boxborder[200], borderRadius: "full" }), _jsx(Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), _jsx(Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsx(Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsxs(Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: "lg", fontSize: "11px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), _jsxs(Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: "lg", fontSize: "11px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => (_jsx(Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.boxborder[500] }, `tick-${p}`))), _jsx("input", { type: "range", "aria-label": `${section.label}: minimum`, min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
+                    ` }), _jsxs(Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [_jsx(Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.boxborder[200], borderRadius: "full" }), _jsx(Box, { position: "absolute", height: "6px", style: {
+                                        left: `${minPercent}%`,
+                                        width: `${maxPercent - minPercent}%`,
+                                        background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`,
+                                    }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), _jsx(Box, { position: "absolute", style: { left: `${minPercent}%` }, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsx(Box, { position: "absolute", style: { left: `${maxPercent}%` }, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsxs(Box, { position: "absolute", style: { left: `${minPercent}%` }, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: "lg", fontSize: "xs-minus", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), _jsxs(Box, { position: "absolute", style: { left: `${maxPercent}%` }, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: "lg", fontSize: "xs-minus", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => (_jsx(Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.boxborder[500] }, `tick-${p}`))), _jsx("input", { type: "range", "aria-label": `${section.label}: minimum`, min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
                                         const min = Math.min(Number(e.target.value), currentMax - (step || 1));
                                         const nextVal = [min, currentMax];
                                         setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
@@ -142,13 +146,13 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                         pointerEvents: 'none', // Allow clicks to pass through track
                                         zIndex: 3,
                                         margin: 0,
-                                    } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-min-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-min-${section.id}-${v}`, onClick: () => {
+                                    } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-min-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-min-${section.id}-${v}`, onClick: () => {
                                                                 const min = v;
                                                                 const max = currentMax;
                                                                 const nextVal = [Math.min(min, max), Math.max(min, max)];
                                                                 setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
                                                                 setOpenPrice({});
-                                                            }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-max-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-max-${section.id}-${v}`, onClick: () => {
+                                                            }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-max-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-max-${section.id}-${v}`, onClick: () => {
                                                             const max = v;
                                                             const min = currentMin;
                                                             const nextVal = [Math.min(min, max), Math.max(min, max)];
@@ -198,7 +202,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                                     toggleOption(section.id, opt.id, !isChecked);
                                                 }, children: opt.label })] }), typeof opt.count === "number" && (_jsx(Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id));
                         }));
-                    })(), (section.options && section.options.length > maxVisible) && (_jsx(Text, { as: "span", role: "button", tabIndex: 0, fontSize: "sm", fontWeight: "medium", color: theme.colors.accentText, cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] })), onKeyDown: (e) => {
+                    })(), (section.options && section.options.length > maxVisible) && (_jsx(Text, { as: "span", role: "button", tabIndex: 0, fontSize: "sm", fontWeight: 500, color: theme.colors.accentText, cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] })), onKeyDown: (e) => {
                             if (e.key === "Enter" || e.key === " ") {
                                 e.preventDefault();
                                 setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] }));
@@ -244,6 +248,6 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 },
         },
     }));
-    return (_jsxs(Box, { w: width, bg: theme.colors.background[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.boxborder[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [_jsxs(Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), _jsx(Accordion, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
+    return (_jsxs(Box, { w: width, bg: theme.colors.background[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.boxborder[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [_jsxs(Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Text, { fontSize: "lg", fontWeight: 700, color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), _jsx(Accordion, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
 };
 export default FilterSidebar;

package/dist/esm/Components/Form/FormWrapper.js

@@ -4,6 +4,6 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 /** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. */
 const FormWrapper = ({ icon, text, children, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && _jsx(Icon, { as: icon, boxSize: "1rem", color: colors.header[500] }), text && (_jsx(Box, { fontWeight: 600, fontSize: "0.75rem", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), _jsx(Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
+    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && _jsx(Icon, { as: icon, boxSize: "1rem", color: colors.header[500] }), text && (_jsx(Box, { fontWeight: 600, fontSize: "xs", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), _jsx(Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
 };
 export default FormWrapper;

package/dist/esm/Components/FormField/FormField.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, cloneElement, forwardRef, isValidElement } from "react";
+import { Box, FormControl } from "@chakra-ui/react";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import { fieldLabelStyles } from "../Common/FormLabel.js";
+import { fieldMessageStyles, fieldMessageVisibility } from "../Common/fieldMessageStyles.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const joinIds = (...ids) => [...new Set(ids.flatMap((value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.split(/\s+/)) !== null && _a !== void 0 ? _a : []; }).filter(Boolean))].join(" ") || undefined;
+const asWirableElement = (children) => typeof children !== "function" && isValidElement(children) && children.type !== Fragment
+    ? children
+    : undefined;
+const FormField = forwardRef(function FormField({ label, id, isRequired = false, error = false, errorMessage, helperText, layout = "vertical", labelWidth = "12rem", children, ...rest }, ref) {
+    var _a;
+    const { colors } = useCustomTheme();
+    const element = asWirableElement(children);
+    const own = (_a = element === null || element === void 0 ? void 0 : element.props) !== null && _a !== void 0 ? _a : {};
+    const ids = useFieldIds(id !== null && id !== void 0 ? id : own.id, { error, errorMessage, helperText });
+    const { showError, showHelper } = fieldMessageVisibility({ error, errorMessage, helperText });
+    const describedBy = joinIds(own["aria-describedby"], ids.describedBy);
+    const control = {
+        id: ids.inputId,
+        "aria-labelledby": ids.labelId,
+        "aria-describedby": describedBy,
+        "aria-invalid": ids.controlProps["aria-invalid"],
+        "aria-required": isRequired || undefined,
+    };
+    const isSelfNamed = Boolean(own["aria-label"] || own["aria-labelledby"]);
+    const wired = element
+        ? cloneElement(element, {
+            id: control.id,
+            ...(isSelfNamed ? {} : { "aria-labelledby": control["aria-labelledby"] }),
+            ...(describedBy ? { "aria-describedby": describedBy } : {}),
+            ...(error ? { "aria-invalid": true } : {}),
+            ...(isRequired ? { "aria-required": true } : {}),
+        })
+        : typeof children === "function"
+            ? children(control)
+            : children;
+    const message = showError && errorMessage ? (_jsx(ErrorMessage, { id: ids.errorId, errorMessage: errorMessage })) : showHelper ? (_jsx(Box, { id: ids.helperId, ...fieldMessageStyles(colors), children: helperText })) : null;
+    const isHorizontal = layout === "horizontal";
+    const labelStyles = fieldLabelStyles(colors);
+    return (_jsxs(FormControl, { ...rest, ref: ref, id: ids.inputId, isRequired: isRequired, isInvalid: error, ...(isHorizontal
+            ? {
+                display: "grid",
+                gridTemplateColumns: { base: "minmax(0, 1fr)", md: `${labelWidth} minmax(0, 1fr)` },
+                columnGap: 4,
+                alignItems: "start",
+            }
+            : {}), children: [_jsx(Box, { as: "label", id: ids.labelId, htmlFor: ids.inputId, ...labelStyles, display: "block", ...(isHorizontal ? { alignSelf: { md: "center" }, mb: { base: labelStyles.mb, md: 0 } } : {}), children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [_jsx(Box, { as: "span", children: label }), isRequired && (_jsx(Box, { as: "span", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }) }), isHorizontal ? (_jsxs(_Fragment, { children: [_jsx(Box, { minW: 0, children: wired }), message && _jsx(Box, { gridColumn: { md: 2 }, children: message })] })) : (_jsxs(_Fragment, { children: [wired, message] }))] }));
+});
+export default FormField;

package/dist/esm/Components/FormField/FormFieldProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Header/HeaderActions.js

@@ -18,10 +18,10 @@ const HeaderActions = ({ select, edit, create, surface, }) => {
         elements.push(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": select.ariaLabel || select.selectPlaceholderText || "Select", native: (_c = select.native) !== null && _c !== void 0 ? _c : false, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
-        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return (_jsx(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(VeritcalDivider, {}), el] }, i))) }));
 };

package/dist/esm/Components/Header/components/mobileMenu.js

@@ -20,7 +20,7 @@ const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, sur
                                     ? onFilled(activeBg, colors.white, colors.black)
                                     : color, bg: item.children.some((subItem) => isActive(subItem.href))
                                     ? activeBg
-                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (_jsx(ChevronDown, { size: 16 })) : (_jsx(ChevronRight, { size: 16 })), px: 2, children: _jsx(HStack, { w: "full", justify: "space-between", align: "center", children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), _jsx(Text, { fontWeight: "bold", children: item.label })] }) }) }), _jsx(Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: _jsx(Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (_jsx(ChevronDown, { size: 16 })) : (_jsx(ChevronRight, { size: 16 })), px: 2, children: _jsx(HStack, { w: "full", justify: "space-between", align: "center", children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), _jsx(Text, { fontWeight: 700, children: item.label })] }) }) }), _jsx(Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: _jsx(Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
                                         var _a;
                                         return (_jsx(Button, { onClick: () => {
                                                 var _a;

package/dist/esm/Components/IconButton/IconButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useRef } from "react";
+import { IconButton as ChakraIconButton, } from "@chakra-ui/react";
+// NOTE: Chakra omits a missing aria-label at runtime; only its type insists on one.
+const UnlabelledChakraIconButton = ChakraIconButton;
+export const UNNAMED_ICON_BUTTON_WARNING = "[pixelize-design-library] IconButton: no aria-label or aria-labelledby, so screen readers announce it as an unnamed button.";
+const useUnnamedWarning = (isUnnamed) => {
+    const warned = useRef(false);
+    useEffect(() => {
+        if (process.env.NODE_ENV === "production" || !isUnnamed || warned.current)
+            return;
+        warned.current = true;
+        console.warn(UNNAMED_ICON_BUTTON_WARNING);
+    }, [isUnnamed]);
+};
+const IconButton = forwardRef(function IconButton(props, ref) {
+    var _a, _b;
+    useUnnamedWarning(!((_a = props["aria-label"]) === null || _a === void 0 ? void 0 : _a.trim()) && !((_b = props["aria-labelledby"]) === null || _b === void 0 ? void 0 : _b.trim()));
+    return _jsx(UnlabelledChakraIconButton, { ref: ref, ...props });
+});
+export default memo(IconButton);

package/dist/esm/Components/IconButton/IconButtonProps.js

@@ -0,0 +1 @@
+export {};