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

package/dist/esm/Components/NavLauncher/spotlightParts.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronDown, Search as SearchIcon } from "lucide-react";
+import { useRef } from "react";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+import CopyButton from "../CopyButton/CopyButton.js";
+import { KbdShortcut } from "../Kbd/Kbd.js";
+import { activeRowStyle, activeRowSurface, copyHint, CountBadge, Highlight, HintLabel, useTouchDensity, } from "./launcherParts.js";
+export const QUICK_ACTION_LIMIT = 5;
+const HIDE_ON_TOUCH = { "@media (hover: none)": { display: "none" } };
+const COPIED_ON_TOUCH = (backgroundColor) => ({
+    "@media (hover: none)": {
+        position: "absolute",
+        top: "50%",
+        right: "10px",
+        transform: "translateY(-50%)",
+        padding: "2px 8px",
+        borderRadius: "md",
+        backgroundColor,
+    },
+});
+export function QuickActionsRow({ items, label, link, onRun, }) {
+    return (_jsx(Flex, { role: "group", "aria-label": label, "data-testid": "launcher-quick-actions", gap: "6px", minW: 0, flexWrap: "wrap", px: "4px", children: items.slice(0, QUICK_ACTION_LIMIT).map((item) => {
+            const Icon = item.icon;
+            const common = {
+                variant: "outline",
+                colorScheme: "gray",
+                size: "sm",
+                borderRadius: "full",
+                flexShrink: 0,
+                label: item.label,
+                leftIcon: Icon ? (_jsx(Icon, { size: 14, strokeWidth: 2, "aria-hidden": true })) : undefined,
+            };
+            return item.href && !item.run ? (_jsx(Button, { ...common, as: link.linkAs, href: item.href, onClick: link.onPlainClick }, item.id)) : (_jsx(Button, { ...common, onClick: () => onRun(item) }, item.id));
+        }) }));
+}
+const useCardSurface = (isActive) => {
+    const { colors } = useCustomTheme();
+    const { edge, fill } = activeRowStyle(colors);
+    return {
+        position: "relative",
+        borderRadius: "xl",
+        borderWidth: "1px",
+        borderColor: isActive ? edge : raisedRule(colors),
+        bg: isActive ? fill : colors.surfaceRaised,
+        transition: transitionFor(["background-color", "border-color"]),
+        sx: reducedMotionSx(),
+    };
+};
+function IconChip({ icon, size }) {
+    const { colors } = useCustomTheme();
+    const Icon = icon !== null && icon !== void 0 ? icon : SearchIcon;
+    return (_jsx(Flex, { boxSize: `${size}px`, borderRadius: "10px", bg: colors.primary.opacity[8], color: colors.accentText, align: "center", justify: "center", flexShrink: 0, children: _jsx(Icon, { size: Math.round(size / 2), strokeWidth: 1.8, "aria-hidden": true }) }));
+}
+function CardAnchor({ item, link }) {
+    if (!item.href)
+        return null;
+    return (_jsx(Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "xl" }));
+}
+export function TopHitCard({ item, query, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    const { colors } = useCustomTheme();
+    const surface = useCardSurface(isActive);
+    const meta = [item.context, item.hint].filter(Boolean).join(" · ");
+    return (_jsxs(Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, direction: "column", gap: "10px", p: "12px", onMouseMove: onHover, ...surface, children: [_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", minW: 0, cursor: "pointer", onClick: () => {
+                    if (!item.href)
+                        onOpen();
+                }, children: [_jsx(IconChip, { icon: item.icon, size: 40 }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: "2px", children: [_jsx(Text, { fontSize: "md", lineHeight: "22px", fontWeight: 600, color: colors.text[900], noOfLines: 1, children: _jsx(Highlight, { text: item.label, query: query }) }), meta ? (_jsx(Text, { fontSize: "xs-plus", color: colors.textMuted, noOfLines: 1, children: meta })) : null, item.keywordHint ? (_jsxs(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: [`${labels.matchedOn} “`, _jsx(Highlight, { text: item.keywordHint, query: query }), "\u201D"] })) : null] }), _jsx(CountBadge, { value: item.badge }), _jsx(Box, { "aria-hidden": true, flexShrink: 0, visibility: isActive ? "visible" : "hidden", sx: HIDE_ON_TOUCH, children: _jsx(KbdShortcut, { shortcut: "enter", size: "sm" }) })] }), _jsx(CardAnchor, { item: item, link: link })] }));
+}
+export function AnswerCard({ item, isActive, isCopied, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    var _a, _b;
+    const { colors } = useCustomTheme();
+    const surface = useCardSurface(isActive);
+    const answer = (_a = item.answer) !== null && _a !== void 0 ? _a : {
+        label: (_b = item.context) !== null && _b !== void 0 ? _b : "",
+        value: item.label,
+    };
+    const acts = Boolean(item.href || item.run);
+    const hint = acts ? labels.hintOpen : labels.hintCopy;
+    return (_jsxs(Flex, { role: "presentation", "data-group": true, p: "12px 14px", onMouseMove: onHover, ...surface, children: [_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", flex: 1, minW: 0, cursor: "pointer", onClick: () => {
+                    if (!item.href)
+                        onOpen();
+                }, children: [_jsx(IconChip, { icon: item.icon, size: 36 }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: "1px", children: [answer.label ? (_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: colors.textMuted, noOfLines: 1, children: answer.label })) : null, _jsx(Text, { id: `${optionId}-value`, fontSize: "lg", lineHeight: "24px", fontWeight: 600, color: colors.text[900], noOfLines: 2, children: answer.value }), answer.hint ? (_jsx(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: answer.hint })) : null] }), _jsxs(Flex, { "aria-hidden": true, align: "center", gap: "6px", flexShrink: 0, fontSize: "xs-minus", color: colors.textMuted, visibility: isActive || isCopied ? "visible" : "hidden", sx: isCopied ? COPIED_ON_TOUCH(surface.bg) : HIDE_ON_TOUCH, children: [_jsx(Box, { display: "contents", sx: HIDE_ON_TOUCH, children: _jsx(KbdShortcut, { shortcut: "enter", size: "xs" }) }), _jsx(HintLabel, { ...copyHint(hint, labels.copied, isCopied) })] })] }), _jsx(CardAnchor, { item: item, link: link })] }));
+}
+export function ShowMoreOption({ count, isActive, optionId, label, onExpand, onHover, }) {
+    const { colors } = useCustomTheme();
+    const isTouch = useTouchDensity();
+    return (_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "data-active": isActive, align: "center", gap: "6px", minH: isTouch ? "44px" : "30px", px: "8px", mt: "2px", borderRadius: "lg", cursor: "pointer", fontSize: "xs-plus", fontWeight: 500, color: colors.accentText, onClick: onExpand, onMouseMove: onHover, _hover: { bg: listRowBackgrounds(colors).active }, sx: isActive ? activeRowSurface(colors) : undefined, children: [_jsx(ChevronDown, { size: 14, strokeWidth: 2, "aria-hidden": true }), label(count)] }));
+}
+export const describeFacts = (facts) => facts.map((f) => `${f.label}: ${f.value}`).join("; ");
+export function FactList({ facts, labels, layout, onCopied, onCopyBlocked, }) {
+    const { colors } = useCustomTheme();
+    const values = useRef([]);
+    const isPane = layout === "pane";
+    return (_jsx(Box, { as: "dl", m: 0, display: "grid", gridTemplateColumns: isPane ? "minmax(0, 1fr)" : "repeat(auto-fill, minmax(11rem, 1fr))", gap: isPane ? "12px" : "6px 16px", children: facts.map((fact, i) => (_jsxs(Box, { minW: 0, children: [_jsx(Text, { as: "dt", fontSize: "xs-minus", lineHeight: "16px", color: colors.textMuted, children: fact.label }), _jsxs(Flex, { as: "dd", m: 0, align: "center", gap: "2px", minW: 0, children: [_jsx(Text, { ref: (node) => {
+                                values.current[i] = node;
+                            }, fontSize: isPane ? "13.5px" : "xs-plus", lineHeight: "20px", color: colors.text[900], wordBreak: "break-word", minW: 0, children: fact.value }), fact.copyable ? (_jsx(CopyButton, { value: fact.value, tooltip: labels.copy(fact.label), copiedLabel: labels.copied, size: isPane ? "xs" : "sm", iconSize: 14, onCopy: onCopied, onCopyError: () => onCopyBlocked(values.current[i]) })) : null] })] }, `${fact.label}-${i}`))) }));
+}
+export function PreviewPane({ item, placement, width, enterCopies, isCopied, labels, onCopied, onCopyBlocked, }) {
+    var _a, _b, _c, _d, _e;
+    const { colors } = useCustomTheme();
+    const isDock = placement === "dock";
+    return (_jsx(Flex, { as: "aside", "aria-label": labels.preview, "data-testid": "launcher-preview", "data-scroll-region": true, direction: "column", gap: isDock ? "10px" : "16px", w: isDock ? "100%" : width, maxH: isDock ? "min(45vh, 20rem)" : undefined, flexShrink: 0, px: "18px", pt: isDock ? "12px" : "16px", pb: isDock ? "12px" : "16px", bg: colors.backgroundColor.subtle, ...(isDock ? { borderTopWidth: "1px" } : { borderLeftWidth: "1px" }), borderColor: raisedRule(colors), overflowY: "auto", children: item ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", gap: "10px", minW: 0, children: [_jsx(IconChip, { icon: item.icon, size: isDock ? 28 : 36 }), _jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: isDock ? "14px" : "15px", fontWeight: 600, color: colors.text[900], noOfLines: isDock ? 1 : 2, children: (_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label }), item.context || item.answer ? (_jsx(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: (_d = (_c = item.answer) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : item.context })) : null] })] }), ((_e = item.facts) === null || _e === void 0 ? void 0 : _e.length) ? (_jsx(FactList, { facts: item.facts, labels: labels, layout: isDock ? "inline" : "pane", onCopied: onCopied, onCopyBlocked: onCopyBlocked }, item.id)) : (_jsxs(Flex, { "aria-hidden": true, align: "center", gap: "6px", fontSize: "xs", color: colors.textMuted, children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), _jsx(HintLabel, { ...copyHint(enterCopies ? labels.hintCopy : labels.hintOpen, labels.copied, isCopied) })] }))] })) : null }));
+}

package/dist/esm/Components/NavLauncher/useCopiedFlash.js

@@ -0,0 +1,17 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export const COPIED_FLASH_MS = 1500;
+export function useCopiedFlash() {
+    const [copiedId, setCopiedId] = useState(null);
+    const timer = useRef();
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const clear = useCallback(() => {
+        clearTimeout(timer.current);
+        setCopiedId(null);
+    }, []);
+    const flash = useCallback((id) => {
+        clearTimeout(timer.current);
+        setCopiedId(id);
+        timer.current = setTimeout(() => setCopiedId(null), COPIED_FLASH_MS);
+    }, []);
+    return { copiedId, flash, clear };
+}

package/dist/esm/Components/NavigationBar/NavigationBar.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Box, Button, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Stack, Text, } from "@chakra-ui/react";
 import Avatar from "../Avatar/Avatar.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { ruleOn } from "../../Theme/tokens/builders/planeStep.js";
 import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
@@ -11,6 +10,8 @@ import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import PersonChip from "../PersonChip/PersonChip.js";
 import { CircleArrowLeft, LogOut, PanelLeftClose, PanelRightClose, } from "lucide-react";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
 const SIDEBAR_TOGGLE_HIT = "2.5rem";
 export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, leading, }) {
@@ -29,7 +30,7 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         cursor: "pointer",
         border: "none",
         bg: "transparent",
-        transition: "background 0.15s",
+        transition: BACKGROUND_TRANSITION,
         _hover: { bg: barHoverBg },
     };
     const menuItemStyle = {
@@ -44,7 +45,7 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         fontSize: "xs-plus",
         color: theme.colors.text[900],
         gap: theme.space["2"],
-        transition: "background 0.12s",
+        transition: BACKGROUND_TRANSITION,
         _hover: { bg: menuHoverBg },
         _focus: { bg: menuHoverBg },
         _active: { bg: rowBackgrounds.selectedActive },
@@ -53,10 +54,10 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         maxW: "18rem", bg: theme.colors.surfaceRaised, 
                                         // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.
-                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Box, { pt: 4, pb: 2, px: 4, children: _jsx(PersonChip, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), _jsx(MenuDivider, { borderColor: raisedRule(theme.colors) }), _jsx(Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Box, { pt: 4, pb: 2, px: 4, children: _jsx(PersonChip, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), _jsx(MenuDivider, {}), _jsx(Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
                                                         var _a, _b, _c, _d;
                                                         return (_jsxs(MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), _jsx(Box, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
-                                                    }) }), _jsx(MenuDivider, { borderColor: raisedRule(theme.colors) }), _jsxs(MenuItem, { onClick: handleLogout, sx: {
+                                                    }) }), _jsx(MenuDivider, {}), _jsxs(MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
                                                         color: theme.colors.semanticText.error,
                                                         _hover: { bg: dangerTone.bg, color: dangerTone.fg },

package/dist/esm/Components/NoteTextArea/NoteTextArea.js

@@ -4,16 +4,13 @@ import { Box, Flex, Text, Input, Textarea, Button, Divider, Spinner, Tooltip, us
 import { Paperclip, X, SquarePen, File as FileIcon } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
-import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { FIELD_RADIUS } from "../Common/fieldStyles.js";
+import { onActivationKey } from "../Common/activationKey.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { focusVisibleRing, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
-const onActivationKey = (activate) => (e) => {
-    if (e.key !== "Enter" && e.key !== " ")
-        return;
-    e.preventDefault();
-    activate();
-};
 const countWords = (text = "") => {
     const t = text.trim();
     if (!t)
@@ -33,13 +30,6 @@ const NoteTextArea = forwardRef(function NoteTextArea({ width = "100%", handleSu
     const [titleShow, setTitleShow] = useState(false);
     const [files, setFiles] = useState([]);
     const [fileError, setFileError] = useState("");
-    const [isSaveDisabled, setIsSaveDisabled] = useState(false);
-    useEffect(() => {
-        setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
-    }, [titleValue, maxNoteWordCount]);
-    useEffect(() => {
-        setIsSaveDisabled(countWords(noteValue) > maxNoteWordCount);
-    }, [noteValue, maxNoteWordCount]);
     useEffect(() => {
         if (isEditable) {
             setIsActive(true);
@@ -129,14 +119,19 @@ const NoteTextArea = forwardRef(function NoteTextArea({ width = "100%", handleSu
     };
     const noteWordCount = countWords(noteValue);
     const isOverLimit = noteWordCount > maxNoteWordCount;
+    const isSaveDisabled = isOverLimit || countWords(titleValue) > maxNoteWordCount;
+    const activeBandBg = bandOn(theme.colors.gray[50], theme.colors.background[50]);
     const collapsedHoverBg = resolveHoverTint(theme.colors.gray[50], theme.colors.background[50]);
-    const activeControlHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.gray[50]);
+    const activeControlHoverBg = resolveHoverTint(theme.colors.gray[100], activeBandBg);
+    const chipBg = bandOn(theme.colors.gray[100], activeBandBg);
+    const chipInk = liftToContrast(theme.colors.textMuted, chipBg, AA_NORMAL_TEXT);
+    const chipRemoveHoverBg = bandOn(theme.colors.gray[200], chipBg);
     // NOTE: drawn inset because the rounded shell clips overflow.
     const placeholderFocusRing = {
         outline: "2px solid transparent",
         boxShadow: insetFocusRingShadow(theme.colors),
     };
-    return (_jsxs(Box, { w: width, borderRadius: FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? theme.colors.gray[50] : theme.colors.background[50], transition: transitionFor(["border-color"]), children: [!isActive && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", role: "button", tabIndex: 0, onClick: handleTextArea, onKeyDown: onActivationKey(handleTextArea), _focusVisible: placeholderFocusRing, bg: theme.colors.background[50], borderRadius: FIELD_RADIUS, minH: "2.5rem", transition: transitionFor(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [_jsx(SquarePen, { size: 16, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && (_jsxs(_Fragment, { children: [_jsxs(Box, { bg: theme.colors.background[50], children: [titleShow && (_jsxs(_Fragment, { children: [_jsx(Input, { value: titleValue, onChange: (e) => {
+    return (_jsxs(Box, { w: width, borderRadius: FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? activeBandBg : theme.colors.background[50], transition: transitionFor(["border-color"]), children: [!isActive && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", role: "button", tabIndex: 0, onClick: handleTextArea, onKeyDown: onActivationKey(handleTextArea), _focusVisible: placeholderFocusRing, bg: theme.colors.background[50], borderRadius: FIELD_RADIUS, minH: "2.5rem", transition: transitionFor(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [_jsx(SquarePen, { size: 16, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && (_jsxs(_Fragment, { children: [_jsxs(Box, { bg: theme.colors.background[50], children: [titleShow && (_jsxs(_Fragment, { children: [_jsx(Input, { value: titleValue, onChange: (e) => {
                                             if (e.target.value.length === 0)
                                                 setTitleShow(false);
                                             setTitleValue(e.target.value);
@@ -157,7 +152,7 @@ const NoteTextArea = forwardRef(function NoteTextArea({ width = "100%", handleSu
                                     if (validFiles.length > 0) {
                                         setFiles((prev) => [...prev, ...validFiles]);
                                     }
-                                }, multiple: true }), fileError && (_jsx(Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && (_jsx(Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => (_jsxs(Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: theme.colors.textMuted }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.textMuted, transition: transitionFor(["background-color", "color"]), _hover: { bg: theme.colors.gray[200], color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: _jsx(X, { size: 13 }) })] }, idx))) }))] })] }))] }));
+                                }, multiple: true }), fileError && (_jsx(Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && (_jsx(Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => (_jsxs(Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: chipBg, maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: chipInk }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: chipInk, whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", "aria-label": `Remove ${f.name}`, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: chipInk, transition: transitionFor(["background-color", "color"]), _hover: { bg: chipRemoveHoverBg, color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: _jsx(X, { size: 13 }) })] }, idx))) }))] })] }))] }));
 });
 NoteTextArea.displayName = "NoteTextArea";
 export default NoteTextArea;

package/dist/esm/Components/Notification/Notification.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Box, VStack, HStack, Text, Icon, Divider, Skeleton, SkeletonCircle, } from "@chakra-ui/react";
 import { Clock, AlertCircle, Calendar, X, User } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
@@ -10,8 +10,10 @@ import Avatar from "../Avatar/Avatar.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { onActivationKey } from "../Common/activationKey.js";
 const CARD_TRANSITION = transitionFor(["box-shadow", "background-color", "border-color"], "base");
 const DISMISS_TRANSITION = transitionFor(["background-color", "color", "transform"], "base");
+const TICK_MS = 60000;
 /** Date-driven countdown card ("due in 3 days" / "overdue by 2 hours"). For inbox-style rows use `NotificationItem`, which cannot render a future date. */
 const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -31,6 +33,15 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
     const startDate = useMemo(() => notification.startDate
         ? new Date(notification.startDate)
         : null, [notification.startDate]);
+    const hasTarget = Boolean(notification.dueDate || notification.endDate);
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!hasTarget || isLoading)
+            return;
+        setNow(Date.now());
+        const timer = setInterval(() => setNow(Date.now()), TICK_MS);
+        return () => clearInterval(timer);
+    }, [hasTarget, isLoading, notification.dueDate, notification.endDate]);
     const { timeLabel, diffDays } = useMemo(() => {
         const targetDate = notification.dueDate
             ? new Date(notification.dueDate)
@@ -39,8 +50,7 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                 : null;
         if (!targetDate)
             return { timeLabel: "", diffDays: null };
-        const now = new Date();
-        const diffMs = targetDate.getTime() - now.getTime();
+        const diffMs = targetDate.getTime() - now;
         const diffMinutes = Math.floor(diffMs / (1000 * 60));
         const diffHours = diffMinutes / 60;
         const diffDays = diffHours / 24;
@@ -54,11 +64,11 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
         if (diffMs < 0) {
             const overdueMinutes = Math.abs(diffMinutes);
             if (overdueMinutes < 60)
-                label = `${typeLabel} overdue by ${overdueMinutes} minute${overdueMinutes === 1 ? "" : "s"} ago`;
+                label = `${typeLabel} overdue by ${overdueMinutes} minute${overdueMinutes === 1 ? "" : "s"}`;
             else if (overdueMinutes < 1440)
-                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 60)} hour${Math.floor(overdueMinutes / 60) === 1 ? "" : "s"} ago`;
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 60)} hour${Math.floor(overdueMinutes / 60) === 1 ? "" : "s"}`;
             else
-                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 1440)} day${Math.floor(overdueMinutes / 1440) === 1 ? "" : "s"} ago`;
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 1440)} day${Math.floor(overdueMinutes / 1440) === 1 ? "" : "s"}`;
         }
         else {
             if (diffMinutes < 60)
@@ -69,7 +79,7 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                 label = `${typeLabel} due in ${Math.ceil(diffDays)} day${Math.ceil(diffDays) === 1 ? "" : "s"}`;
         }
         return { timeLabel: label, diffDays };
