pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.41

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -18,6 +18,7 @@ const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 const TimePickerInput_1 = require("./TimePickerInput");
 const CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const TOKEN_CHARS = /[dMyHhmsaAm]/;
 const getPlaceholderForToken = (token, length) => {
     const lower = token.toLowerCase();
@@ -224,6 +225,7 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     }
     return { value: buf, completed: buf.length >= segmentLength };
 };
+/** Date/datetime field with typed-mask input + calendar popover. Import via `DatePicker` (ThemeDatePicker) — direct import bypasses its isRange/pickerType routing. */
 const SingleDatePicker = (props) => {
     var _a, _b;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
@@ -232,6 +234,9 @@ const SingleDatePicker = (props) => {
     const calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     const calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const errorFieldId = id ? `${id}-error` : undefined;
+    const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
     const inputRef = (0, react_1.useRef)(null);
     const popoverRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
@@ -393,6 +398,7 @@ const SingleDatePicker = (props) => {
         }
     }, [inputValue, tokenSegments, enableMask, isMaskActive]);
     const handleOpen = () => {
+        requestExclusiveOpen();
         if (!selectedDate && showDate) {
             setTempDate(disableToday ? tomorrow : new Date());
         }
@@ -783,14 +789,28 @@ const SingleDatePicker = (props) => {
         }
         if (key === "Escape") {
             e.preventDefault();
-            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            if (isOpen) {
+                onClose();
+            }
+            else {
+                (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            }
             return;
         }
         if (key === "Enter") {
             e.preventDefault();
+            if (!isOpen && showDate) {
+                handleOpen();
+                return;
+            }
             handleInputBlur();
             return;
         }
+        if (key === "ArrowDown" && !isOpen && showDate) {
+            e.preventDefault();
+            handleOpen();
+            return;
+        }
         if (key === "Backspace" || key === "Delete") {
             e.preventDefault();
             const baseValue = ensureMaskValue();
@@ -932,20 +952,35 @@ const SingleDatePicker = (props) => {
     };
     const handleInputFocusMask = enableMask ? handleInputFocus : undefined;
     const handleInputClickMask = enableMask ? handleInputClick : undefined;
-    const handleKeyDownMask = enableMask ? handleKeyDown : undefined;
     const handlePasteMask = enableMask ? handlePaste : undefined;
+    const handleInputKeyDown = (e) => {
+        if (!enableMask) {
+            if (e.key === "Escape" && isOpen) {
+                e.preventDefault();
+                onClose();
+                return;
+            }
+            if (!isOpen && showDate && (e.key === "ArrowDown" || e.key === "Enter")) {
+                e.preventDefault();
+                handleOpen();
+                return;
+            }
+            return;
+        }
+        handleKeyDown(e);
+    };
     const displayValue = isTyping
         ? inputValue
         : tempDate
             ? (0, date_fns_1.format)(tempDate, resolvedDateFormat)
             : "";
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: () => {
                     if (suppressOnCloseFinalizeRef.current) {
                         suppressOnCloseFinalizeRef.current = false;
                         return;
                     }
                     finalize();
-                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { 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, id: id, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, bg: theme.colors.gray[50], borderColor: error
+                }, 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, id: id, 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, "aria-describedby": error && errorMessage ? errorFieldId : undefined, autoComplete: autoComplete, bg: theme.colors.background[50], borderColor: error
                                             ? theme.colors.semanticText.error
                                             : theme.colors.boxborder[500], _focus: {
                                             borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
@@ -954,15 +989,15 @@ const SingleDatePicker = (props) => {
                                                 : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
                                         }, _hover: {
                                             borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                                        }, cursor: "text", boxShadow: error ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}` : `` }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: (e) => {
-                                            e.stopPropagation();
-                                            if (!isOpen) {
-                                                handleOpen();
-                                            }
-                                            else {
-                                                onClose();
-                                            }
-                                        }, style: { cursor: "pointer" }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                        }, cursor: "text", boxShadow: error ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}` : `` }), (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();
+                                                }
+                                                else {
+                                                    onClose();
+                                                }
+                                            }, icon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], role: "dialog", "aria-label": calendarLabel, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
                                             setIsTyping(false);
