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

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;

package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { Avatar, Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton, SkeletonText, Spinner, Text, Tooltip, VStack, } from "@chakra-ui/react";
+import { Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton, SkeletonText, Spinner, Text, Tooltip, VStack, } from "@chakra-ui/react";
 import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
@@ -10,11 +10,13 @@ import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import Avatar from "../Avatar/Avatar.js";
 import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import Tag from "../Tag/Tag.js";
 import CreateOrgModal from "./CreateOrgModal.js";
 import DeleteOrgModal from "./DeleteOrgModal.js";
+import { onActivationKey } from "../Common/activationKey.js";
 const DEFAULT_LABELS = {
     greeting: "Hello, User!",
     manageSubtitle: "Manage your organizations",
@@ -128,12 +130,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
                 borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primaryTile, color: onPrimaryTile, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: transitionFor(["color", "gap"]), sx: reducedMotionSx(), role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: (e) => {
-                                        if (e.key !== "Enter" && e.key !== " ")
-                                            return;
-                                        e.preventDefault();
-                                        onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId);
-                                    }, children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimaryTile, bg: primaryTile }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primaryTile, color: onPrimaryTile, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: transitionFor(["color", "gap"]), sx: reducedMotionSx(), role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: onActivationKey(() => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId)), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimaryTile, bg: primaryTile }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
                                         ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? (_jsx(Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? (_jsxs(Box, { children: [_jsxs(HStack, { spacing: 1, children: [_jsx(Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);
@@ -166,7 +163,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
     return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primarySolid.fill, color: primarySolid.color, children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
                                                     ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
-                                                    : labels.greeting }), _jsx(Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), _jsx(Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), _jsx(Button, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? (_jsx(Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Box, { ...cardSx, p: 3, children: [_jsx(Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), _jsx(SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? (_jsx(EmptyState, { icon: Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: _jsx(Button, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (_jsxs(VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Users, { size: 16, color: colors.accentText }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), _jsx(Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Mail, { size: 16, color: colors.semanticText.warning }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), _jsx(Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, _jsx(CreateOrgModal, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
+                                                    : labels.greeting }), userName ? _jsx(Avatar, { size: "xs", name: userName, src: userAvatarUrl }) : null] }), _jsx(Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), _jsx(Button, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? (_jsx(Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Box, { ...cardSx, p: 3, children: [_jsx(Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), _jsx(SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? (_jsx(EmptyState, { icon: Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: _jsx(Button, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (_jsxs(VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Users, { size: 16, color: colors.accentText }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), _jsx(Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Mail, { size: 16, color: colors.semanticText.warning }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), _jsx(Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, _jsx(CreateOrgModal, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
                     await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));
                     setCreateOpen(false);
                 }, labels: labels }), _jsx(DeleteOrgModal, { isOpen: deleteOrgId !== null, onClose: () => setDeleteOrgId(null), onConfirm: async () => {

package/dist/esm/Components/PlanPill/PlanPill.js

@@ -6,6 +6,8 @@ import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradie
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { chipBorder, chipFill, statusGradient, } from "./planPillGradient.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BASE_TRANSFORM_BOX_SHADOW_TRANSITION = transitionFor(["transform", "box-shadow"], "base");
 const TONE_ICON = {
     normal: Sparkles,
     warning: Clock,
@@ -23,7 +25,7 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const ink = resolved.ink;
     const Icon = icon === undefined ? TONE_ICON[tone] : icon;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: gradientCss(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: gradientCss(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: BASE_TRANSFORM_BOX_SHADOW_TRANSITION, _hover: {
             transform: "translateY(-1px)",
             boxShadow: `0 6px 18px ${resolved.from}59`,
         }, sx: {
@@ -32,6 +34,6 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
                 transition: "none",
                 _hover: { transform: "none" },
             },
-        }, children: [Icon ? _jsx(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, _jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? (_jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? (_jsx(Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: chipFill(resolved), border: "1px solid", borderColor: chipBorder(resolved), fontSize: "xs-minus", fontWeight: "700", lineHeight: "18px", sx: NUMERIC_TEXT, children: status })) : null] }));
+        }, children: [Icon ? _jsx(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, _jsx(Text, { as: "span", fontSize: "xs-plus", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? (_jsx(Text, { as: "span", fontSize: "xs-plus", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? (_jsx(Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: chipFill(resolved), border: "1px solid", borderColor: chipBorder(resolved), fontSize: "xs-minus", fontWeight: "700", lineHeight: "18px", sx: NUMERIC_TEXT, children: status })) : null] }));
 };
 export default PlanPill;

package/dist/esm/Components/ProductCard/ProductCardAction.js

@@ -9,6 +9,7 @@ import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/mot
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
 import { FINE_POINTER } from "./cardMetrics.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
 const morphIn = keyframes `
   0% { opacity: 0; transform: scale(0.85); }
   100% { opacity: 1; transform: scale(1); }
@@ -32,7 +33,7 @@ const ProductCardAction = ({ kind, title, labels, placement, inset, hoverBar, qu
     const bar = onMedia && hoverBar && !isNotify;
     const look = onMedia
         ? { bg: overlayScrim(colors), hoverBg: overlayScrim(colors), color: colors.white }
-        : { bg: colors.background[100], hoverBg: colors.background[200], color: colors.header[900] };
+        : { bg: colors.background[100], hoverBg: tonalHover(colors), color: colors.header[900] };
     return (_jsxs(Box, { as: "button", type: "button", "data-control": true, "data-bar": bar || undefined, "data-action": kind, "aria-label": name, onClick: onPress, ...place, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 1.5, h: DISC, minW: DISC, px: isNotify ? 3 : 0, borderRadius: "full", bg: look.bg, color: look.color, cursor: "pointer", transition: transitionFor(["background-color", "opacity", "transform"], "base"), _hover: { bg: look.hoverBg }, _active: reduced ? undefined : { transform: "scale(0.9)" }, sx: {
             outline: "none",
             ...(onMedia ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),

package/dist/esm/Components/ProductCard/ProductCardSwatches.js

@@ -6,6 +6,7 @@ import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.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";
 const TARGET = "1.5rem";
 const UNAVAILABLE_OPACITY = 0.45;
 /** Colour dots for the first swatch axis: hover or focus previews the image, a press keeps it. */
@@ -30,7 +31,7 @@ const ProductCardSwatches = ({ axis, limit, dot, activeId, soldOutIds, labels, o
                     const soldOut = soldOutIds.has(value.id);
                     return (_jsx(Box, { as: "button", type: "button", role: "radio", ref: (el) => {
                             cells.current[index] = el;
-                        }, "aria-checked": selected, "aria-label": soldOut ? `${value.label}, ${labels.soldOut.toLowerCase()}` : value.label, tabIndex: index === activeIndex ? 0 : -1, title: value.label, onClick: () => onPick(value.id), onMouseEnter: () => onPreview(value.id), onFocus: () => onPreview(value.id), onBlur: () => onPreview(null), display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: TARGET, flexShrink: 0, borderRadius: "full", cursor: "pointer", sx: { outline: "none", ...focusVisibleStyles(colors) }, children: _jsx(Box, { as: "span", display: "inline-flex", p: "2px", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : "transparent", transition: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsx(Box, { as: "span", display: "block", boxSize: `${dot}px`, borderRadius: "full", backgroundColor: value.swatch, opacity: soldOut ? UNAVAILABLE_OPACITY : 1, boxShadow: `inset 0 0 0 1px ${colors.boxborder[200]}` }) }) }, value.id));
+                        }, "aria-checked": selected, "aria-label": soldOut ? `${value.label}, ${labels.soldOut.toLowerCase()}` : value.label, tabIndex: index === activeIndex ? 0 : -1, title: value.label, onClick: () => onPick(value.id), onMouseEnter: () => onPreview(value.id), onFocus: () => onPreview(value.id), onBlur: () => onPreview(null), display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: TARGET, flexShrink: 0, borderRadius: "full", cursor: "pointer", sx: { outline: "none", ...focusVisibleStyles(colors) }, children: _jsx(Box, { as: "span", display: "inline-flex", p: "2px", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : "transparent", transition: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsx(Box, { as: "span", display: "block", boxSize: `${dot}px`, borderRadius: "full", backgroundColor: value.swatch, opacity: soldOut ? UNAVAILABLE_OPACITY : 1, boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${colors.boxborder[200]}` }) }) }, value.id));
                 }) }), rest > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { as: "span", "aria-hidden": true, ml: 1, fontSize: "xs", fontWeight: 500, color: colors.textMuted, sx: NUMERIC_TEXT, children: ["+", rest] }), _jsx(VisuallyHidden, { children: labels.moreColours(rest) })] })) : null] }));
 };
 export default ProductCardSwatches;

package/dist/esm/Components/ProductDetails/ProductDetails.js

@@ -29,6 +29,7 @@ import ReviewList from "../ReviewList/ReviewList.js";
 import { findVariant, priceRange, selectionComplete, stockState } from "../Commerce/commerceVariants.js";
 import { DEFAULT_MAX_QUANTITY, activeMediaIds, clampQuantity, firstUnpickedAxis, packUnitPrice, quantityCeiling, resolveVariants, soldOutEverywhere, } from "./productDetailsModel.js";
 import { useInViewport } from "./useInViewport.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
 const DESKTOP_QUERY = "(min-width: 1024px)";
 const DESKTOP_MIN_WIDTH = 960;
 const DEFAULT_ADDED_MS = 1600;
@@ -206,7 +207,7 @@ const ProductDetails = ({ product, selection: selectionProp, defaultSelection, o
     const badgeSlot = product.badges && product.badges.length > 0 ? _jsx(ProductBadges, { badges: product.badges, max: 2, variant: "glass", size: "md" }) : undefined;
     const gallery = mediaSlot !== null && mediaSlot !== void 0 ? mediaSlot : (_jsx(MediaGallery, { media: product.media, layout: desktop ? "thumbs-left" : "swipe", aspectRatio: "4/5", activeMediaIds: activeIds, sticky: desktop, stickyTop: 24, badges: badgeSlot, actions: desktop ? undefined : wishlist, isLoading: isLoading, "aria-label": product.title }));
     const primaryButton = (_jsx(Button, { size: controlSize, width: "100%", variant: notifyMode ? "outline" : "solid", label: primaryLabel, leftIcon: bag === "added" ? _jsx(Check, { size: 18, "aria-hidden": true }) : notifyMode ? _jsx(BellRing, { size: 18, "aria-hidden": true }) : undefined, isLoading: bag === "adding", onClick: notifyMode ? handleNotify : handleAdd, fontWeight: 600 }));
-    const buyPanel = isLoading ? (_jsxs(Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [_jsx(Skeletons, { type: "skeleton", height: "1rem", width: "30%" }), _jsx(Skeletons, { type: "skeleton", height: "2rem", width: "90%" }), _jsx(Skeletons, { type: "skeleton", height: "2.5rem", width: "45%" }), _jsx(Skeletons, { type: "skeleton", height: "3rem", width: "100%" }), _jsx(Skeletons, { type: "skeleton", height: "3rem", width: "100%" })] })) : (_jsxs(Flex, { direction: "column", gap: 6, children: [_jsxs(Flex, { direction: "column", gap: 2, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? (_jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : (_jsx("span", {})), onShare ? (_jsx(Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: transitionFor(["background-color"]), _hover: { bg: colors.background[100] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(Share2, { size: 20, "aria-hidden": true }) })) : null] }), _jsx(Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? (_jsx(Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...focusVisibleStyles(colors) }, children: _jsx(Rating, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? (_jsx(Rating, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), _jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(PriceBlock, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: packUnitPrice(product, selection, price), ...fmt }), state ? _jsx(StockStatus, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? _jsx(OffersList, { offers: offers, ...offersProps }) : null, axes.length > 0 ? (_jsx(Box, { ref: selectorRef, children: _jsx(VariantSelector, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, _jsxs(Flex, { direction: "column", gap: 3, ref: ctaRef, children: [_jsxs(Flex, { align: "center", gap: 3, children: [showStepper ? (_jsx(QuantityStepper, { size: controlSize, value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, _jsx(Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? _jsx(Button, { size: controlSize, width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? (_jsxs(Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [_jsx(CircleAlert, { size: 14, "aria-hidden": true }), _jsx(Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? _jsx(PincodeChecker, { ...pincode }) : null, trustItems && trustItems.length > 0 ? _jsx(TrustBadges, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
+    const buyPanel = isLoading ? (_jsxs(Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [_jsx(Skeletons, { type: "skeleton", height: "1rem", width: "30%" }), _jsx(Skeletons, { type: "skeleton", height: "2rem", width: "90%" }), _jsx(Skeletons, { type: "skeleton", height: "2.5rem", width: "45%" }), _jsx(Skeletons, { type: "skeleton", height: "3rem", width: "100%" }), _jsx(Skeletons, { type: "skeleton", height: "3rem", width: "100%" })] })) : (_jsxs(Flex, { direction: "column", gap: 6, children: [_jsxs(Flex, { direction: "column", gap: 2, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? (_jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : (_jsx("span", {})), onShare ? (_jsx(Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: transitionFor(["background-color"]), _hover: { bg: tonalHover(colors, colors.background[50], colors.background[100]) }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(Share2, { size: 20, "aria-hidden": true }) })) : null] }), _jsx(Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? (_jsx(Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...focusVisibleStyles(colors) }, children: _jsx(Rating, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? (_jsx(Rating, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), _jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(PriceBlock, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: packUnitPrice(product, selection, price), ...fmt }), state ? _jsx(StockStatus, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? _jsx(OffersList, { offers: offers, ...offersProps }) : null, axes.length > 0 ? (_jsx(Box, { ref: selectorRef, children: _jsx(VariantSelector, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, _jsxs(Flex, { direction: "column", gap: 3, ref: ctaRef, children: [_jsxs(Flex, { align: "center", gap: 3, children: [showStepper ? (_jsx(QuantityStepper, { size: controlSize, value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, _jsx(Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? _jsx(Button, { size: controlSize, width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? (_jsxs(Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [_jsx(CircleAlert, { size: 14, "aria-hidden": true }), _jsx(Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? _jsx(PincodeChecker, { ...pincode }) : null, trustItems && trustItems.length > 0 ? _jsx(TrustBadges, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
     return (_jsxs(Box, { ref: rootRef, "data-testid": testId, "data-layout": desktop ? "desktop" : "mobile", w: "100%", maxW: "82rem", mx: "auto", px: desktop ? 6 : 0, children: [_jsx(VisuallyHidden, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }), breadcrumbs ? _jsx(Box, { px: desktop ? 0 : gutter, py: 3, children: breadcrumbs }) : null, _jsxs(Flex, { direction: desktop ? "row" : "column", align: desktop ? "flex-start" : "stretch", gap: desktop ? 12 : 5, children: [_jsx(Box, { flex: desktop ? "1.63 1 0" : undefined, minW: 0, w: desktop ? undefined : "100%", children: gallery }), _jsx(Box, { flex: desktop ? "1 1 0" : undefined, minW: 0, px: desktop ? 0 : gutter, children: buyPanel })] }), !isLoading ? (_jsxs(Flex, { direction: "column", gap: sectionGap, mt: sectionGap, px: desktop ? 0 : gutter, children: [_jsx(DetailSections, { description: product.description, highlights: product.highlights, specs: product.specs, care: care, shipping: product.returnsNote, legal: hasLegal
                             ? {
                                 netQuantity: product.netQuantity,

package/dist/esm/Components/ProfileCard/ProfileCard.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { Card as ChakraCard, CardBody, CardFooter, CardHeader, Divider, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { warnDroppedSlotChildren } from "../Modal/warnDroppedSlotChildren.js";
+import { findSlot } from "../Common/findSlot.js";
 export const ProfileCardHeader = ({ children, }) => {
     return _jsx(_Fragment, { children: children });
 };
@@ -11,22 +12,9 @@ export const ProfileCardBody = ({ children, }) => {
 export const ProfileCardFooter = ({ 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 && <ProfileCardFooter>...</ProfileCardFooter>}</>` 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;
-};
+const SLOTS = [ProfileCardHeader, ProfileCardBody, ProfileCardFooter];
+const DROPPED_ADVICE = "Render it outside the card.";
+/** Card built from ProfileCardHeader, Body and Footer slots; other children are dropped. */
 export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "1px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
     var _a;
     const { colors } = useCustomTheme();
@@ -35,6 +23,7 @@ export default function ProfileCard({ maxW, align, variant, direction, justify,
     const header = findSlot(children, ProfileCardHeader);
     const body = findSlot(children, ProfileCardBody);
     const footer = findSlot(children, ProfileCardFooter);
+    warnDroppedSlotChildren("ProfileCard", children, SLOTS, DROPPED_ADVICE);
     const StylesWithBorder = borderLeftColor
         ? { ...CardStyle, borderLeft: accentBorder }
         : borderTopColor

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -6,6 +6,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { hexToRgb } from "../../Theme/tokens/builders/color.js";
 const RING_TRANSITION = transitionFor(["box-shadow"], "base");
@@ -46,6 +47,7 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     const isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
+    const viewHoverBg = bandOn(c.gray[50], c.background[50]);
     // NOTE: [800] not [300] — the edit IconButton's border is a control boundary, WCAG 1.4.11 needs >=3:1.
     const border = c.boxborder[500];
     const hoverScrim = (opacity) => {
@@ -82,8 +84,8 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
                                         bg: editFill.activeFill,
                                         color: editFill.activeColor,
                                     } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${BORDER_WIDTHS.hairline} solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: ACTION_TRANSITION, _hover: {
-                                        bg: c.gray[50],
-                                        color: accentTextOnCanvas(c.primary, c.gray[50]),
+                                        bg: viewHoverBg,
+                                        color: accentTextOnCanvas(c.primary, viewHoverBg),
                                         transform: "scale(1.1)",
                                         boxShadow: (_e = theme.shadows) === null || _e === void 0 ? void 0 : _e.lg,
                                     }, _active: { bg: c.gray[100] } }) }))] }), isEditable && (_jsx(Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))] }))] }));

package/dist/esm/Components/ProgressBar/ProgressBar.js

@@ -2,13 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Progress } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { scaleNamed } from "../../Theme/tokens/builders/paletteScale.js";
 // whiteAlpha/blackAlpha keep Chakra's own fill; contrast math can't resolve alpha scales.
 const NAMED_SCALES = new Set([
     "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
     "primary", "secondary",
 ]);
 const scaleFor = (colors, scheme) => NAMED_SCALES.has(scheme)
-    ? colors[scheme]
+    ? scaleNamed(colors, scheme)
     : undefined;
 /** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
 export default function ProgressBar({ colorScheme, color, variant, isIndeterminate, ...rest }) {

package/dist/esm/Components/QuantityStepper/QuantityStepper.js

@@ -6,8 +6,10 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
 const MIN_HIT = "2.75rem";
 const LIMIT_OPACITY = 0.4;
 const clamp = (n, min, max) => Math.max(min, max === undefined ? n : Math.min(max, n));
@@ -30,8 +32,9 @@ const QuantityStepper = ({ value, defaultValue, onValueChange, min = 1, max, ste
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
     };
     const surface = variant === "outline"
-        ? { bg: "transparent", boxShadow: `inset 0 0 0 1px ${colors.boxborder[500]}` }
+        ? { bg: "transparent", boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${colors.boxborder[500]}` }
         : { bg: colors.background[100], boxShadow: "none" };
+    const hoverFill = tonalHover(colors, variant === "outline" ? colors.background[50] : colors.background[100]);
     const button = (kind) => {
         const limited = kind === "dec" ? atMin && !trash : atMax;
         const Icon = kind === "inc" ? Plus : trash ? Trash2 : Minus;
@@ -43,7 +46,7 @@ const QuantityStepper = ({ value, defaultValue, onValueChange, min = 1, max, ste
                     onRemove === null || onRemove === void 0 ? void 0 : onRemove();
                 else
                     change(kind === "inc" ? 1 : -1);
-            }, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, boxSize: spec.height, borderRadius: "full", color: colors.header[900], opacity: limited || disabled ? LIMIT_OPACITY : 1, cursor: limited || disabled ? "not-allowed" : "pointer", transition: transitionFor(["background-color", "transform", "opacity"]), _hover: limited || disabled ? undefined : { bg: colors.background[200] }, _active: limited || disabled ? undefined : { transform: "scale(0.96)" }, sx: {
+            }, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, boxSize: spec.height, borderRadius: "full", color: colors.header[900], opacity: limited || disabled ? LIMIT_OPACITY : 1, cursor: limited || disabled ? "not-allowed" : "pointer", transition: transitionFor(["background-color", "transform", "opacity"]), _hover: limited || disabled ? undefined : { bg: hoverFill }, _active: limited || disabled ? undefined : { transform: "scale(0.96)" }, sx: {
                 ...focusVisibleStyles(colors),
                 ...reducedMotionSx({ "&:active": { transform: "none" } }),
                 "&::before": {

package/dist/esm/Components/QueryState/QueryStateBoundary.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Flex, VisuallyHidden } from "@chakra-ui/react";
 import { Lock } from "lucide-react";
 import EmptyState from "../EmptyState/EmptyState.js";
+import FilteredEmptyState from "../EmptyState/FilteredEmptyState.js";
 import Skeletons from "../Skeletons/Skeletons.js";
 import ErrorState from "./ErrorState.js";
 const DefaultLoading = () => (_jsxs(Flex, { role: "status", direction: "column", gap: 4, w: "100%", py: 2, children: [_jsx(VisuallyHidden, { children: "Loading" }), _jsx(Skeletons, { type: "skeleton", height: 4, width: "40%" }), Array.from({ length: 4 }, (_, i) => (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(Skeletons, { type: "skeleton", height: 2.5, width: "100%" }), _jsx(Skeletons, { type: "skeleton", height: 2.5, width: "70%" })] }, i)))] }));
 const hasError = (error) => error !== undefined && error !== null && error !== false;
 /** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
-const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden, hasData = false, error, isEmpty = false, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
+const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden, hasData = false, error, isEmpty = false, isFiltered = false, filteredEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
     var _a, _b, _c;
     if (isLoading && !hasData)
         return _jsx(_Fragment, { children: loadingFallback !== null && loadingFallback !== void 0 ? loadingFallback : _jsx(DefaultLoading, {}) });
@@ -19,6 +20,9 @@ const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden,
         const description = typeof errorDescription === "function" ? errorDescription(error) : errorDescription;
         return (_jsx(ErrorState, { title: errorTitle, description: description, onRetry: onRetry, isRetrying: isRetrying, minH: minH }));
     }
+    if (isEmpty && isFiltered) {
+        return (_jsx(FilteredEmptyState, { minH: (filteredEmpty === null || filteredEmpty === void 0 ? void 0 : filteredEmpty.scale) === "card" ? undefined : minH, ...filteredEmpty }));
+    }
     if (isEmpty)
         return _jsx(_Fragment, { children: emptyFallback !== null && emptyFallback !== void 0 ? emptyFallback : _jsx(EmptyState, { minH: minH, ...empty }) });
     return _jsx(_Fragment, { children: typeof children === "function" ? children() : children });

package/dist/esm/Components/RadioButton/RadioButton.js

@@ -8,12 +8,11 @@ import { useFieldIds } from "../Common/useFieldIds.js";
 import { fieldHoverBorder } from "../Common/fieldStyles.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { scaleFor } from "../../Theme/chakra/paletteFromTheme.js";
 /** One themed radio; `ref` is its native `<input type="radio">`. */
 const RadioButton = forwardRef(function RadioButton({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.875rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, ...rest }, ref) {
     const { colors } = useCustomTheme();
-    // colorScheme is any Chakra scheme name; only some resolve to a real scale.
-    const scales = colors;
-    const palette = (colorScheme && scales[colorScheme]) || colors.primary;
+    const palette = colorScheme ? scaleFor(colors, colorScheme, colors.primary) : colors.primary;
     const filled = resolveFilledSurface(palette, colors);
     return (_jsx(ChakraRadio, { ...rest, ref: ref, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: fieldHoverBorder(colors), borderWidth: "1px", _hover: {
             borderColor: filled.fill,