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

package/dist/Components/CouponField/CouponField.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const tone_1 = require("../../Theme/tokens/builders/tone");
@@ -62,11 +63,11 @@ const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply
     };
     const success = (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, "success"), colors.background[100]);
     if (status === "applied" && appliedCode) {
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "1rem", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.BadgeCheck, { size: 16, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, role: "status", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], noOfLines: 1, children: copy.applied(appliedCode) }), savedAmount !== undefined && savedAmount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: { fontVariantNumeric: "tabular-nums" }, children: copy.saved((0, price_1.formatPrice)(savedAmount, { currency, locale })) }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "2xl", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.BadgeCheck, { size: 16, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, role: "status", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], noOfLines: 1, children: copy.applied(appliedCode) }), savedAmount !== undefined && savedAmount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: typography_1.NUMERIC_TEXT, children: copy.saved((0, price_1.formatPrice)(savedAmount, { currency, locale })) }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": open, "aria-controls": panelId, disabled: applying || status === "error", onClick: () => setOpen(!open), display: "flex", alignItems: "center", gap: 3, w: "100%", minH: "3rem", px: 4, borderRadius: "1rem", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Ticket, { size: 18, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)({ transform: open ? "rotate(180deg)" : "none" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "flex-start", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { size: "lg", variant: "filled", "aria-label": copy.inputLabel, placeholder: copy.placeholder, value: text, onChange: (event) => setText(normalise(event.target.value)), error: status === "error", errorMessage: status === "error" ? error : undefined, isDisabled: applying, autoComplete: "off", autoCapitalize: "characters", spellCheck: false }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": open, "aria-controls": panelId, disabled: applying || status === "error", onClick: () => setOpen(!open), display: "flex", alignItems: "center", gap: 3, w: "100%", minH: "3rem", px: 4, borderRadius: "2xl", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Ticket, { size: 18, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)({ transform: open ? "rotate(180deg)" : "none" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "flex-start", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { size: "lg", variant: "filled", "aria-label": copy.inputLabel, placeholder: copy.placeholder, value: text, onChange: (event) => setText(normalise(event.target.value)), error: status === "error", errorMessage: status === "error" ? error : undefined, isDisabled: applying, autoComplete: "off", autoCapitalize: "characters", spellCheck: false }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
                                             setText(s.code);
                                             submit(s.code);
-                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "0.75rem", bg: colors.background[100], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, _disabled: { cursor: "not-allowed", opacity: 0.6 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flexShrink: 0, px: 2, py: 1, borderRadius: "0.5rem", bg: colors.background[200], fontSize: "xs", fontWeight: 700, letterSpacing: "0.04em", color: colors.header[900], children: s.code }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
+                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "xl", bg: colors.background[100], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, _disabled: { cursor: "not-allowed", opacity: 0.6 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flexShrink: 0, px: 2, py: 1, borderRadius: "lg", bg: colors.background[200], fontSize: "xs", fontWeight: 700, letterSpacing: "0.04em", color: colors.header[900], children: s.code }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
 };
 exports.default = CouponField;

package/dist/Components/CustomModulesTable/CustomModulesTableProps.d.ts

@@ -2,7 +2,9 @@
 export type ModuleItem = {
     /** snake_case, unlike moduleName/ownerLabel here and unlike UpdateModulePayload.moduleId — casing isn't symmetric. */
     module_id: number;
+    /** One line with the full name in a tooltip; seeds the edit field. */
     moduleName: string;
+    /** Shown as is, or "—" when empty. */
     ownerLabel?: string;
 };
 /** Shape passed to onUpdateModule — `moduleId` identifies the item being edited, `moduleName` is the new value from the modal. */
@@ -15,31 +17,47 @@ export type UpdateModulePayload = {
  * key has a sensible English default so the component works standalone.
  */
 export type CustomModulesTableLabels = {
+    /** Card heading; defaults to "Custom Modules". */
     title?: string;
     moduleName?: string;
     moduleOwner?: string;
+    /** Header of the right-aligned Edit/Delete column. */
     action?: string;
     edit?: string;
+    /** Row button label, reused for the delete dialog's confirm button. */
     delete?: string;
+    /** Empty-state title shown when `modules` is empty. */
     noModules?: string;
+    /** @deprecated Never rendered; the loading state shows skeleton bars without text. */
     loading?: string;
+    /** Edit dialog heading. */
     editModuleTitle?: string;
+    /** Edit field placeholder; the field has no visible or ARIA label besides it. */
     moduleNamePlaceholder?: string;
+    /** Cancel button of both the edit and the delete dialog. */
     cancel?: string;
+    /** Edit dialog submit; disabled while the trimmed name is empty. */
     update?: string;
+    /** Delete dialog heading. */
     confirmDeletion?: string;
+    /** Delete prompt, rendered as `<prefix> <moduleName>?`. */
     deleteConfirmPrefix?: string;
 };
 /** Fixed 2-column module list (name, owner) built on raw Chakra table parts, not the library Table — closed props, no ref/...rest reach the root Box. */
 export interface CustomModulesTableProps {
+    /** Rows keyed by module_id; an empty array shows the empty state. */
     modules: ModuleItem[];
+    /** Replaces the table with four skeleton bars; the heading stays. */
     isLoading?: boolean;
+    /** Spinner on the edit dialog's Update button only. */
     isUpdating?: boolean;
+    /** Spinner on the delete dialog's confirm button only. */
     isDeleting?: boolean;
     /** Edit modal closes once this promise resolves; a rejection is unhandled (never caught) and isUpdating only toggles the button spinner, not the close. */
     onUpdateModule?: (payload: UpdateModulePayload) => void | Promise<void>;
     /** Delete modal closes once this promise resolves; a rejection is unhandled (never caught) and isDeleting only toggles the button spinner, not the close. */
     onDeleteModule?: (moduleId: number) => void | Promise<void>;
+    /** Partial overrides merged over the English defaults, per key. */
     labels?: CustomModulesTableLabels;
 }
 /** Internal edit-name dialog rendered by CustomModulesTable; `labels` must already be fully resolved, not per-key optional. */

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -15,7 +15,7 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
                                 // NOTE: [200] is the decorative divider rung — a real control's outline needs 1.4.11's 3:1, from [800].
                                 borderColor: colors.boxborder[500], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };

package/dist/Components/DatePicker/CalendarPanel.js

@@ -124,11 +124,11 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                 const dayLabel = dayStates
                     ? (0, dayStates_1.dayAccessibleName)((0, date_fns_1.format)(thisDay, "d MMMM yyyy"), states)
                     : (0, date_fns_1.format)(thisDay, "d MMMM yyyy");
-                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? (0, dayStates_1.dayStateClassName)(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? (0, dayStates_1.dayStateClassName)(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs-plus", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: solidHoverFill, color: circleHoverColor }
-                                : { bg: rangeBg }, children: [(0, date_fns_1.format)(thisDay, "d"), hasDayOverlay && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "0.0625rem", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
+                                : { bg: rangeBg }, children: [(0, date_fns_1.format)(thisDay, "d"), hasDayOverlay && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "px", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
                                 // The overlay is decoration: clicks belong to the day button under it.
                                 pointerEvents: "none", children: customContent !== null && customContent !== void 0 ? customContent : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__marker`, w: "0.25rem", h: "0.25rem", borderRadius: "full", bg: markerColor })) }))] }) }, thisDay.toString()));
                 day = (0, date_fns_1.addDays)(day, 1);

package/dist/Components/DatePicker/DatePicker.js

@@ -62,6 +62,12 @@ function CustomDatePicker(props) {
         }
         onOpen();
     };
+    const handleTriggerKeyDown = (event) => {
+        if (isOpen || (event.key !== "Enter" && event.key !== "ArrowDown"))
+            return;
+        event.preventDefault();
+        handleOpen();
+    };
     (0, react_1.useEffect)(() => {
         if (!isRange) {
             if (selectedDate instanceof Date) {
@@ -174,7 +180,7 @@ function CustomDatePicker(props) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen, onClose, tempDate, props, emitSingle]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, position: "relative", 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: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onClick: handleOpen, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { appendToParentPortal: false, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [showDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.subMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)("select", { value: currentMonth.getMonth(), onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, position: "relative", 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: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onClick: handleOpen, onKeyDown: handleTriggerKeyDown, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { appendToParentPortal: false, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [showDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.subMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)("select", { value: currentMonth.getMonth(), onChange: (e) => {
                                                                     const newMonth = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
                                                                 }, children: Array.from({ length: 12 }).map((_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM") }, i))) }), (0, jsx_runtime_1.jsx)("select", { value: currentMonth.getFullYear(), onChange: (e) => {
@@ -188,7 +194,7 @@ function CustomDatePicker(props) {
                                                                     if (!disableToday && !isRange) {
                                                                         handleDaySelect(new Date(today));
                                                                     }
-                                                                }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.addMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, {}) })] })] }), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_2.Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
+                                                                }, "aria-label": "Today", sx: { fontSize: "xs", px: 2 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.addMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, {}) })] })] }), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: 700, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_2.Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             emitSingle(updatedDate);
                                         } })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", onClick: () => {

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

@@ -1,5 +1,11 @@
 import React from "react";
-import { RangeDatePickerProps } from "./DatePickerProps";
-/** Two-endpoint range field; `onChange` fires on Apply, outside click or Escape in the calendar — never on a bare day click. */
-export declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
+/** Two-endpoint range field; `onChange` fires on Apply, outside click or calendar Escape, never a bare day click; `ref` is the `<input>`. */
+export declare const RangeDatePicker: React.ForwardRefExoticComponent<import("./DatePickerProps").BaseDatePickerProps & {
+    isRange: true;
+    selectedDate?: import("./DatePickerProps").RangeDate | null;
+    value?: import("./DatePickerProps").RangeDate | null;
+    onChange: (range: import("./DatePickerProps").RangeDate | null) => void;
+    dayStates?: import("./dayStates").DayStates;
+    renderDayContent?: import("./dayStates").RenderDayContent;
+} & React.RefAttributes<HTMLInputElement>>;
 export default RangeDatePicker;

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -60,8 +60,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 +75,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 +221,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: () => {
@@ -264,6 +265,6 @@ const RangeDatePicker = (props) => {
                                                             }
                                                             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;
+});
+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");
@@ -253,7 +253,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 +267,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 +1010,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();
@@ -1030,4 +1031,6 @@ function SingleDatePicker(props) {
                                                     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");
@@ -54,7 +54,7 @@ const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 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,7 +131,7 @@ 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)
@@ -140,4 +140,6 @@ function TimeOnlyPicker(props) {
                                             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 })] }));
 }
-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/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/Dropdown/DropDown.js

@@ -13,6 +13,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 +207,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 +223,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 +242,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 +259,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 ${theme.colors.boxborder[200]}`
                     : 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" })] }) })] }));
 }