@@ -973,7 +1008,7 @@ const SingleDatePicker = (props) => {
                                         }, disabled: 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: () => {
                                                 setTempDate(null);
                                                 requestClose(null);
-                                            }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                                            }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), error && errorMessage && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { id: errorFieldId, errorMessage: errorMessage })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 };
 exports.SingleDatePicker = SingleDatePicker;
 exports.default = exports.SingleDatePicker;

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { DatePickerProps } from "./DatePickerProps";
+/** Public DatePicker entry — routes to Range/TimeOnly/Single by `isRange`/`pickerType`; `pickerType` is silently ignored whenever `isRange` is true. */
 declare const ThemeDatePicker: React.FC<DatePickerProps>;
 export default ThemeDatePicker;

package/dist/Components/DatePicker/ThemeDatePicker.js

@@ -14,6 +14,7 @@ const inferPickerTypeFromFormat = (formatStr) => {
         return "time";
     return "date";
 };
+/** Public DatePicker entry — routes to Range/TimeOnly/Single by `isRange`/`pickerType`; `pickerType` is silently ignored whenever `isRange` is true. */
 const ThemeDatePicker = (props) => {
     var _a, _b;
     if (props.isRange) {

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { SingleDatePickerProps } from "./DatePickerProps";
+/** Pure time field ThemeDatePicker renders for pickerType="time". Its label never receives `id`, so it is never associated with the field. */
 export declare const TimeOnlyPicker: React.FC<SingleDatePickerProps>;
 export default TimeOnlyPicker;

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -13,13 +13,22 @@ const HelperText_1 = __importDefault(require("../Common/HelperText"));
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 const TimePickerInput_1 = require("./TimePickerInput");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+/** Pure time field ThemeDatePicker renders for pickerType="time". Its label never receives `id`, so it is never associated with the field. */
 const TimeOnlyPicker = (props) => {
     var _a, _b;
-    const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md", } = props;
+    const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md",
+    // NOTE: name/minDate/maxDate/disableFutureDates/disablePastDates/autoComplete exist on the type but are silently dropped here.
+     } = props;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const openPicker = () => {
+        requestExclusiveOpen();
+        onOpen();
+    };
     const popoverRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const inputWrapperRef = (0, react_1.useRef)(null);
@@ -76,7 +85,7 @@ const TimeOnlyPicker = (props) => {
                                         handleTimeInputChange(date);
                                     }, dateFormat: dateFormat, disabled: disabled, placeholder: placeholder, onFocus: () => {
                                         if (!disabled && !isOpen)
-                                            onOpen();
+                                            openPicker();
                                     }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", bg: theme.colors.background[50], 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" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { TimePickerProps } from "./DatePickerProps";
+/** Hour/Minute/AM-PM select trio, no seconds control — used by datetime pickers and TimeOnlyPicker; the format only toggles 12h vs 24h. */
 declare const TimePicker: React.FC<TimePickerProps>;
 export default TimePicker;

package/dist/Components/DatePicker/TimePicker.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Hour/Minute/AM-PM select trio, no seconds control — used by datetime pickers and TimeOnlyPicker; the format only toggles 12h vs 24h. */
 const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
@@ -54,16 +55,16 @@ const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
         updateTime(hour, minute, newMeridiem);
     };
     const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1.5, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Select, { value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1.5, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Select, { "aria-label": "Hour", value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], _focus: {
                     borderColor: theme.colors.primary[500],
                     boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
                 }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) => {
                     const value = is12HourFormat ? i + 1 : i;
                     return ((0, jsx_runtime_1.jsx)("option", { value: value, children: value.toString().padStart(2, "0") }, value));
-                }) }), (0, jsx_runtime_1.jsx)(react_2.Select, { value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
+                }) }), (0, jsx_runtime_1.jsx)(react_2.Select, { "aria-label": "Minute", value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], _focus: {
                     borderColor: theme.colors.primary[500],
                     boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: 60 }, (_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && ((0, jsx_runtime_1.jsxs)(react_2.Select, { value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
+                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: 60 }, (_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && ((0, jsx_runtime_1.jsxs)(react_2.Select, { "aria-label": "AM or PM", value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], _focus: {
                     borderColor: theme.colors.primary[500],
                     boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
                 }, _hover: { borderColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)("option", { value: "AM", children: "AM" }), (0, jsx_runtime_1.jsx)("option", { value: "PM", children: "PM" })] }))] }));

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

@@ -10,5 +10,6 @@ interface TimePickerInputProps {
     error?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
 }
+/** Masked HH:mm digit input, no seconds; has no `name`/`id` prop, so it can't be targeted by native form APIs. */
 export declare const TimePickerInput: React.FC<TimePickerInputProps>;
 export {};

package/dist/Components/DatePicker/TimePickerInput.js

@@ -91,6 +91,7 @@ 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; has no `name`/`id` prop, so it can't be targeted by native form APIs. */
 const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const sizeKey = typeof size === "string" ? size : "md";