-    }, [notification.dueDate, notification.endDate, notification.type]);
+    }, [notification.dueDate, notification.endDate, notification.type, now]);
     const getStatusColor = () => {
         if (diffDays === null)
             return theme.colors.textMuted;
@@ -99,29 +109,17 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
             };
         return startDate.toLocaleString("en-US", options);
     }, [startDate, notification.type]);
-    // 🔄 If loading, show skeleton
     if (isLoading) {
         return (_jsx(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", children: _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(SkeletonCircle, { size: "4" }), _jsx(Skeleton, { height: "14px", width: "60%" })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(SkeletonCircle, { size: "8" }), _jsxs(VStack, { align: "start", spacing: 1, flex: "1", children: [_jsx(Skeleton, { height: "16px", width: "70%" }), _jsx(Skeleton, { height: "12px", width: "50%" })] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "40%" }), _jsx(Skeleton, { height: "12px", width: "30%" })] })] }) }));
     }
-    // 🧩 Normal render
-    return (_jsxs(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md" }, transition: CARD_TRANSITION, sx: reducedMotionSx(), position: "relative", children: [onClose && (_jsx(Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        onClose();
-                    }
-                }, role: "button", "aria-label": "Dismiss notification", tabIndex: 0, p: 1, borderRadius: "md", _hover: {
+    return (_jsxs(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md" }, transition: CARD_TRANSITION, sx: reducedMotionSx(), position: "relative", children: [onClose && (_jsx(Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: onActivationKey(() => onClose()), role: "button", "aria-label": "Dismiss notification", tabIndex: 0, p: 1, borderRadius: "md", _hover: {
                     bg: closeTone.bg,
                     color: closeTone.fg,
                     transform: "scale(1.1)",
-                }, transition: DISMISS_TRANSITION, sx: reducedMotionSx(), children: _jsx(X, { size: 16 }) })), _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: dueLabelColor, fontWeight: 600, children: timeLabel })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontWeight: 700, fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), ...(onClick && {
+                }, _focusVisible: focusVisibleRing(theme.colors), transition: DISMISS_TRANSITION, sx: reducedMotionSx(), children: _jsx(X, { size: 16 }) })), _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: dueLabelColor, fontWeight: 600, children: timeLabel })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontWeight: 700, fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), ...(onClick && {
                                             role: "button",
                                             tabIndex: 0,
-                                            onKeyDown: (e) => {
-                                                if (e.key !== "Enter" && e.key !== " ")
-                                                    return;
-                                                e.preventDefault();
-                                                onClick(notification.id, notification.type);
-                                            },
+                                            onKeyDown: onActivationKey(() => onClick(notification.id, notification.type)),
                                             _focusVisible: focusVisibleRing(theme.colors),
                                         }), children: notification.title }), notification.description && (_jsx(Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: Calendar, color: metaColor, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: metaColor, children: formattedStartDateTime })] }), _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: User, color: metaColor, boxSize: 4 }), notification.host && (_jsx(Text, { fontSize: "sm", color: metaColor, children: notification.host }))] }), showStatus && (_jsx(Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
 };

package/dist/esm/Components/NotificationBell/notificationHelpers.js

@@ -72,20 +72,26 @@ const MINUTE = 60;
 const HOUR = MINUTE * 60;
 const DAY = HOUR * 24;
 const WEEK = DAY * 7;
+export const DEFAULT_RELATIVE_TIME_LABELS = {
+    justNow: "Just now",
+    minutesAgo: (count) => `${count}m ago`,
+    hoursAgo: (count) => `${count}h ago`,
+    daysAgo: (count) => `${count}d ago`,
+};
 /** "Just now" / "5m ago" / "3h ago" / "2d ago"; falls back to a short date past a week. */
-export function formatRelativeTime(value, now = Date.now()) {
+export function formatRelativeTime(value, now = Date.now(), { labels = DEFAULT_RELATIVE_TIME_LABELS, locale = "en-US" } = {}) {
     const then = toDate(value);
     const nowMs = typeof now === "number" ? now : now.getTime();
     const diffSec = Math.max(0, Math.round((nowMs - then.getTime()) / 1000));
     if (diffSec < MINUTE)
-        return "Just now";
+        return labels.justNow;
     if (diffSec < HOUR)
-        return `${Math.floor(diffSec / MINUTE)}m ago`;
+        return labels.minutesAgo(Math.floor(diffSec / MINUTE));
     if (diffSec < DAY)
-        return `${Math.floor(diffSec / HOUR)}h ago`;
+        return labels.hoursAgo(Math.floor(diffSec / HOUR));
     if (diffSec < WEEK)
-        return `${Math.floor(diffSec / DAY)}d ago`;
-    return then.toLocaleDateString("en-US", { day: "2-digit", month: "short" });
+        return labels.daysAgo(Math.floor(diffSec / DAY));
+    return then.toLocaleDateString(locale, { day: "2-digit", month: "short" });
 }
 /** The tickets/hrms formula: max(min, viewport bottom edge - panel top - gutter), remeasured on resize. */
 export function useAnchoredPanelHeight(ref, options) {

package/dist/esm/Components/OffersList/OffersList.js

@@ -7,6 +7,7 @@ import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
 const COPIED_MS = 1600;
 const DEFAULT_LABELS = {
     summary: (count, best) => `Offers (${count}) · Best: ${best}`,
@@ -30,6 +31,7 @@ const writeToClipboard = (code) => {
 const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenChange, onCopy, labels, "data-testid": testId, }) => {
     var _a;
     const { colors } = useCustomTheme();
+    const hoverFill = tonalHover(colors);
     const panelId = useId();
     const [innerOpen, setInnerOpen] = useState(defaultOpen);
     const [copiedId, setCopiedId] = useState(null);
@@ -63,7 +65,7 @@ const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenCh
         }, COPIED_MS);
         onCopy === null || onCopy === void 0 ? void 0 : onCopy(offer);
     };
-    return (_jsxs(Box, { bg: colors.background[100], borderRadius: "xl", overflow: "hidden", "data-testid": testId, children: [_jsxs(Flex, { as: "button", type: "button", w: "100%", minH: "3rem", px: 4, py: 3, align: "center", gap: 3, textAlign: "left", borderRadius: "xl", color: colors.header[900], "aria-expanded": open, "aria-controls": panelId, onClick: toggle, transition: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.accentText, children: _jsx(Tag, { size: 18 }) }), _jsx(Text, { as: "span", flex: "1", minW: 0, fontSize: "sm", fontWeight: 600, noOfLines: open ? undefined : 1, children: summary }), _jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.textMuted, transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform"]), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 18 }) })] }), _jsx(Box, { id: panelId, hidden: !open, children: _jsx(Box, { as: "ul", listStyleType: "none", m: 0, px: 4, pb: 2, children: offers.map((offer) => {
+    return (_jsxs(Box, { bg: colors.background[100], borderRadius: "xl", overflow: "hidden", "data-testid": testId, children: [_jsxs(Flex, { as: "button", type: "button", w: "100%", minH: "3rem", px: 4, py: 3, align: "center", gap: 3, textAlign: "left", borderRadius: "xl", color: colors.header[900], "aria-expanded": open, "aria-controls": panelId, onClick: toggle, transition: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.accentText, children: _jsx(Tag, { size: 18 }) }), _jsx(Text, { as: "span", flex: "1", minW: 0, fontSize: "sm", fontWeight: 600, noOfLines: open ? undefined : 1, children: summary }), _jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.textMuted, transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform"]), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 18 }) })] }), _jsx(Box, { id: panelId, hidden: !open, children: _jsx(Box, { as: "ul", listStyleType: "none", m: 0, px: 4, pb: 2, children: offers.map((offer) => {
                         const copied = copiedId === offer.id;
                         const { code } = offer;
                         return (_jsxs(Flex, { as: "li", position: "relative", align: "center", justify: "space-between", gap: 3, py: 3, sx: {
@@ -76,7 +78,7 @@ const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenCh
                                     height: "1px",
                                     background: colors.background[200],
                                 },
-                            }, children: [_jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), _jsx(Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? (_jsxs(Flex, { align: "center", gap: 1, flexShrink: 0, children: [_jsx(Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: NUMERIC_TEXT, children: code }), _jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [copied ? _jsx(Check, { size: 16, "aria-hidden": true }) : null, _jsx("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
+                            }, children: [_jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), _jsx(Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? (_jsxs(Flex, { align: "center", gap: 1, flexShrink: 0, children: [_jsx(Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: NUMERIC_TEXT, children: code }), _jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [copied ? _jsx(Check, { size: 16, "aria-hidden": true }) : null, _jsx("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
                     }) }) }), _jsx(VisuallyHidden, { "aria-live": "polite", children: message })] }));
 };
 export default OffersList;

package/dist/esm/Components/OptionChip/OptionChip.js

@@ -7,6 +7,7 @@ import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 import { optionInk } from "./optionInk.js";
 const CHIP_HEIGHT = { md: "2.75rem", lg: "3.25rem" };
 const PACK_HEIGHT = { md: "3.5rem", lg: "4rem" };
@@ -62,7 +63,7 @@ const OptionChip = forwardRef(function OptionChip({ label, selected = false, dis
         return (_jsxs(Box, { ...base, display: "inline-flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "0.25rem", minW: CHIP_HEIGHT[size], minH: CHIP_HEIGHT[size], borderRadius: "xl", bg: "transparent", color: colors.text[800], title: showLabel ? undefined : label, sx: {
                 ...motion,
                 "&:hover:not(:disabled) [data-ring]:not([data-selected])": { borderColor: colors.boxborder[500] },
-            }, children: [_jsx(Box, { as: "span", "data-ring": true, "data-selected": selected ? "" : undefined, display: "inline-flex", p: "0.125rem", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : invalid ? colors.semanticText.error : "transparent", transition: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsx(Box, { as: "span", position: "relative", display: "block", boxSize: dot, borderRadius: "full", backgroundColor: swatch !== null && swatch !== void 0 ? swatch : colors.background[200], boxShadow: `inset 0 0 0 1px ${colors.boxborder[200]}`, sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined }) }), showLabel ? (_jsx(Text, { as: "span", fontSize: "xs", fontWeight: selected ? 600 : 500, color: selected ? colors.header[900] : rest.ink, lineHeight: "short", children: label })) : null] }));
+            }, children: [_jsx(Box, { as: "span", "data-ring": true, "data-selected": selected ? "" : undefined, display: "inline-flex", p: "0.125rem", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : invalid ? colors.semanticText.error : "transparent", transition: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsx(Box, { as: "span", position: "relative", display: "block", boxSize: dot, borderRadius: "full", backgroundColor: swatch !== null && swatch !== void 0 ? swatch : colors.background[200], boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${colors.boxborder[200]}`, sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined }) }), showLabel ? (_jsx(Text, { as: "span", fontSize: "xs", fontWeight: selected ? 600 : 500, color: selected ? colors.header[900] : rest.ink, lineHeight: "short", children: label })) : null] }));
     }
     if (variant === "image-tile") {
         const tile = TILE[size];
@@ -91,6 +92,6 @@ const OptionChip = forwardRef(function OptionChip({ label, selected = false, dis
             ...motion,
             "&:hover:not(:disabled):not([aria-checked=true])": unavailable ? undefined : { backgroundColor: tone.hoverFill },
             ...(unavailable ? { "&::after": { content: '""', ...strikeLayer(band("currentColor", "0.5px")) } } : {}),
-        }, children: [content, isPack && hint ? (_jsx(Text, { as: "span", mt: "0.125rem", fontSize: "xs-minus", fontWeight: 500, color: tone.hint, sx: NUMERIC_TEXT, children: hint })) : null, !isPack && hint ? (_jsx(Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "px", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 1px ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
+        }, children: [content, isPack && hint ? (_jsx(Text, { as: "span", mt: "0.125rem", fontSize: "xs-minus", fontWeight: 500, color: tone.hint, sx: NUMERIC_TEXT, children: hint })) : null, !isPack && hint ? (_jsx(Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "px", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 ${BORDER_WIDTHS.hairline} ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
 });
 export default OptionChip;

package/dist/esm/Components/OptionChip/optionInk.js

@@ -1,15 +1,17 @@
 import { mix } from "../../Theme/tokens/builders/color.js";
 import { AA_NORMAL_TEXT, onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 /** Resting and selected fills for an option; selection is the neutral ink fill, never the brand. */
 export const optionInk = (colors) => {
     const selectedFill = colors.header[900];
+    const restHover = bandOn(colors.background[400], colors.background[300]);
     const selectedInk = onFilled(selectedFill, colors.white, colors.black);
     const rest = {
         fill: colors.background[300],
-        hoverFill: colors.background[400],
+        hoverFill: restHover,
         ink: colors.text[800],
-        hint: liftToContrast(colors.text[700], colors.background[400], AA_NORMAL_TEXT),
+        hint: liftToContrast(colors.text[700], restHover, AA_NORMAL_TEXT),
     };
     const selected = {
         fill: selectedFill,

package/dist/esm/Components/OrderStatusTimeline/OrderStatusTimeline.js

@@ -6,6 +6,7 @@ import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 const DEFAULT_LABELS = { done: "Completed", current: "In progress", upcoming: "Upcoming" };
 const MARKER = "1.5rem";
 const RULE = "2px";
@@ -27,7 +28,7 @@ const Marker = ({ state, colors }) => {
         return (_jsx(Box, { ...base, bg: ink, color: onFilled(ink, colors.white, colors.black), children: _jsx(Check, { size: 14, strokeWidth: 3 }) }));
     }
     if (state === "current") {
-        return (_jsx(Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 2px ${ink}`, children: _jsx(Box, { as: "span", boxSize: "0.5rem", borderRadius: "full", bg: ink }) }));
+        return (_jsx(Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.thick} ${ink}`, children: _jsx(Box, { as: "span", boxSize: "0.5rem", borderRadius: "full", bg: ink }) }));
     }
     return _jsx(Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 1.5px ${colors.textMuted}` });
 };

package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -3,15 +3,18 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Flex, Image, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Spinner, Text, useDisclosure, } from "@chakra-ui/react";
 import { Building2, Check, ChevronDown, ChevronsUpDown, Search } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { optionRowCursorSx } from "../Select/optionRowInk.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { avatarColor, orgInitial, } from "./OrgSwitcherProps.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const sizeMap = {
     sm: { h: "32px", avatarH: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
     md: { h: "40px", avatarH: "36px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
@@ -24,10 +27,10 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
         return (_jsx(Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "lg", objectFit: "cover", flexShrink: 0 }));
     }
     const fill = avatarColor(org.name, chartMode(colors));
-    return (_jsx(Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: onFilled(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700, children: orgInitial(org.name) }));
+    return (_jsx(Flex, { "aria-hidden": "true", "data-initials": orgInitial(org.name), _before: { content: "attr(data-initials)" }, align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: onFilled(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700 }));
 };
 const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, display = "full", }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const theme = useCustomTheme();
     const isMd = useMatchMedia(MD_QUERY, true);
     const avatarOnly = display === "avatar" || (display === "auto" && !isMd);
@@ -85,6 +88,9 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
             : { bg: "transparent" };
     // NOTE: hover reads against backgroundColor.light (the navbar shell) — for zinc the two measured near-1.0, invisible.
     const triggerHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.backgroundColor.light);
+    const searchRule = isDarkCanvas(theme.colors.surfaceRaised)
+        ? raisedRule(theme.colors)
+        : theme.colors.gray[100];
     const handleSelect = (org) => {
         onClose();
         setQuery("");
@@ -94,13 +100,14 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     const avatarNode = selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: accentTextOnCanvas(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: _jsx(Building2, { size: 14 }) }));
     const labelGap = s.px === 2 ? 8 : 10;
     const squeezedWidth = `calc(${s.px * 8 + labelGap * 2 + 16}px + ${s.avatar})`;
-    const trigger = (_jsxs(Flex, { as: "button", type: "button", "aria-label": avatarOnly && selected ? `${ariaLabel}, ${selected.name}` : ariaLabel, align: "center", justify: avatarOnly ? "center" : undefined, gap: avatarOnly ? "4px" : `${labelGap}px`, h: avatarOnly ? s.avatarH : s.h, px: avatarOnly ? "6px" : s.px, minW: avatarOnly ? undefined : squeezedWidth, flexShrink: avatarOnly ? 0 : 1, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [avatarNode, !avatarOnly && (_jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, minW: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : avatarOnly ? (_jsx(Box, { as: ChevronDown, size: 12, color: theme.colors.textMuted, flexShrink: 0, "aria-hidden": "true" })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }));
+    const shownName = avatarOnly ? selected === null || selected === void 0 ? void 0 : selected.name : ((_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder);
+    const trigger = (_jsxs(Flex, { as: "button", type: "button", "aria-label": shownName ? `${ariaLabel}, ${shownName}` : ariaLabel, align: "center", justify: avatarOnly ? "center" : undefined, gap: avatarOnly ? "4px" : `${labelGap}px`, h: avatarOnly ? s.avatarH : s.h, px: avatarOnly ? "6px" : s.px, minW: avatarOnly ? undefined : squeezedWidth, flexShrink: avatarOnly ? 0 : 1, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: BACKGROUND_TRANSITION, _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [avatarNode, !avatarOnly && (_jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, minW: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_b = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _b !== void 0 ? _b : placeholder })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : avatarOnly ? (_jsx(Box, { as: ChevronDown, size: 12, color: theme.colors.textMuted, flexShrink: 0, "aria-hidden": "true" })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }));
     return (_jsxs(Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? (_jsx(ToolTip, { label: (_b = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _b !== void 0 ? _b : placeholder, placement: "bottom", isDisabled: isOpen, children: _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: _jsx(PopoverTrigger, { children: trigger }) }) })) : (_jsx(PopoverTrigger, { children: trigger })), _jsx(PopoverContent, { minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? (_jsx(ToolTip, { label: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder, placement: "bottom", isDisabled: isOpen, children: _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: _jsx(PopoverTrigger, { children: trigger }) }) })) : (_jsx(PopoverTrigger, { children: trigger })), _jsx(PopoverContent, { minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
                 // NOTE: Chakra's --popper-bg is hardcoded white via dead _dark — without an explicit bg the panel stayed white.
-                bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: searchRule, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && filtered.length > 0) {
                                                 e.preventDefault();
                                                 focusOption(0);
@@ -111,7 +118,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: "transparent", transition: "background 0.12s ease", ...optionRowCursorSx(rowBackgrounds), onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: "transparent", transition: BACKGROUND_TRANSITION, ...optionRowCursorSx(rowBackgrounds), onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
                                 }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 export default OrgSwitcher;