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

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -49,6 +49,7 @@ const useFieldIds_1 = require("../Common/useFieldIds");
 const pickerField_1 = require("./pickerField");
 const CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
@@ -60,8 +61,8 @@ const setTimeFrom = (base, time) => {
     const b = base ? new Date(base) : new Date();
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
-/** Two-endpoint range field; `onChange` fires on Apply, outside click or Escape in the calendar — never on a bare day click. */
-const RangeDatePicker = (props) => {
+/** Two-endpoint range field; `onChange` fires on Apply, outside click or calendar Escape, never a bare day click; `ref` is the `<input>`. */
+exports.RangeDatePicker = (0, react_1.forwardRef)(function RangeDatePicker(props, ref) {
     var _a, _b, _c, _d;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, dayStates, renderDayContent, } = props;
     const { isDisabled: disabled, placeholder: placeholderText } = (0, pickerField_1.resolvePickerAliases)(props);
@@ -75,6 +76,7 @@ const RangeDatePicker = (props) => {
     const pickerPortal = (0, PickerPortal_1.usePickerPortal)(isOpen);
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date range";
     const inputRef = (0, react_1.useRef)(null);
+    const mergedInputRef = (0, react_2.useMergeRefs)(inputRef, ref);
     const triggerRef = (0, react_1.useRef)(null);
     const popoverRef = (0, react_1.useRef)(null);
     const today = new Date();
@@ -220,7 +222,7 @@ const RangeDatePicker = (props) => {
             return `${(0, date_fns_1.format)(tempRangeStart, dateFormat)} -`;
         return "";
     }, [inputValue, tempRangeStart, tempRangeEnd, dateFormat]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: requestClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: requestClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: mergedInputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
                                             if (!isOpen)
                                                 handleOpen();
                                         }, onClick: () => {
@@ -263,7 +265,7 @@ const RangeDatePicker = (props) => {
                                                                 return;
                                                             }
                                                             setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
-};
-exports.RangeDatePicker = RangeDatePicker;
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+exports.RangeDatePicker.displayName = "RangeDatePicker";
 exports.default = exports.RangeDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.d.ts

@@ -1,7 +1,11 @@
-import React from "react";
+import React, { type RefAttributes } from "react";
 import { SingleDatePickerDateProps, SingleDatePickerStringProps } from "./DatePickerProps";
-/** Date/datetime field with typed-mask input + calendar popover. Import via `DatePicker` (ThemeDatePicker) — direct import bypasses its isRange/pickerType routing. */
-export declare function SingleDatePicker(props: SingleDatePickerDateProps): React.ReactElement;
-/** `valueFormat="iso"` overload — value/onChange carry ISO strings instead of Date objects. */
-export declare function SingleDatePicker(props: SingleDatePickerStringProps): React.ReactElement;
+type SingleDatePickerComponent = {
+    /** Date/datetime field with typed-mask input + calendar popover; `ref` is the `<input>`. Import via `DatePicker` for its routing. */
+    (props: SingleDatePickerDateProps & RefAttributes<HTMLInputElement>): React.ReactElement;
+    /** `valueFormat="iso"` overload — value/onChange carry ISO strings instead of Date objects. */
+    (props: SingleDatePickerStringProps & RefAttributes<HTMLInputElement>): React.ReactElement;
+    displayName?: string;
+};
+export declare const SingleDatePicker: SingleDatePickerComponent;
 export default SingleDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SingleDatePicker = SingleDatePicker;
+exports.SingleDatePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
@@ -44,6 +44,7 @@ const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const DatePickerProps_1 = require("./DatePickerProps");
@@ -253,7 +254,7 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     }
     return { value: buf, completed: buf.length >= segmentLength };
 };
-function SingleDatePicker(props) {
+function SingleDatePickerInner(props, ref) {
     var _a, _b, _c, _d;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, } = props;
     const { isDisabled: disabled, placeholder: placeholderText } = (0, pickerField_1.resolvePickerAliases)(props);
@@ -267,6 +268,7 @@ function SingleDatePicker(props) {
     const pickerPortal = (0, PickerPortal_1.usePickerPortal)(isOpen);
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
     const inputRef = (0, react_1.useRef)(null);
+    const mergedInputRef = (0, react_2.useMergeRefs)(inputRef, ref);
     const popoverRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : (0, pickerField_1.inferPickerTypeFromFormat)(dateFormat);
@@ -1009,7 +1011,7 @@ function SingleDatePicker(props) {
                     }
                     finalize();
                     onClose();
-                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, cursor: "text" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
+                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: mergedInputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, cursor: "text" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
                                                 e.stopPropagation();
                                                 if (!isOpen) {
                                                     handleOpen();
@@ -1025,9 +1027,11 @@ function SingleDatePicker(props) {
                                                 setTempDate(updatedDate);
                                                 setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                                                 setIsTyping(false);
-                                            }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                            }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                     setTempDate(null);
                                                     requestClose(null);
                                                 }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }
-exports.default = SingleDatePicker;
+exports.SingleDatePicker = (0, react_1.forwardRef)(SingleDatePickerInner);
+exports.SingleDatePicker.displayName = "SingleDatePicker";
+exports.default = exports.SingleDatePicker;

package/dist/Components/DatePicker/ThemeDatePicker.d.ts

@@ -1,6 +1,10 @@
-import React from "react";
+import React, { type RefAttributes } from "react";
 import { RangeDatePickerProps, SingleDatePickerProps } from "./DatePickerProps";
-/** Public DatePicker entry — routes to Range/TimeOnly/Single by `isRange`/`pickerType`; `pickerType` is silently ignored whenever `isRange` is true. */
-export declare function ThemeDatePicker(props: RangeDatePickerProps): React.ReactElement;
-export declare function ThemeDatePicker(props: SingleDatePickerProps): React.ReactElement;
+type ThemeDatePickerComponent = {
+    /** Public DatePicker entry — routes to Range/TimeOnly/Single by `isRange`/`pickerType` (ignored when `isRange`); `ref` is the field `<input>`. */
+    (props: RangeDatePickerProps & RefAttributes<HTMLInputElement>): React.ReactElement;
+    (props: SingleDatePickerProps & RefAttributes<HTMLInputElement>): React.ReactElement;
+    displayName?: string;
+};
+export declare const ThemeDatePicker: ThemeDatePickerComponent;
 export default ThemeDatePicker;

package/dist/Components/DatePicker/ThemeDatePicker.js

@@ -1,24 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeDatePicker = ThemeDatePicker;
+exports.ThemeDatePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const DatePickerProps_1 = require("./DatePickerProps");
 const RangeDatePicker_1 = require("./RangeDatePicker");
 const SingleDatePicker_1 = require("./SingleDatePicker");
 const TimeOnlyPicker_1 = require("./TimeOnlyPicker");
 const pickerField_1 = require("./pickerField");
-function ThemeDatePicker(props) {
+function ThemeDatePickerInner(props, ref) {
     var _a, _b;
     if (props.isRange) {
-        return (0, jsx_runtime_1.jsx)(RangeDatePicker_1.RangeDatePicker, { ...props });
+        return (0, jsx_runtime_1.jsx)(RangeDatePicker_1.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 : (0, pickerField_1.inferPickerTypeFromFormat)(dateFormat);
     const isTime = pickerType === "time";
     if ((0, DatePickerProps_1.isStringValueProps)(singleProps)) {
-        return isTime ? (0, jsx_runtime_1.jsx)(TimeOnlyPicker_1.TimeOnlyPicker, { ...singleProps }) : (0, jsx_runtime_1.jsx)(SingleDatePicker_1.SingleDatePicker, { ...singleProps });
+        return isTime ? (0, jsx_runtime_1.jsx)(TimeOnlyPicker_1.TimeOnlyPicker, { ref: ref, ...singleProps }) : (0, jsx_runtime_1.jsx)(SingleDatePicker_1.SingleDatePicker, { ref: ref, ...singleProps });
     }
-    return isTime ? (0, jsx_runtime_1.jsx)(TimeOnlyPicker_1.TimeOnlyPicker, { ...singleProps }) : (0, jsx_runtime_1.jsx)(SingleDatePicker_1.SingleDatePicker, { ...singleProps });
+    return isTime ? (0, jsx_runtime_1.jsx)(TimeOnlyPicker_1.TimeOnlyPicker, { ref: ref, ...singleProps }) : (0, jsx_runtime_1.jsx)(SingleDatePicker_1.SingleDatePicker, { ref: ref, ...singleProps });
 }
-exports.default = ThemeDatePicker;
+exports.ThemeDatePicker = (0, react_1.forwardRef)(ThemeDatePickerInner);
+exports.ThemeDatePicker.displayName = "ThemeDatePicker";
+exports.default = exports.ThemeDatePicker;

package/dist/Components/DatePicker/TimeOnlyPicker.d.ts

@@ -1,7 +1,11 @@
-import React from "react";
+import React, { type RefAttributes } from "react";
 import { SingleDatePickerDateProps, SingleDatePickerStringProps } from "./DatePickerProps";
-/** Pure time field ThemeDatePicker renders for pickerType="time"; ignores the date-range props (`minDate`, `disablePastDates`, …). */
-export declare function TimeOnlyPicker(props: SingleDatePickerDateProps): React.ReactElement;
-/** `valueFormat="iso"` overload — value/onChange carry an `HH:mm` string instead of a Date object. */
-export declare function TimeOnlyPicker(props: SingleDatePickerStringProps): React.ReactElement;
+type TimeOnlyPickerComponent = {
+    /** Pure time field ThemeDatePicker renders for pickerType="time"; ignores the date-range props; `ref` is the `<input>`. */
+    (props: SingleDatePickerDateProps & RefAttributes<HTMLInputElement>): React.ReactElement;
+    /** `valueFormat="iso"` overload — value/onChange carry an `HH:mm` string instead of a Date object. */
+    (props: SingleDatePickerStringProps & RefAttributes<HTMLInputElement>): React.ReactElement;
+    displayName?: string;
+};
+export declare const TimeOnlyPicker: TimeOnlyPickerComponent;
 export default TimeOnlyPicker;

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimeOnlyPicker = TimeOnlyPicker;
+exports.TimeOnlyPicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
@@ -52,9 +52,10 @@ const TimePickerInput_1 = require("./TimePickerInput");
 const PickerPortal_1 = __importStar(require("./PickerPortal"));
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-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 = controlSizes_1.DEFAULT_CONTROL_SIZE, } = props;
     const { isDisabled: disabled, placeholder: placeholderText } = (0, pickerField_1.resolvePickerAliases)(props);
@@ -131,13 +132,15 @@ 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 ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: inputWrapperRef, children: (0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (date) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: inputWrapperRef, children: (0, jsx_runtime_1.jsx)(TimePickerInput_1.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)
                                             openPicker();
                                     }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(PickerPortal_1.default, { isMounted: pickerPortal.isMounted, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [(0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
                                             handleTimePickerChange(updatedDate);
-                                        } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                        } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }
-exports.default = TimeOnlyPicker;
+exports.TimeOnlyPicker = (0, react_1.forwardRef)(TimeOnlyPickerInner);
+exports.TimeOnlyPicker.displayName = "TimeOnlyPicker";
+exports.default = exports.TimeOnlyPicker;

package/dist/Components/DatePicker/TimePickerInput.d.ts

@@ -14,6 +14,6 @@ interface TimePickerInputProps {
     error?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
 }
-/** Masked HH:mm digit input, no seconds. */
-export declare const TimePickerInput: React.FC<TimePickerInputProps>;
+/** Masked HH:mm digit input, no seconds; `ref` is the `<input>`. */
+export declare const TimePickerInput: React.ForwardRefExoticComponent<TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/Components/DatePicker/TimePickerInput.js

@@ -92,13 +92,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. */
-const TimePickerInput = ({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = controlSizes_1.DEFAULT_CONTROL_SIZE, }) => {
+/** Masked HH:mm digit input, no seconds; `ref` is the `<input>`. */
+exports.TimePickerInput = (0, react_1.forwardRef)(function TimePickerInput({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = controlSizes_1.DEFAULT_CONTROL_SIZE, }, ref) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const sizeKey = typeof size === "string" ? size : controlSizes_1.DEFAULT_CONTROL_SIZE;
     const iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     const iconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const inputRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_2.useMergeRefs)(inputRef, ref);
     const [digits, setDigits] = (0, react_1.useState)("");
     const digitsRef = (0, react_1.useRef)("");
     const [, setIsFocused] = (0, react_1.useState)(false);
@@ -405,6 +406,6 @@ const TimePickerInput = ({ value, onChange, dateFormat, isDisabled: disabled = f
             inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.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 }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
-};
-exports.TimePickerInput = TimePickerInput;
+    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.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 }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
+});
+exports.TimePickerInput.displayName = "TimePickerInput";

package/dist/Components/DatePicker/dayStates.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dayAccessibleName = exports.describeDayStates = exports.dayStateClassName = exports.DAY_CLASS = exports.resolveDayStateVisual = exports.isDayStateKey = exports.DAY_STATE_KEYS = void 0;
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 // Ascending precedence — when a day carries several keys, a later one's visual overrides an earlier one's.
 exports.DAY_STATE_KEYS = [
     "weekly-off",
@@ -12,7 +13,7 @@ exports.DAY_STATE_KEYS = [
 // NOTE: token roles per THEME-CONTRACT.md, not raw rungs — e.g. holiday uses semanticText, never semantic[500].
 const VISUALS = {
     "weekly-off": (colors) => ({
-        cellBg: colors.backgroundColor.muted,
+        cellBg: (0, planeStep_1.recessOn)(colors.backgroundColor.muted, colors.surfaceRaised),
         color: colors.textMuted,
     }),
     holiday: (colors) => ({

package/dist/Components/DescriptionList/DescriptionList.d.ts

@@ -1,4 +1,4 @@
 import type { DescriptionListProps } from "./DescriptionListProps";
 /** Label/value read grid: semantic dl/dt/dd, "stacked" (label above) or "inline" (label left, value right). */
-declare const DescriptionList: ({ items, columns, layout, emptyValue, isLoading, loadingRows, }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;
+declare const DescriptionList: ({ items, columns, layout, emptyValue, isLoading, loadingRows, ...rest }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;
 export default DescriptionList;

package/dist/Components/DescriptionList/DescriptionList.js

@@ -12,13 +12,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 } = (0, useCustomTheme_1.useCustomTheme)();
     const templateColumns = toTemplateColumns(columns);
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsx)(react_1.Grid, { role: "group", "aria-busy": "true", "aria-label": "Loading", templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: Array.from({ length: loadingRows }, (_, index) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "75%" })] }, index))) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Grid, { ...rest, role: "group", "aria-busy": "true", "aria-label": "Loading", templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: Array.from({ length: loadingRows }, (_, index) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "75%" })] }, index))) }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Grid, { as: "dl", m: 0, templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: items.map((item, index) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.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/Components/DescriptionList/DescriptionListProps.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 /** One label/value pair rendered as a dt/dd. */
 export interface DescriptionListItem {
     /** dt content — 13px, textMuted. */
@@ -12,8 +12,8 @@ export interface DescriptionListItem {
 }
 /** Column count per breakpoint, same keys as Chakra's responsive props. */
 export type DescriptionListColumns = Partial<Record<"base" | "sm" | "md" | "lg" | "xl", number>>;
-/** Props for the label/value grid used on record-detail and settings-style read views. */
-export interface DescriptionListProps {
+/** Label/value grid for read views; other HTML attributes land on the `<dl>` (or the loading grid). */
+export interface DescriptionListProps extends Omit<HTMLAttributes<HTMLElement>, "color" | "children" | "dangerouslySetInnerHTML"> {
     /** The label/value pairs to render, in order. */
     items: DescriptionListItem[];
     /** Columns per breakpoint; defaults to `{ base: 1, md: 2 }`. */

package/dist/Components/Drawer/Drawer.js

@@ -8,6 +8,7 @@ exports.default = Drawer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const warnDroppedSlotChildren_1 = require("../Modal/warnDroppedSlotChildren");
 const react_2 = require("@chakra-ui/react");
 const DrawerHeader = ({ children }) => {
@@ -45,5 +46,5 @@ function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant
     const bodySlot = findSlot(children, exports.DrawerBody);
     const footerSlot = findSlot(children, exports.DrawerFooter);
     (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Drawer", children, [exports.DrawerHeader, exports.DrawerBody, exports.DrawerFooter]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { ...contentProps, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { ...contentProps, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
 }

package/dist/Components/Dropdown/DropDown.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
@@ -13,6 +14,7 @@ const rafThrottle_1 = require("../../Utils/rafThrottle");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
@@ -206,6 +208,8 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         };
     }, [isOpen, updateMenuPos]);
     (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
         const handleClickOutside = (event) => {
             var _a, _b;
             const target = event.target;
@@ -220,7 +224,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [onClose]);
+    }, [isOpen, onClose]);
     const setMenuRef = (node) => {
         menuRef.current = node;
         if (typeof ref === "function")
@@ -239,7 +243,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     };
     const DropdownContentRender = () => {
         const hoverTint = rowBackgrounds.active;
-        return ((0, jsx_runtime_1.jsx)(react_2.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: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
+        return ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.surfaceRaised, border: `${borderWidths_1.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: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
                     itemRefs.current[index] = node;
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
                     handleListItemClick(option.id, option.label);
@@ -256,10 +260,15 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
                     color: theme.colors.accentText,
                     boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
                 }, borderBottom: divider
-                    ? `0.063rem solid ${theme.colors.boxborder[200]}`
+                    ? `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`
                     : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...(0, motion_2.reducedMotionSx)() }, style: ItemStyle, fontWeight: 500, children: [option.image && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: rowSpec.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.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";
 exports.default = Dropdown;

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

@@ -5,9 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 const lucide_react_1 = require("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. */
 function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsx)(react_1.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], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: 700, mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: 600, onClick: resendMail, children: "Resend Code" })] }) })] }));
 }

package/dist/Components/EmptyState/EmptyState.js

@@ -23,7 +23,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 = lucide_react_1.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 = lucide_react_1.Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, ...rest }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = sizeMap[size];
     const hasDescription = description !== undefined && description !== null && description !== false && description !== "";
@@ -41,7 +41,7 @@ const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon
                 bg: "transparent",
             }
             : {};
-    return ((0, jsx_runtime_1.jsxs)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Image, { src: image, alt: imageAlt, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: (0, motion_1.reducedMotionSx)() })) : ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Image, { src: image, alt: imageAlt, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: (0, motion_1.reducedMotionSx)() })) : ((0, jsx_runtime_1.jsx)(react_1.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/Components/EmptyState/EmptyStateProps.d.ts

@@ -1,11 +1,11 @@
-import { ElementType, ReactNode } from "react";
+import { ElementType, HTMLAttributes, ReactNode } from "react";
 import { BoxProps } from "@chakra-ui/react";
 /** Controls badge/icon size, type scale, and spacing together. */
 export type EmptyStateSize = "sm" | "md" | "lg";
 /** Palette used to tint the icon badge — brand scale or semantic tone. */
 export type EmptyStateColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "success" | "error" | "warning" | "info";
-/** Props for the centered empty/zero-data placeholder; pass `action` for any real button(s)/CTA. */
-export interface EmptyStateProps {
+/** Centered empty/zero-data placeholder; other `<div>` attributes (id, className, data-*, aria-*) land on the root. */
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "color" | "children" | "dangerouslySetInnerHTML"> {
     /** Heading text. Defaults to "No data found". */
     title?: string;
     /** Heading element for the title; defaults to "h3" — pick the level that fits the page outline. */

package/dist/Components/FileUpload/FileUpload.js

@@ -44,12 +44,35 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const constants_1 = require("./constants");
+const useObjectUrl_1 = require("./useObjectUrl");
 const Modal_1 = __importStar(require("../Modal/Modal"));
 const FormLabel_1 = require("../Common/FormLabel");
 const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
 const useFieldIds_1 = require("../Common/useFieldIds");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const FileThumbnail = ({ file, radius, onPreview, }) => {
+    const url = (0, useObjectUrl_1.useObjectUrl)(file);
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const preview = () => url && onPreview(url);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { role: "button", tabIndex: 0, "aria-label": `Preview ${file.name}`, boxSize: "2.5rem", cursor: "pointer", position: "relative", _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), _hover: {
+            ".hover-icon": {
+                opacity: 1,
+                bg: "blackAlpha.500",
+            },
+        }, onClick: preview, onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            preview();
+        }, children: [(0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name, style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    borderRadius: radius,
+                } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.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 = constants_1.DEFAULT_MAX_SIZE_KB, maxFiles = undefined, progress = {}, size = "md", inputAriaLabel = "Upload files", id, label, isRequired = false, isDisabled = false, error = false, errorMessage, helperText, }) => {
     const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
@@ -104,29 +127,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: fieldStyles_1.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: fieldStyles_1.FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), position: "relative", children: (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: compact ? 4 : 6 }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 0, align: compact ? "start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }) }), (0, jsx_runtime_1.jsx)("input", { ...getInputProps({
+                                }), border: "1px dashed", borderColor: border, borderRadius: fieldStyles_1.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: fieldStyles_1.FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), position: "relative", children: (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: compact ? 4 : 6 }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 0, align: compact ? "start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 500, fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }) }), (0, jsx_runtime_1.jsx)("input", { ...getInputProps({
                                     id: ids.inputId,
                                     disabled: isDisabled,
                                     "aria-label": label ? undefined : inputAriaLabel,
                                     "aria-describedby": ids.describedBy,
-                                }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
-                                                                ".hover-icon": {
-                                                                    opacity: 1,
-                                                                    bg: "blackAlpha.500",
-                                                                },
-                                                            }, onClick: () => {
-                                                                setPreviewUrl(URL.createObjectURL(file));
+                                }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "sm", lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { borderWidth: borderWidths_1.BORDER_WIDTHS.hairline, borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsx)(FileThumbnail, { file: file, radius: radii.base, onPreview: (url) => {
+                                                                setPreviewUrl(url);
                                                                 setPreviewTitle(file.name);
                                                                 onOpen();
-                                                            }, children: [(0, jsx_runtime_1.jsx)("img", { src: URL.createObjectURL(file), alt: file.name, style: {
-                                                                        width: "100%",
-                                                                        height: "100%",
-                                                                        objectFit: "cover",
-                                                                        borderRadius: radii.base,
-                                                                    } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: "white" }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.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))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
+                                                            } })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.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))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);
-                }, size: "xl", isCentered: true, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 16, textTransform: "uppercase", children: previewTitle }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: previewUrl && ((0, jsx_runtime_1.jsx)(react_2.Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" })) })] })] }));
+                }, size: "xl", isCentered: true, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "md", textTransform: "uppercase", children: previewTitle }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: previewUrl && ((0, jsx_runtime_1.jsx)(react_2.Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" })) })] })] }));
 };
 exports.default = FileUpload;