@@ -403,7 +404,7 @@ const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeh
             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, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey, bg: theme.colors.gray[50], borderColor: error ? theme.colors.semanticText.error : theme.colors.boxborder[500], _focus: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey, bg: theme.colors.background[50], borderColor: error ? theme.colors.semanticText.error : theme.colors.boxborder[500], _focus: {
                     borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
                     boxShadow: error
                         ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`

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

@@ -0,0 +1,56 @@
+/**
+ * Day-state marking for the calendar grid.
+ *
+ * A *state* is a key describing what a single day MEANS in the caller's domain — a weekly off,
+ * a public holiday, a day excluded from a leave count. It is deliberately separate from
+ * disabling: a marked day stays selectable unless the caller also returns the `"disabled"` key
+ * (or blocks the day through `minDate`/`maxDate`/`disablePastDates`/`disableFutureDates`).
+ *
+ * Every key returned reaches a screen reader. Only the keys in `DAY_STATE_KEYS` also carry
+ * built-in styling, so a caller can return a free-text key ("Onam") purely to have it announced
+ * alongside the recognised one: `["Onam", "holiday"]` → "16 September 2025, Onam, holiday".
+ *
+ * Colour comes from the palette only — every visual below is a function of `PaletteProps`, so a
+ * marked day follows the active light/dark palette like the rest of `CalendarPanel`.
+ */
+import type { ReactNode } from "react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+/**
+ * The keys with built-in styling, in ascending precedence — when a day carries several, a later
+ * key's visual overrides the fields an earlier one set.
+ */
+export declare const DAY_STATE_KEYS: readonly ["weekly-off", "holiday", "optional-holiday", "excluded", "disabled"];
+export type DayStateKey = (typeof DAY_STATE_KEYS)[number];
+/** Returns zero or more state keys for a day. Unrecognised keys are announced, never styled. */
+export type DayStates = (date: Date) => string[] | undefined;
+/** Custom content rendered inside a day cell, beneath the day number. */
+export type RenderDayContent = (date: Date, states: string[]) => ReactNode;
+/** What a resolved set of states paints. Every field is optional — an absent field changes nothing. */
+export type DayStateVisual = {
+    /** Tint painted across the whole cell. The range band always wins over it. */
+    cellBg?: string;
+    /** Ink for the day number. Never applied to a selected/endpoint day, whose fill owns its ink. */
+    color?: string;
+    /** `border` shorthand for the day circle, replacing the today/tentative ring. */
+    border?: string;
+    /** Fill of the small marker dot under the number. `renderDayContent` replaces it. */
+    markerColor?: string;
+    /** Strikes the day number through — the "counted, but not really" states. */
+    strikethrough?: boolean;
+    /** The one state that also blocks selection. Marking alone never does. */
+    blocksSelection?: boolean;
+};
+export declare const isDayStateKey: (key: string) => key is DayStateKey;
+/** Merges every recognised state in `DAY_STATE_KEYS` order, so precedence never depends on caller order. */
+export declare const resolveDayStateVisual: (states: string[], colors: PaletteProps) => DayStateVisual;
+/** Base class on every day button once `dayStates` is supplied. Consumers may style off it. */
+export declare const DAY_CLASS = "pxl-calendar-day";
+/** `["Onam", "holiday"]` → `"pxl-calendar-day pxl-calendar-day--onam pxl-calendar-day--holiday"`. */
+export declare const dayStateClassName: (states: string[]) => string;
+/** Human phrasing for the accessible name — every key, styled or not, in the caller's own order. */
+export declare const describeDayStates: (states: string[]) => string;
+/**
+ * The day's accessible name. The date is spelled out because "16" alone tells a screen-reader
+ * user nothing, and the states follow it so the marking is heard, not only seen.
+ */
+export declare const dayAccessibleName: (formattedDate: string, states: string[]) => string;

package/dist/Components/DatePicker/dayStates.js

@@ -0,0 +1,87 @@
+"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;
+/**
+ * The keys with built-in styling, in ascending precedence — when a day carries several, a later
+ * key's visual overrides the fields an earlier one set.
+ */
+exports.DAY_STATE_KEYS = [
+    "weekly-off",
+    "holiday",
+    "optional-holiday",
+    "excluded",
+    "disabled",
+];
+/**
+ * Token roles, not rungs (see `Theme/THEME-CONTRACT.md`):
+ * - a non-working day is a *surface* step down plus muted ink — `backgroundColor.muted` / `textMuted`
+ * - a holiday is *status ink*, so `semanticText.<tone>`, never the `semantic.<tone>[500]` fill rung
+ * - an optional holiday is the same tone family one step less certain: warning + a dashed ring
+ * - an unavailable day is the `disabled` ramp, the only ramp whose job is exactly this
+ */
+const VISUALS = {
+    "weekly-off": (colors) => ({
+        cellBg: colors.backgroundColor.muted,
+        color: colors.textMuted,
+    }),
+    holiday: (colors) => ({
+        color: colors.semanticText.info,
+        markerColor: colors.semanticText.info,
+    }),
+    "optional-holiday": (colors) => ({
+        color: colors.semanticText.warning,
+        markerColor: colors.semanticText.warning,
+        border: `1px dashed ${colors.semanticText.warning}`,
+    }),
+    excluded: (colors) => ({
+        color: colors.textMuted,
+        strikethrough: true,
+    }),
+    disabled: (colors) => ({
+        color: colors.disabled[500],
+        blocksSelection: true,
+    }),
+};
+const isDayStateKey = (key) => exports.DAY_STATE_KEYS.includes(key);
+exports.isDayStateKey = isDayStateKey;
+/** Merges every recognised state in `DAY_STATE_KEYS` order, so precedence never depends on caller order. */
+const resolveDayStateVisual = (states, colors) => {
+    const visual = {};
+    for (const key of exports.DAY_STATE_KEYS) {
+        if (states.includes(key))
+            Object.assign(visual, VISUALS[key](colors));
+    }
+    return visual;
+};
+exports.resolveDayStateVisual = resolveDayStateVisual;
+/** Base class on every day button once `dayStates` is supplied. Consumers may style off it. */
+exports.DAY_CLASS = "pxl-calendar-day";
+const slug = (key) => key
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+/** `["Onam", "holiday"]` → `"pxl-calendar-day pxl-calendar-day--onam pxl-calendar-day--holiday"`. */
+const dayStateClassName = (states) => [
+    exports.DAY_CLASS,
+    ...states
+        .map(slug)
+        .filter(Boolean)
+        .map((key) => `${exports.DAY_CLASS}--${key}`),
+].join(" ");
+exports.dayStateClassName = dayStateClassName;
+/** Human phrasing for the accessible name — every key, styled or not, in the caller's own order. */
+const describeDayStates = (states) => states
+    .map((state) => ((0, exports.isDayStateKey)(state) ? state.replace(/-/g, " ") : state.trim()))
+    .filter(Boolean)
+    .join(", ");
+exports.describeDayStates = describeDayStates;
+/**
+ * The day's accessible name. The date is spelled out because "16" alone tells a screen-reader
+ * user nothing, and the states follow it so the marking is heard, not only seen.
+ */
+const dayAccessibleName = (formattedDate, states) => {
+    const described = (0, exports.describeDayStates)(states);
+    return described ? `${formattedDate}, ${described}` : formattedDate;
+};
+exports.dayAccessibleName = dayAccessibleName;

package/dist/Components/Divider/Divider.d.ts

@@ -1,2 +1,3 @@
+/** Always vertical, fixed size/color, zero props — exported name keeps a "VeritcalDivider" typo; not interchangeable with Primitives' Divider. */
 declare const VeritcalDivider: () => import("react/jsx-runtime").JSX.Element;
 export default VeritcalDivider;

package/dist/Components/Divider/Divider.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Always vertical, fixed size/color, zero props — exported name keeps a "VeritcalDivider" typo; not interchangeable with Primitives' Divider. */
 const VeritcalDivider = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_1.Divider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: colors.boxborder[500] }));

package/dist/Components/Drawer/DrawerProps.d.ts

@@ -1,7 +1,9 @@
 import { DrawerProps as ChakraDrawerProps } from "@chakra-ui/react";
+/** Curated Pick of Chakra's DrawerProps plus overrides — `vaiant` is a typo'd, unused field; the real prop is `variant`. */
 export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant"> & {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
     placement?: "top" | "right" | "bottom" | "left";
     vaiant?: "solid" | "outline" | "ghost" | "link";
+    /** Only DrawerHeader/DrawerBody/DrawerFooter render; other elements and fragment-wrapped slots are silently dropped. */
     children?: React.ReactNode;
 };

package/dist/Components/Dropdown/DropDown.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { DropdownProps } from "./DropdownProps";
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use Select/SelectV2. */
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
 export default Dropdown;

package/dist/Components/Dropdown/DropDown.js

@@ -6,6 +6,8 @@ const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const lucide_react_1 = require("lucide-react");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
@@ -17,10 +19,13 @@ const SIZE_MAP = {
     lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
     xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
 };
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use Select/SelectV2. */
 const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const { isOpen, onOpen, onToggle, onClose } = (0, react_2.useDisclosure)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
     const dropdownRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [menuPos, setMenuPos] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
@@ -50,6 +55,16 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         }
         else {
             pendingFocusIndex.current = index;
+            requestExclusiveOpen();
+            onOpen();
+        }
+    };
+    const handleToggle = () => {
+        if (isOpen) {
+            onClose();
+        }
+        else {
+            requestExclusiveOpen();
             onOpen();
         }
     };
@@ -92,7 +107,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
             // `fireEvent` does not simulate a real browser's Enter/Space-activates-
             // button default action either.
             e.preventDefault();
-            onToggle();
+            handleToggle();
         }
     };
     const handleMenuKeyDown = (e) => {
@@ -208,22 +223,23 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     };
     const Chevron = isVisibleIconShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
-        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: buttonTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], transition: "color 0.15s ease", _hover: { color: theme.colors.accentText }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
+        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: buttonTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
+        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], transition: "color 0.15s ease", _hover: { color: theme.colors.accentText }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
         var _a;
+        const hoverTint = rowBackgrounds.active;
         return ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.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);
                     focusTrigger();
                 }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
-                    bg: theme.colors.primary.opacity[8],
+                    bg: hoverTint,
                     color: theme.colors.accentText,
                 }, _focus: {
-                    bg: theme.colors.primary.opacity[8],
+                    bg: hoverTint,
                     color: theme.colors.accentText,
                 }, borderBottom: divider
                     ? `0.063rem solid ${theme.colors.boxborder[200]}`

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -1,5 +1,7 @@
 import { ButtonProps } from "@chakra-ui/react";
+/** Props for the action-menu Dropdown — nothing here is "selected" or persisted; for picking a value from a list use Select/SelectV2. */
 export type DropdownProps = {
+    /** Rendered only for the default dropdownType="button" — has no effect under dropdownType="text" (use `text` there). */
     ButtonText?: string;
     options: Option[];
     handleOptionSelect: (id: string | number, label: string) => void;
@@ -25,6 +27,7 @@ export type DropdownProps = {
 type Option = {
     id: string | number;
     label: string;
+    /** Icon component reference (e.g. `Star`), not a rendered element like `<Star />` — passed to Chakra's `as`. */
     image?: React.ElementType;
 };
 export {};

package/dist/Components/Editor/Editor.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { EditorProps } from "./EditorProps";
+/** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
 declare const Editor: React.NamedExoticComponent<EditorProps>;
 export default Editor;

package/dist/Components/Editor/Editor.js

@@ -46,6 +46,7 @@ const JoditEditor = react_1.default.lazy(async () => {
     const mod = (await Promise.resolve().then(() => __importStar(require("jodit-react"))));
     return { default: ((_a = mod.default) !== null && _a !== void 0 ? _a : mod) };
 });
+/** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
 const Editor = react_1.default.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,

package/dist/Components/Editor/EditorProps.d.ts

@@ -1,7 +1,9 @@
 import type JoditEditor from "jodit-react";
 import type { ComponentProps } from "react";
 type JoditEditorProps = ComponentProps<typeof JoditEditor>;
+/** Props for the lazy-loaded Jodit wrapper; a `config.theme`/`config.popupRoot` you pass overrides this library's own dark-mode fix. */
 export type EditorProps = Pick<JoditEditorProps, "value" | "config" | "className" | "onChange" | "onBlur"> & {
+    /** `key` is dead (React reserves it, never reaches Jodit); `editorRef.current` stays null until the lazy chunk loads. */
     editorRef?: JoditEditorProps["ref"];
     key?: string | number;
 };

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -1,2 +1,3 @@
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput or PinInputs instead. */
 export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,13 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 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 or PinInputs 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", borderColor: theme.colors.gray[200], borderRadius: "lg", 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.gray[600], 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, 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, { borderRadius: "md", border: "0.063rem solid", 
-                        // [800], not [300]: WCAG 1.4.11 needs >=3.0 for a control boundary against any
-                        // named surface up to `muted` (lightest); [300] fails there, [800] clears all
-                        // with margin.
-                        borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
+    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", borderColor: theme.colors.gray[200], borderRadius: "lg", 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.gray[600], 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, 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, { borderRadius: "md", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
                             borderColor: theme.colors.primary[500],
                             boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
                         } }, 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.gray[600], 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" })] }) })] }));