pixelize-design-library 2.4.2-beta.64 → 2.4.2-beta.66

package/dist/esm/Components/ConfirmDialog/ConfirmDialog.js

@@ -1,19 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, VStack, Text, } from "@chakra-ui/react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Box, Flex, HStack, VStack, Text, } from "@chakra-ui/react";
 import { AlertTriangle } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
-const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
+const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, entityName, entityKind, dependents, consequence, alternative, isConfirmDisabled: isConfirmHeld = false, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
     const { colors } = useCustomTheme();
     const cancelRef = useRef(null);
     const [typedText, setTypedText] = useState("");
     const requiresTypedConfirmation = confirmationText !== undefined;
-    const isConfirmDisabled = isConfirmLoading || (requiresTypedConfirmation && typedText !== confirmationText);
-    const actions = (_jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [_jsx(Button, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && isConfirmLoading }), _jsx(Button, { label: confirmLabel, onClick: onConfirm, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
-    const body = requiresTypedConfirmation ? (_jsxs(_Fragment, { children: [children, _jsx(TextInput, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (children);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
+    const isAlternativeLoading = (alternative === null || alternative === void 0 ? void 0 : alternative.isLoading) === true;
+    const isConfirmDisabled = isConfirmLoading ||
+        isAlternativeLoading ||
+        isConfirmHeld ||
+        (requiresTypedConfirmation && typedText !== confirmationText);
+    const swatch = resolveSoftTone(colors, tone === "destructive" ? colors.semantic.error : colors.primary, colors.surfaceRaised);
+    const isEntityPrompt = entityName !== undefined;
+    const resolvedTitle = title !== null && title !== void 0 ? title : `Delete ${entityKind ? `${entityKind} ` : ""}"${entityName}"?`;
+    const dependentFacts = dependents ? dependents.filter(Boolean) : [];
+    const resolvedConsequence = consequence !== null && consequence !== void 0 ? consequence : (isEntityPrompt ? "This cannot be undone." : undefined);
+    const hasFacts = dependentFacts.length > 0 || resolvedConsequence !== undefined || (alternative === null || alternative === void 0 ? void 0 : alternative.description) !== undefined;
+    const actions = (_jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [_jsx(Button, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && (isConfirmLoading || isAlternativeLoading) }), alternative && (_jsx(Button, { label: alternative.label, onClick: alternative.onSelect, colorScheme: "primary", size: "sm", isLoading: alternative.isLoading, loadingText: alternative.label, isDisabled: isConfirmLoading })), _jsx(Button, { label: confirmLabel, onClick: onConfirm, variant: alternative ? "outline" : undefined, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
+    const facts = hasFacts && (_jsxs(VStack, { spacing: 3, align: "stretch", mt: bodyLayout === "flush" && children ? 3 : 0, mb: bodyLayout === "flush" ? 4 : 0, children: [dependentFacts.length > 0 && (_jsx(Text, { fontSize: "sm", fontWeight: 500, children: dependentFacts.join(" · ") })), resolvedConsequence !== undefined && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, children: resolvedConsequence })), (alternative === null || alternative === void 0 ? void 0 : alternative.description) !== undefined && (_jsx(Box, { fontSize: "sm", p: 3, borderRadius: "md", border: "1px solid", borderColor: raisedRule(colors), children: alternative.description }))] }));
+    const body = requiresTypedConfirmation ? (_jsxs(_Fragment, { children: [children, facts, _jsx(TextInput, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (_jsxs(_Fragment, { children: [children, facts] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg !== null && iconBg !== void 0 ? iconBg : swatch.bg, color: iconColor !== null && iconColor !== void 0 ? iconColor : swatch.fg, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: resolvedTitle })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
 };
 export default ConfirmDialog;

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -9,8 +9,10 @@ import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { transitionFor } from "../../Theme/tokens/primitives/index.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 /** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
-const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
+const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, onCopyError, }) => {
     const theme = useCustomTheme();
     const [copied, setCopied] = useState(false);
     const timer = useRef();
@@ -25,7 +27,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
             timer.current = setTimeout(() => setCopied(false), feedbackDuration);
         }
         catch {
-            /* clipboard unavailable — silently ignore */
+            onCopyError === null || onCopyError === void 0 ? void 0 : onCopyError(value);
         }
     };
     // NOTE: primary[500] fails AA as canvas ink in 5/7 brands (dark) — accentTextOnCanvas steps to a clearing rung.
@@ -36,12 +38,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     if (variant === "menu-item") {
         const hoverAccent = accentTextOnCanvas(theme.colors.primary, rowBackgrounds.active);
         const hoverSuccess = liftToContrast(theme.colors.semantic.success[500], rowBackgrounds.active, AA_NORMAL_TEXT);
-        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { role: "button", tabIndex: 0, align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: rowBackgrounds.active }, _focusVisible: focusVisibleRing(theme.colors), onClick: handleCopy, onKeyDown: (e) => {
-                        if (e.key !== "Enter" && e.key !== " ")
-                            return;
-                        e.preventDefault();
-                        handleCopy(e);
-                    }, children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { role: "button", tabIndex: 0, align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: BACKGROUND_TRANSITION, _hover: { bg: rowBackgrounds.active }, _focusVisible: focusVisibleRing(theme.colors), onClick: handleCopy, onKeyDown: onActivationKey(handleCopy), children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
     }
     if (variant === "button") {
         return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 

package/dist/esm/Components/CouponField/CouponField.js

@@ -3,6 +3,7 @@ import { useId, useState } from "react";
 import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
 import { BadgeCheck, ChevronDown, Ticket } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
@@ -11,6 +12,7 @@ import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js"
 import { formatPrice } from "../../Utils/price.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
 const DEFAULT_LABELS = {
     prompt: "Have a coupon?",
     inputLabel: "Coupon code",
@@ -26,6 +28,7 @@ const normalise = (raw) => raw.replace(/\s+/g, "").toUpperCase();
 /** Coupon entry that stays out of the way: a quiet prompt row, a field with tap-to-apply offers, then an applied state with the saving. */
 const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply, onRemove, suggestions, value, defaultValue = "", onValueChange, expanded, defaultExpanded = false, onExpandedChange, currency, locale, labels, "data-testid": testId, }) => {
     const { colors } = useCustomTheme();
+    const hoverFill = tonalHover(colors);
     const uid = useId();
     const panelId = `${uid}-panel`;
     const copy = { ...DEFAULT_LABELS, ...labels };
@@ -60,9 +63,9 @@ const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply
     if (status === "applied" && appliedCode) {
         return (_jsxs(Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "2xl", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [_jsx(Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: _jsx(BadgeCheck, { size: 16, "aria-hidden": true }) }), _jsxs(Box, { flex: 1, minW: 0, role: "status", children: [_jsx(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 && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: NUMERIC_TEXT, children: copy.saved(formatPrice(savedAmount, { currency, locale })) }))] }), _jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
     }
-    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [_jsxs(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: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Ticket, { size: 18, "aria-hidden": true }), _jsx(Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), _jsx(Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: transitionFor(["transform"]), sx: reducedMotionSx({ transform: open ? "rotate(180deg)" : "none" }), children: _jsx(ChevronDown, { size: 16 }) })] }), _jsxs(Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [_jsxs(Flex, { gap: 2, align: "flex-start", children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(TextInput, { 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 }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && (_jsxs(Box, { mt: 4, children: [_jsx(Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), _jsx(Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => (_jsx(Box, { as: "li", children: _jsxs(Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [_jsxs(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: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Ticket, { size: 18, "aria-hidden": true }), _jsx(Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), _jsx(Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: transitionFor(["transform"]), sx: reducedMotionSx({ transform: open ? "rotate(180deg)" : "none" }), children: _jsx(ChevronDown, { size: 16 }) })] }), _jsxs(Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [_jsxs(Flex, { gap: 2, align: "flex-start", children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(TextInput, { 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 }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && (_jsxs(Box, { mt: 4, children: [_jsx(Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), _jsx(Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => (_jsx(Box, { as: "li", children: _jsxs(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: "xl", bg: colors.background[100], textAlign: "left", transition: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, _disabled: { cursor: "not-allowed", opacity: 0.6 }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(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 }), _jsxs(Box, { as: "span", flex: 1, minW: 0, children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), _jsx(Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), _jsx(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: transitionFor(["background-color"]), _hover: { bg: hoverFill }, _disabled: { cursor: "not-allowed", opacity: DISABLED_OPACITY }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(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 }), _jsxs(Box, { as: "span", flex: 1, minW: 0, children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), _jsx(Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), _jsx(VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
 };
 export default CouponField;

package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js

@@ -8,6 +8,8 @@ import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import EditModuleModal from "./EditModuleModal.js";
 import DeleteModuleModal from "./DeleteModuleModal.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const DEFAULT_LABELS = {
     title: "Custom Modules",
     moduleName: "Module Name",
@@ -44,7 +46,7 @@ const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, is
         borderColor: rule,
         py: 3,
     };
-    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: rule, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: rule, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
+    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: BACKGROUND_TRANSITION, children: [_jsx(Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: rule, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: rule, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
                     if (editTarget) {
                         await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
                             moduleId: editTarget.module_id,

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

@@ -7,6 +7,8 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
 import { DAY_CLASS, dayAccessibleName, dayStateClassName, resolveDayStateVisual, } from "./dayStates.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_COLOR_TRANSITION = transitionFor(["background", "color"]);
 /** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
 export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
     const theme = useCustomTheme();
@@ -118,7 +120,7 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                 const dayLabel = dayStates
                     ? dayAccessibleName(format(thisDay, "d MMMM yyyy"), states)
                     : format(thisDay, "d MMMM yyyy");
-                days.push(_jsx(Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsxs(Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? 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
+                days.push(_jsx(Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsxs(Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? 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_COLOR_TRANSITION, _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: solidHoverFill, color: circleHoverColor }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
-import { Box, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, Grid, useDisclosure, } from "@chakra-ui/react";
+import { Box, Popover, PopoverAnchor, PopoverContent, PopoverBody, Portal, Grid, useDisclosure, } from "@chakra-ui/react";
 import { format, isSameDay, isBefore, isAfter, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, addMonths, subMonths, } from "date-fns";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Button from "../Button/Button.js";
@@ -10,6 +10,7 @@ import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes
 import { TextLabel } from "../Common/FormLabel.js";
 import TimePicker from "./TimePicker.js";
 import { inferPickerTypeFromFormat, resolvePickerAliases } from "./pickerField.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
 function CustomDatePicker(props) {
     var _a, _b, _c;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, } = props;
@@ -57,7 +58,20 @@ function CustomDatePicker(props) {
         }
         onOpen();
     };
+    const openAtPress = useRef(false);
+    const handleTriggerClick = () => {
+        const wasOpen = openAtPress.current;
+        openAtPress.current = false;
+        if (wasOpen)
+            onClose();
+        else
+            handleOpen();
+    };
     const handleTriggerKeyDown = (event) => {
+        if (isOpen && event.key === "Escape") {
+            onClose();
+            return;
+        }
         if (isOpen || (event.key !== "Enter" && event.key !== "ArrowDown"))
             return;
         event.preventDefault();
@@ -153,32 +167,17 @@ function CustomDatePicker(props) {
         : tempDate
             ? format(tempDate, dateFormat)
             : "";
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            var _a;
-            if (popoverRef.current &&
-                !popoverRef.current.contains(event.target) &&
-                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                if (tempDate) {
-                    emitSingle(tempDate); // commit latest temp on outside click
-                }
-                onClose();
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        else {
-            document.removeEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen, onClose, tempDate, props, emitSingle]);
-    return (_jsxs(Box, { width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { onClick: handleOpen, onKeyDown: handleTriggerKeyDown, children: _jsx(TextInput, { 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 }) }) }), _jsx(Portal, { appendToParentPortal: false, children: _jsx(PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [showDate && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => subMonths(prev, 1)), children: _jsx(ChevronLeftIcon, {}) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx("select", { value: currentMonth.getMonth(), onChange: (e) => {
+    useOutsideMouseDown([popoverRef, inputRef], () => {
+        if (!popoverRef.current)
+            return;
+        if (tempDate)
+            emitSingle(tempDate);
+        onClose();
+    }, { enabled: isOpen });
+    return (_jsxs(Box, { width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { onMouseDown: () => { openAtPress.current = isOpen; }, onClick: handleTriggerClick, onKeyDown: handleTriggerKeyDown, children: _jsx(TextInput, { 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, "aria-haspopup": "dialog" }) }) }), _jsx(Portal, { appendToParentPortal: false, children: _jsx(PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [showDate && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Previous month", onClick: () => setCurrentMonth((prev) => subMonths(prev, 1)), children: _jsx(ChevronLeftIcon, {}) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx("select", { "aria-label": "Month", 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) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx("select", { value: currentMonth.getFullYear(), onChange: (e) => {
+                                                                }, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx("select", { "aria-label": "Year", value: currentMonth.getFullYear(), onChange: (e) => {
                                                                     const newYear = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
                                                                 }, children: Array.from({ length: 100 }).map((_, i) => {
@@ -189,12 +188,11 @@ function CustomDatePicker(props) {
                                                                     if (!disableToday && !isRange) {
                                                                         handleDaySelect(new Date(today));
                                                                     }
-                                                                }, "aria-label": "Today", sx: { fontSize: "xs", px: 2 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => addMonths(prev, 1)), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: 700, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && (_jsx(TimePicker, { 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" })), _jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Next month", onClick: () => setCurrentMonth((prev) => addMonths(prev, 1)), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: 700, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             emitSingle(updatedDate);
                                         } })), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
                                                     setTempDate(null);
-                                                    // setTempDate(disableToday ? tomorrow : null);
                                                     setTempRangeStart(null);
                                                     setTempRangeEnd(null);
                                                     setRangeStart(null);

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Portal } from "@chakra-ui/react";
-import { MotionContext } from "framer-motion";
+import { MotionConfig, MotionContext } from "framer-motion";
 // NOTE: mounts on first open, after any open Modal's aria-hidden pass, then opens a render later.
 export const usePickerPortal = (isOpen) => {
     const [hasMounted, setHasMounted] = useState(false);
@@ -15,7 +15,7 @@ export const usePickerPortal = (isOpen) => {
 const ROOT_MOTION_CONTEXT = {};
 const BodyPortal = ({ children }) => {
     const bodyRef = useRef(document.body);
-    return (_jsx(Portal, { containerRef: bodyRef, children: _jsx(MotionContext.Provider, { value: ROOT_MOTION_CONTEXT, children: children }) }));
+    return (_jsx(Portal, { containerRef: bodyRef, children: _jsx(MotionConfig, { reducedMotion: "user", children: _jsx(MotionContext.Provider, { value: ROOT_MOTION_CONTEXT, children: children }) }) }));
 };
 export const PickerPortal = ({ isMounted, children }) => isMounted ? _jsx(BodyPortal, { children: children }) : null;
 export default PickerPortal;

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

@@ -17,6 +17,7 @@ import TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
 import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
 // helper to set time on date while preserving date part
 const setTimeFrom = (base, time) => {
     const b = base ? new Date(base) : new Date();
@@ -24,7 +25,7 @@ const setTimeFrom = (base, time) => {
 };
 /** Two-endpoint range field; `onChange` fires on Apply, outside click or calendar Escape, never a bare day click; `ref` is the `<input>`. */
 export const RangeDatePicker = forwardRef(function RangeDatePicker(props, ref) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     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 = DEFAULT_CONTROL_SIZE, dayStates, renderDayContent, } = props;
     const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
     const theme = useCustomTheme();
@@ -142,31 +143,14 @@ export const RangeDatePicker = forwardRef(function RangeDatePicker(props, ref) {
         setCurrentMonthState(from);
         setInputValue(`${format(from, dateFormat)} - ${format(to, dateFormat)}`);
     };
-    const presets = [
-        { label: "Today", getRange: () => [today, today] },
-        { label: "Yesterday", getRange: () => { const d = subDays(today, 1); return [d, d]; } },
-        { label: "Last 7 days", getRange: () => [subDays(today, 6), today] },
-        { label: "Last 30 days", getRange: () => [subDays(today, 29), today] },
-        { label: "This month", getRange: () => [startOfMonth(today), endOfMonth(today)] },
+    const presets = (_e = props.presets) !== null && _e !== void 0 ? _e : [
+        { label: "Today", range: { from: today, to: today } },
+        { label: "Yesterday", range: { from: subDays(today, 1), to: subDays(today, 1) } },
+        { label: "Last 7 days", range: { from: subDays(today, 6), to: today } },
+        { label: "Last 30 days", range: { from: subDays(today, 29), to: today } },
+        { label: "This month", range: { from: startOfMonth(today), to: endOfMonth(today) } },
     ];
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleMouseDownOutside = (event) => {
-            const target = event.target;
-            const inputEl = inputRef.current;
-            const triggerEl = triggerRef.current;
-            const popoverEl = popoverRef.current;
-            const insideInput = !!inputEl && inputEl.contains(target);
-            const insideTrigger = !!triggerEl && triggerEl.contains(target);
-            const insidePopover = !!popoverEl && popoverEl.contains(target);
-            if (!insideInput && !insideTrigger && !insidePopover) {
-                requestClose();
-            }
-        };
-        document.addEventListener("mousedown", handleMouseDownOutside, true);
-        return () => document.removeEventListener("mousedown", handleMouseDownOutside, true);
-    }, [isOpen, onClose, tempRangeStart, tempRangeEnd]); // eslint-disable-line react-hooks/exhaustive-deps
+    useOutsideMouseDown([inputRef, triggerRef, popoverRef], () => requestClose(), { enabled: isOpen, capture: true });
     const handleClear = () => {
         setTempRangeStart(null);
         setTempRangeEnd(null);
@@ -197,10 +181,7 @@ export const RangeDatePicker = forwardRef(function RangeDatePicker(props, ref) {
                                                 else {
                                                     onClose();
                                                 }
-                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
-                                                const [from, to] = p.getRange();
-                                                applyPreset(from, to);
-                                            }, children: p.label }, p.label))) }), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
+                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [presets.length > 0 && (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => applyPreset(p.range.from, p.range.to), children: p.label }, p.label))) })), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
                                                             if (!tempRangeStart) {
                                                                 setTempRangeStart(updated);
                                                                 return;

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

@@ -19,6 +19,7 @@ import { TimePickerInput } from "./TimePickerInput.js";
 import CalendarPanel from "./CalendarPanel.js";
 import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
 const TOKEN_CHARS = /[dMyHhmsaAm]/;
 const getPlaceholderForToken = (token, length) => {
     const lower = token.toLowerCase();
@@ -500,27 +501,10 @@ function SingleDatePickerInner(props, ref) {
             requestClose(updatedDate);
         }
     };
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleClickOutside = (event) => {
-            var _a, _b, _c;
-            const target = event.target;
-            const isInsidePopover = (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
-            const isInsideInput = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.contains(target);
-            const isInsideTrigger = (_c = triggerRef.current) === null || _c === void 0 ? void 0 : _c.contains(target);
-            if (!isInsidePopover && !isInsideInput && !isInsideTrigger) {
-                finalize();
-                onClose();
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside, true);
-        document.addEventListener("click", handleClickOutside, true);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside, true);
-            document.removeEventListener("click", handleClickOutside, true);
-        };
-    }, [isOpen, tempDate, activeFormat]); // eslint-disable-line react-hooks/exhaustive-deps
+    useOutsideMouseDown([popoverRef, inputRef, triggerRef], () => {
+        finalize();
+        onClose();
+    }, { enabled: isOpen, capture: true, includeClick: true });
     const ensureMaskValue = useCallback(() => {
         var _a, _b, _c, _d;
         if (!enableMask) {

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

@@ -15,6 +15,7 @@ import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
 function TimeOnlyPickerInner(props, ref) {
     var _a, _b, _c, _d;
@@ -72,26 +73,7 @@ function TimeOnlyPickerInner(props, ref) {
         emitChange(commitValue);
         onClose();
     };
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleMouseDownOutside = (event) => {
-            const target = event.target;
-            const inputEl = inputWrapperRef.current;
-            const triggerEl = triggerRef.current;
-            const popoverEl = popoverRef.current;
-            const insideInput = !!inputEl && inputEl.contains(target);
-            const insideTrigger = !!triggerEl && triggerEl.contains(target);
-            const insidePopover = !!popoverEl && popoverEl.contains(target);
-            if (!insideInput && !insideTrigger && !insidePopover) {
-                onClose();
-            }
-        };
-        document.addEventListener("mousedown", handleMouseDownOutside, true);
-        return () => {
-            document.removeEventListener("mousedown", handleMouseDownOutside, true);
-        };
-    }, [isOpen, onClose]);
+    useOutsideMouseDown([inputWrapperRef, triggerRef, popoverRef], () => onClose(), { enabled: isOpen, capture: true });
     const resolvedTempDate = tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0);
     return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsx(Box, { ref: inputWrapperRef, children: _jsx(TimePickerInput, { ref: ref, value: tempDate, onChange: (date) => {
                                         handleTimeInputChange(date);

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

@@ -17,7 +17,7 @@ const DescriptionList = ({ items, columns = DEFAULT_COLUMNS, layout = "stacked",
             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";
-            const Value = (_jsxs(Flex, { as: "dd", m: 0, align: "center", gap: 1, minW: 0, children: [_jsx(Text, { fontSize: "sm", color: colors.text[800], textAlign: layout === "inline" ? "right" : "left", noOfLines: layout === "inline" ? 1 : undefined, children: displayValue }), canCopy && _jsx(CopyButton, { value: item.value, size: "xs", tooltip: copyTooltip })] }));
+            const Value = (_jsxs(Flex, { as: "dd", m: 0, align: "center", gap: 1, minW: 0, children: [_jsx(Text, { fontSize: "sm", color: colors.text[800], textAlign: layout === "inline" ? "right" : "left", noOfLines: layout === "inline" ? 1 : undefined, overflowWrap: layout === "inline" ? undefined : "anywhere", children: displayValue }), canCopy && _jsx(CopyButton, { value: item.value, size: "xs", tooltip: copyTooltip })] }));
             const itemProps = layout === "inline"
                 ? { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3 }
                 : {};

package/dist/esm/Components/DetailSections/DetailSections.js

@@ -6,6 +6,7 @@ import Tabs from "../Tabs/Tabs.js";
 import SpecTable from "../SpecTable/SpecTable.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
 const DEFAULT_LABELS = {
     description: "Description",
     highlights: "Highlights",
@@ -99,7 +100,7 @@ const DetailSections = ({ description, highlights, specs, care, shipping, legal,
                     fontSize: "md",
                     bg: "transparent",
                     transition: transitionFor(["background-color"]),
-                    _hover: { bg: colors.background[200] },
+                    _hover: { bg: tonalHover(colors) },
                 },
                 panelProps: { px: 4, pt: 1, pb: 5, color: colors.text[800] },
             })) }) }));

package/dist/esm/Components/Divider/Divider.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Divider as ChakraDivider } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-/** Always vertical, fixed size/color, zero props — exported name keeps a "VeritcalDivider" typo; not interchangeable with Primitives' Divider. */
-const VeritcalDivider = () => {
+/** Always vertical, fixed size/color, zero props; not interchangeable with Primitives' Divider. */
+const VerticalDivider = () => {
     const { colors } = useCustomTheme();
     return (_jsx(ChakraDivider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: colors.boxborder[500] }));
 };
-export default VeritcalDivider;
+export default VerticalDivider;

package/dist/esm/Components/Drawer/Drawer.js

@@ -1,9 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { useEffect, useRef } from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { DialogNaming } from "../Modal/dialogNaming.js";
 import { warnDroppedSlotChildren } from "../Modal/warnDroppedSlotChildren.js";
 import { Drawer as ChakraDrawer, DrawerBody as ChakraDrawerBody, DrawerFooter as ChakraDrawerFooter, DrawerHeader as ChakraDrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton, } from "@chakra-ui/react";
+import { findSlot } from "../Common/findSlot.js";
 export const DrawerHeader = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
@@ -13,28 +15,31 @@ export const DrawerBody = ({ children }) => {
 export const DrawerFooter = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
-const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
-// Matches by type one Fragment deep, so `<>{cond && <DrawerFooter>...</DrawerFooter>}</>` isn't dropped.
-const findSlot = (children, slot) => {
-    for (const child of React.Children.toArray(children)) {
-        if (!isReactElement(child))
-            continue;
-        if (child.type === slot)
-            return child;
-        if (child.type === React.Fragment) {
-            const nested = findSlot(child.props.children, slot);
-            if (nested)
-                return nested;
-        }
-    }
-    return undefined;
+export const UNNAMED_DRAWER_WARNING = "[pixelize-design-library] Drawer: no DrawerHeader, aria-label or aria-labelledby, so screen readers announce it as an unnamed dialog.";
+const useUnnamedWarning = (isUnnamed) => {
+    const warned = useRef(false);
+    useEffect(() => {
+        if (process.env.NODE_ENV === "production" || !isUnnamed || warned.current)
+            return;
+        warned.current = true;
+        console.warn(UNNAMED_DRAWER_WARNING);
+    }, [isUnnamed]);
 };
-export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, }) {
-    var _a, _b;
+function DialogContent({ label, labelledBy, ...props }) {
+    return (_jsx(DialogNaming, { label: label, labelledBy: labelledBy, children: _jsx(DrawerContent, { ...props }) }));
+}
+/** Slide-in dialog; content must sit in DrawerHeader, DrawerBody or DrawerFooter slots. */
+export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) {
+    var _a, _b, _c;
     const { colors } = useCustomTheme();
     const headerSlot = findSlot(children, DrawerHeader);
     const bodySlot = findSlot(children, DrawerBody);
     const footerSlot = findSlot(children, DrawerFooter);
     warnDroppedSlotChildren("Drawer", children, [DrawerHeader, DrawerBody, DrawerFooter]);
-    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { ...contentProps, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: raisedRule(colors), ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: raisedRule(colors), ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
+    useUnnamedWarning(isOpen &&
+        !headerSlot &&
+        !(ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) &&
+        !(ariaLabelledBy === null || ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy.trim()) &&
+        !((_a = contentProps === null || contentProps === void 0 ? void 0 : contentProps["aria-label"]) === null || _a === void 0 ? void 0 : _a.trim()));
+    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_b = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _b !== void 0 ? _b : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DialogContent, { ...contentProps, label: ariaLabel, labelledBy: ariaLabelledBy, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: raisedRule(colors), ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_c = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _c !== void 0 ? _c : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: raisedRule(colors), ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
 }