pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.51

package/dist/Components/PlanPill/planPillGradient.js

@@ -1,35 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chipBorder = exports.chipFill = exports.darkerStop = exports.statusGradient = exports.inkSafeGradient = exports.ACCENT_GRADIENT = exports.STATUS_INK = void 0;
+exports.chipBorder = exports.chipFill = exports.darkerStop = exports.statusGradient = exports.ACCENT_GRADIENT = exports.STATUS_INK = exports.inkSafeGradient = void 0;
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const color_1 = require("../../Theme/tokens/builders/color");
-exports.STATUS_INK = "#ffffff";
-/**
- * Opt-in accent for consumers who want a fixed badge colour instead of the brand `gradient`.
- * One hue, like every brand gradient — a second hue reads as a status change, not a style.
- */
+const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
+Object.defineProperty(exports, "inkSafeGradient", { enumerable: true, get: function () { return gradientInk_1.inkSafeGradient; } });
+/** @deprecated Use `colors.white` from `useCustomTheme()` directly. */
+exports.STATUS_INK = neutrals_1.neutralTokens.white;
 exports.ACCENT_GRADIENT = { from: "#8b3fc8", to: "#762d9d" };
-/**
- * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
- * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the
- * same badge reads white-on-colour in one brand and black-on-pastel in the next.
- */
-const inkSafeGradient = (gradient) => ({
-    from: (0, statusTone_1.resolveAvatarFill)(gradient.from),
-    to: (0, statusTone_1.resolveAvatarFill)(gradient.to),
-});
-exports.inkSafeGradient = inkSafeGradient;
-/** Status tones are semantic scales, not designed as label backdrops. */
-const statusGradient = (scale) => (0, exports.inkSafeGradient)({ from: scale[400], to: scale[600] });
+const statusGradient = (scale) => (0, gradientInk_1.inkSafeGradient)({ from: scale[400], to: scale[600] });
 exports.statusGradient = statusGradient;
 const CHIP_INK_CONTRAST = 7;
 const darkerStop = (g) => (0, color_1.relativeLuminance)(g.from) <= (0, color_1.relativeLuminance)(g.to) ? g.from : g.to;
 exports.darkerStop = darkerStop;
-/**
- * Solid inset chip in the pill's own hue. A translucent scrim was a guessed alpha that
- * composited into a muddy dark lozenge on every mid-tone gradient; a derived rung reads as
- * one step down from the pill in every brand and both modes.
- */
+// NOTE: derived rung, not a translucent scrim — a guessed alpha muddied every mid-tone gradient.
 const chipFill = (g) => (0, statusTone_1.resolveAvatarFill)((0, exports.darkerStop)(g), CHIP_INK_CONTRAST);
 exports.chipFill = chipFill;
 /** The pill's lighter stop — guaranteed lighter than `chipFill`, so it draws the inset edge. */

package/dist/Components/Primitives/Primitives.d.ts

@@ -0,0 +1,3 @@
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Badge, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+export { Table as TableRoot } from "@chakra-ui/react";
+export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, BadgeProps, IconProps, LinkProps, ImageProps, DividerProps, ContainerProps, IconButtonProps, FormControlProps, FormLabelProps, PopoverProps, ListProps, AlertProps, MenuProps, } from "@chakra-ui/react";

package/dist/Components/Primitives/Primitives.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tfoot = exports.Tbody = exports.Thead = exports.TableContainer = exports.IconButton = exports.FormHelperText = exports.FormErrorMessage = exports.FormLabel = exports.FormControl = exports.PopoverCloseButton = exports.PopoverArrow = exports.PopoverFooter = exports.PopoverHeader = exports.PopoverBody = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.UnorderedList = exports.OrderedList = exports.ListIcon = exports.ListItem = exports.List = exports.Hide = exports.Show = exports.Collapse = exports.Portal = exports.AlertDescription = exports.AlertTitle = exports.AlertIcon = exports.Alert = exports.Badge = exports.Icon = exports.Image = exports.Link = exports.Heading = exports.Text = exports.Divider = exports.Container = exports.Spacer = exports.Center = exports.WrapItem = exports.Wrap = exports.SimpleGrid = exports.GridItem = exports.Grid = exports.HStack = exports.VStack = exports.Stack = exports.Flex = exports.Box = void 0;
+exports.TableRoot = exports.useBreakpointValue = exports.useToken = exports.useMediaQuery = exports.useDisclosure = exports.extendTheme = exports.ChakraProvider = exports.MenuItemOption = exports.MenuOptionGroup = exports.MenuDivider = exports.MenuGroup = exports.MenuItem = exports.MenuList = exports.MenuButton = exports.Menu = exports.Td = exports.Th = exports.Tr = void 0;
+var react_1 = require("@chakra-ui/react");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return react_1.Box; } });
+Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return react_1.Flex; } });
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return react_1.Stack; } });
+Object.defineProperty(exports, "VStack", { enumerable: true, get: function () { return react_1.VStack; } });
+Object.defineProperty(exports, "HStack", { enumerable: true, get: function () { return react_1.HStack; } });
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return react_1.Grid; } });
+Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return react_1.GridItem; } });
+Object.defineProperty(exports, "SimpleGrid", { enumerable: true, get: function () { return react_1.SimpleGrid; } });
+Object.defineProperty(exports, "Wrap", { enumerable: true, get: function () { return react_1.Wrap; } });
+Object.defineProperty(exports, "WrapItem", { enumerable: true, get: function () { return react_1.WrapItem; } });
+Object.defineProperty(exports, "Center", { enumerable: true, get: function () { return react_1.Center; } });
+Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return react_1.Spacer; } });
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return react_1.Container; } });
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return react_1.Divider; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return react_1.Text; } });
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return react_1.Heading; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return react_1.Link; } });
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return react_1.Image; } });
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return react_1.Icon; } });
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return react_1.Badge; } });
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return react_1.Alert; } });
+Object.defineProperty(exports, "AlertIcon", { enumerable: true, get: function () { return react_1.AlertIcon; } });
+Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return react_1.AlertTitle; } });
+Object.defineProperty(exports, "AlertDescription", { enumerable: true, get: function () { return react_1.AlertDescription; } });
+Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return react_1.Portal; } });
+Object.defineProperty(exports, "Collapse", { enumerable: true, get: function () { return react_1.Collapse; } });
+Object.defineProperty(exports, "Show", { enumerable: true, get: function () { return react_1.Show; } });
+Object.defineProperty(exports, "Hide", { enumerable: true, get: function () { return react_1.Hide; } });
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return react_1.List; } });
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return react_1.ListItem; } });
+Object.defineProperty(exports, "ListIcon", { enumerable: true, get: function () { return react_1.ListIcon; } });
+Object.defineProperty(exports, "OrderedList", { enumerable: true, get: function () { return react_1.OrderedList; } });
+Object.defineProperty(exports, "UnorderedList", { enumerable: true, get: function () { return react_1.UnorderedList; } });
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return react_1.Popover; } });
+Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return react_1.PopoverTrigger; } });
+Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return react_1.PopoverContent; } });
+Object.defineProperty(exports, "PopoverBody", { enumerable: true, get: function () { return react_1.PopoverBody; } });
+Object.defineProperty(exports, "PopoverHeader", { enumerable: true, get: function () { return react_1.PopoverHeader; } });
+Object.defineProperty(exports, "PopoverFooter", { enumerable: true, get: function () { return react_1.PopoverFooter; } });
+Object.defineProperty(exports, "PopoverArrow", { enumerable: true, get: function () { return react_1.PopoverArrow; } });
+Object.defineProperty(exports, "PopoverCloseButton", { enumerable: true, get: function () { return react_1.PopoverCloseButton; } });
+Object.defineProperty(exports, "FormControl", { enumerable: true, get: function () { return react_1.FormControl; } });
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return react_1.FormLabel; } });
+Object.defineProperty(exports, "FormErrorMessage", { enumerable: true, get: function () { return react_1.FormErrorMessage; } });
+Object.defineProperty(exports, "FormHelperText", { enumerable: true, get: function () { return react_1.FormHelperText; } });
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return react_1.IconButton; } });
+Object.defineProperty(exports, "TableContainer", { enumerable: true, get: function () { return react_1.TableContainer; } });
+Object.defineProperty(exports, "Thead", { enumerable: true, get: function () { return react_1.Thead; } });
+Object.defineProperty(exports, "Tbody", { enumerable: true, get: function () { return react_1.Tbody; } });
+Object.defineProperty(exports, "Tfoot", { enumerable: true, get: function () { return react_1.Tfoot; } });
+Object.defineProperty(exports, "Tr", { enumerable: true, get: function () { return react_1.Tr; } });
+Object.defineProperty(exports, "Th", { enumerable: true, get: function () { return react_1.Th; } });
+Object.defineProperty(exports, "Td", { enumerable: true, get: function () { return react_1.Td; } });
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return react_1.Menu; } });
+Object.defineProperty(exports, "MenuButton", { enumerable: true, get: function () { return react_1.MenuButton; } });
+Object.defineProperty(exports, "MenuList", { enumerable: true, get: function () { return react_1.MenuList; } });
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return react_1.MenuItem; } });
+Object.defineProperty(exports, "MenuGroup", { enumerable: true, get: function () { return react_1.MenuGroup; } });
+Object.defineProperty(exports, "MenuDivider", { enumerable: true, get: function () { return react_1.MenuDivider; } });
+Object.defineProperty(exports, "MenuOptionGroup", { enumerable: true, get: function () { return react_1.MenuOptionGroup; } });
+Object.defineProperty(exports, "MenuItemOption", { enumerable: true, get: function () { return react_1.MenuItemOption; } });
+Object.defineProperty(exports, "ChakraProvider", { enumerable: true, get: function () { return react_1.ChakraProvider; } });
+Object.defineProperty(exports, "extendTheme", { enumerable: true, get: function () { return react_1.extendTheme; } });
+Object.defineProperty(exports, "useDisclosure", { enumerable: true, get: function () { return react_1.useDisclosure; } });
+Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return react_1.useMediaQuery; } });
+Object.defineProperty(exports, "useToken", { enumerable: true, get: function () { return react_1.useToken; } });
+Object.defineProperty(exports, "useBreakpointValue", { enumerable: true, get: function () { return react_1.useBreakpointValue; } });
+// Renamed: the library's own Table owns this name.
+var react_2 = require("@chakra-ui/react");
+Object.defineProperty(exports, "TableRoot", { enumerable: true, get: function () { return react_2.Table; } });

package/dist/Components/ProductCard/ProductCardProps.d.ts

@@ -1,12 +1,17 @@
+/** Card size; drives width, image height and padding via ProductCard's own sizeStyles map. */
 export type SizeType = "xs" | "sm" | "md" | "lg";
+/** Compact catalog/grid tile (image + price + cart actions) — for a full gallery/description page use ProductDetails instead. */
 export type ProductCardProps = {
     id: string | number;
     label: string;
+    /** Accepted by the type but never read by ProductCard — passing it has no effect. */
     description?: string;
     productImage: productImage[];
+    /** Renders nothing at all past 4 tags — ProductTags' row layout has no case for 5 or more. */
     tags?: string[];
     rating?: string | number;
     reviews?: string | number;
+    /** Non-empty when provided — `[]` crashes the price dropdown; selection won't refresh if this array is later replaced. */
     options?: options[];
     onClick?: () => void;
     button?: {
@@ -15,6 +20,7 @@ export type ProductCardProps = {
     };
     onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
     onNotifyMe?: (id: string | number, var_id: number) => void;
+    /** Also fires once on mount for the default (first) option, not only when the shopper picks a different one. */
     onOptionChange?: (option: options) => void;
     addToCart?: boolean;
     goToCart?: boolean;
@@ -22,10 +28,12 @@ export type ProductCardProps = {
     OnGoToCart?: () => void;
     batch?: batch;
     size?: SizeType;
+    /** Accepted by the type but never read anywhere in ProductCard — always a no-op regardless of value. */
     avalabilitys?: boolean;
     isQtyEditable?: boolean;
     displayRating?: boolean;
 };
+/** One purchase variant (weight/price/stock) shown in the price dropdown; var_id identifies it to cart callbacks. */
 export type options = {
     label: string;
     weight: number;
@@ -35,10 +43,12 @@ export type options = {
     var_id: number;
     stocks: number;
 };
+/** Corner ribbon badge on the product image (e.g. "Sale"); color defaults to green when unset. */
 export type batch = {
     label: string;
     color?: string;
 };
+/** One gallery image; the first two (after filtering isImage !== false) are the cover and hover-swap. */
 export type productImage = {
     imageUrl: string;
     imageId: number;

package/dist/Components/ProductCard/ProductPrice.js

@@ -10,6 +10,7 @@ const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/Ove
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
 const sizeConfig = {
     xs: {
         font: "xs",
@@ -96,20 +97,30 @@ const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
     (0, react_1.useEffect)(() => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
     }, [selected, onSelect]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSingleOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
-                // py={cfg.py}
-                rounded: "md", display: "inline-block", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
-                // py={cfg.py}
-                rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.font, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.red[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: "\u25BE" })] })), !isSingleOption && isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: dropdownRef, position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.red[300], borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSingleOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { border: "0.063rem solid", borderColor: theme.colors.primary[300], bg: theme.colors.primary[50], px: cfg.px, rounded: "lg", display: "inline-block", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: buttonRef, role: "button", tabIndex: 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setIsOpen((prev) => !prev);
+                    }
+                    else if (e.key === "Escape") {
+                        setIsOpen(false);
+                    }
+                }, border: "0.063rem solid", borderColor: theme.colors.primary[300], bg: theme.colors.primary[50], px: cfg.px, rounded: "lg", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { "aria-hidden": "true", fontSize: cfg.font, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: (0, motion_1.transitionFor)(["transform"]), children: "\u25BE" })] })), !isSingleOption && isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: dropdownRef, role: "listbox", position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.primary[300], borderRadius: "xl", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
                         const discounted = getDiscountedPrice(option);
                         const isSelected = selected.var_id === option.var_id;
-                        return ((0, jsx_runtime_1.jsxs)(react_2.Grid, { px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? theme.colors.red[50] : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? theme.colors.red[300] : "transparent", _hover: { bg: theme.colors.red[100] }, onClick: () => {
+                        return ((0, jsx_runtime_1.jsxs)(react_2.Grid, { role: "option", "aria-selected": isSelected, tabIndex: 0, px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? theme.colors.primary[50] : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? theme.colors.primary[300] : "transparent", _hover: { bg: theme.colors.primary[100] }, onClick: () => {
                                 setSelected(option);
                                 setIsOpen(false);
+                            }, onKeyDown: (e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    setSelected(option);
+                                    setIsOpen(false);
+                                }
                             }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
                             // columnGap={{ base: 2, md: 3 }}
                             // rowGap={{ base: 1.5, md: 2 }}
-                            alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [option.offer > 0 && ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: theme.colors.green[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.green, theme.colors.green[100]), borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? theme.colors.red[500] : theme.colors.boxborder[500], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.red[500], borderRadius: "full" })) })] }, option.var_id));
+                            alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [option.offer > 0 && ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: theme.colors.green[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.green, theme.colors.green[100]), borderRadius: "full", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "11px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.063rem solid", borderColor: isSelected ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.primary[500], borderRadius: "full" })) })] }, option.var_id));
                     }) }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: theme.colors.textMuted, textDecoration: "line-through", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
 };
 exports.default = ProductPrice;

package/dist/Components/ProductCard/ProductReview.d.ts

@@ -1,4 +1,5 @@
 type ProductReviewProps = {
+    /** Clamped 0-5, but the fill bar divides by 6 internally — a perfect 5 rating never fully fills the star. */
     rating?: string | number;
     reviewCount?: string | number;
     mb?: number;

package/dist/Components/ProductCard/ProductReview.js

@@ -5,12 +5,15 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const color_1 = require("../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
 // The theme's `yellow` scale reverses index roles in dark mode (like every utility hue), so
 // pulling it through the theme would silently flip this decorative "filled star" from gold to
 // pale. A rating star is a universal, brand-independent gold — not something that should follow
 // canvas/mode — so it's pinned here instead. Needs a design-token addition (a mode-stable
 // "rating gold") to pixelize-design-library if this pattern is needed elsewhere.
-const RATING_STAR_FILL = "#ECC94B";
+const RATING_STAR_FILL = neutrals_1.neutralTokens.yellow[500];
 const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hasRating = rating !== undefined && rating !== null;
@@ -19,6 +22,9 @@ const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
     // Calculate fill percentage: (rating / 5) * 100%
     const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
     const fillPercentage = (numericRating / 6) * 100;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), px: 2, borderRadius: "md", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: RATING_STAR_FILL, fill: RATING_STAR_FILL }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && (0, jsx_runtime_1.jsx)(react_1.Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
+    const chipBg = colors.teal[50];
+    const chipInk = (0, accentText_1.accentTextOnCanvas)(colors.teal, chipBg);
+    const starFill = (0, color_1.contrastRatio)(RATING_STAR_FILL, chipBg) >= outlineRung_1.AA_NON_TEXT ? RATING_STAR_FILL : chipInk;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, bg: chipBg, color: chipInk, px: 2, borderRadius: "full", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: starFill, fill: starFill }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && (0, jsx_runtime_1.jsx)(react_1.Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
 };
 exports.default = ProductReview;

package/dist/Components/ProductCard/ProductTags.js

@@ -25,8 +25,8 @@ const ProductTags = ({ tags, className, size = 'sm' }) => {
 };
 const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const tagBorder = colors.semanticText.error;
     const tagText = colors.text[900];
+    const tagBorder = colors.boxborder[500];
     // Size map for tags
     const tagSizes = {
         xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },

package/dist/Components/ProductDetails/ProductDetails.js

@@ -36,7 +36,7 @@ const ProductDetails = ({ id, price, label, shortdesc, tags, images, batch, onAd
     const handleDecrement = () => {
         setQty((prev) => (prev > 1 ? prev - 1 : 1));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", color: colors.text[500], borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem", children: (0, jsx_runtime_1.jsx)(ProductImageSlider_1.default, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", children: [label && (0, jsx_runtime_1.jsx)(ProductLabel_1.default, { label: label, size: "sm" }), shortdesc && (0, jsx_runtime_1.jsx)(react_2.Box, { my: 3, children: (0, jsx_runtime_1.jsx)(FormattedDescription_1.default, { content: shortdesc }) }), ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && ((0, jsx_runtime_1.jsx)(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })), tags && (0, jsx_runtime_1.jsx)(ProductTags_1.default, { tags: tags, size: "sm" }), price && ((0, jsx_runtime_1.jsx)(ProductDtlPrice_1.default, { price: price, onSelect: (option) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", color: colors.text[500], borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem", children: (0, jsx_runtime_1.jsx)(ProductImageSlider_1.default, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch, productName: label }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", children: [label && (0, jsx_runtime_1.jsx)(ProductLabel_1.default, { label: label, size: "sm" }), shortdesc && (0, jsx_runtime_1.jsx)(react_2.Box, { my: 3, children: (0, jsx_runtime_1.jsx)(FormattedDescription_1.default, { content: shortdesc }) }), ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && ((0, jsx_runtime_1.jsx)(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })), tags && (0, jsx_runtime_1.jsx)(ProductTags_1.default, { tags: tags, size: "sm" }), price && ((0, jsx_runtime_1.jsx)(ProductDtlPrice_1.default, { price: price, onSelect: (option) => {
                             setSelectedOption(option);
                             onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
                         } })), typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : 0) <= 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" }, children: (0, jsx_runtime_1.jsx)(Button_1.default, { colorScheme: "gray", size: "sm", 

package/dist/Components/ProductDetails/ProductDetailsProps.d.ts

@@ -1,9 +1,13 @@
 import { batch, options } from "../ProductCard/ProductCardProps";
+/** Full two-column product detail page (gallery + description + variant picker) — not a card; no size prop or container chrome. */
 export type ProductDetailsProps = {
     id: string | number;
+    /** Actually the weight/price variant list (same shape as ProductCard's `options`), not a number — must be non-empty. */
     price?: options[];
     label?: string;
+    /** Rendered through a mini-markdown parser (**bold**, *italic*, # heading) — literal asterisks aren't shown as-is. */
     shortdesc?: string;
+    /** Renders nothing at all past 4 tags — ProductTags' row layout has no case for 5 or more. */
     tags?: string[];
     images?: images[];
     batch?: batch;
@@ -11,6 +15,7 @@ export type ProductDetailsProps = {
     reviews?: string | number;
     onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
     onNotifyMe?: (id: string | number, var_id: number) => void;
+    /** Also fires once on mount for the default (first) option, not only when the shopper picks a different one. */
     onOptionChange?: (option: options) => void;
     addToCart?: boolean;
     goToCart?: boolean;
@@ -19,6 +24,7 @@ export type ProductDetailsProps = {
     isQtyEditable?: boolean;
     displayRating?: boolean;
 };
+/** Gallery item — isImage=false (or a non-image URL when omitted) renders as video with thumb as the poster; order is accepted but never used to sort. */
 export type images = {
     imageUrl: string;
     imageId: number;
@@ -26,6 +32,7 @@ export type images = {
     isImage?: boolean;
     thumb?: string;
 };
+/** Declared but unused — ProductImageSlider only accepts `images[]` (isImage/thumb cover video items); nothing currently consumes this type. */
 export type videos = {
     videoUrl: string;
     videoId: number;

package/dist/Components/ProductDetails/ProductDtlPrice.js

@@ -5,20 +5,20 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const tone_1 = require("../../Theme/tokens/builders/tone");
 const ProductDtlPrice = ({ price, onSelect }) => {
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
     const selected = price[selectedIndex];
     const discounted = Math.round(selected.price - (selected.price * selected.offer) / 100);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const saveTone = (0, tone_1.resolveSoftTone)(theme.colors, theme.colors.semantic.success);
     (0, react_1.useEffect)(() => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
     }, [selected, onSelect]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, p: 4, borderRadius: "md", w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "lg", color: theme.colors.textMuted, as: "s", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xl", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "bold", children: ["\u20B9", discounted] }), selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5, children: ["SAVE ", selected.offer, "%"] }))] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, children: "(Incl. of all taxes)" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1, children: ["Packs : ", selected.label] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: price.map((pack, idx) => ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", borderColor: idx === selectedIndex ? theme.colors.orange[400] : theme.colors.orange[200], bg: idx === selectedIndex ? theme.colors.orange[50] : theme.colors.background[50], 
-                            // orange.600 fails AA against both possible bg states — walk the scale per canvas
-                            color: (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, idx === selectedIndex ? theme.colors.orange[50] : theme.colors.background[50]), borderRadius: "md", fontWeight: "medium", _hover: {
-                                bg: theme.colors.orange[100],
+    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, p: 4, borderRadius: "lg", w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "lg", color: theme.colors.textMuted, as: "s", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xl", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "bold", children: ["\u20B9", discounted] }), selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { bg: saveTone.bg, color: saveTone.fg, fontSize: "xs", borderRadius: "full", px: 2, py: 0.5, children: ["SAVE ", selected.offer, "%"] }))] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, children: "(Incl. of all taxes)" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1, children: ["Packs : ", selected.label] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: price.map((pack, idx) => ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", borderColor: idx === selectedIndex ? theme.colors.primary[400] : theme.colors.primary[200], bg: idx === selectedIndex ? theme.colors.primary[50] : theme.colors.background[50], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, idx === selectedIndex ? theme.colors.primary[50] : theme.colors.background[50]), borderRadius: "lg", fontWeight: "medium", _hover: {
+                                bg: theme.colors.primary[100],
                             }, _active: {
-                                bg: theme.colors.orange[100],
+                                bg: theme.colors.primary[100],
                             }, onClick: () => setSelectedIndex(idx), children: pack.label }, pack.var_id))) })] })] }));
 };
 exports.default = ProductDtlPrice;

package/dist/Components/ProductDetails/ProductImageSlider.d.ts

@@ -6,6 +6,8 @@ interface ProductImageSliderProps {
     imageSize?: number;
     thumbnailsToShow?: number;
     batch?: batch;
+    /** Used to build each image's alt text ("<name>, image 2 of 5"); falls back to "Product". */
+    productName?: string;
 }
-export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, }: ProductImageSliderProps): import("react/jsx-runtime").JSX.Element;
+export default function ProductImageSlider({ images, thumbHeight, imageSize, thumbnailsToShow, batch, productName, }: ProductImageSliderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Components/ProductDetails/ProductImageSlider.js

@@ -39,7 +39,10 @@ const react_1 = require("@chakra-ui/react");
 const react_2 = __importStar(require("react"));
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, }) {
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, productName = "Product", }) {
     const [activeIndex, setActiveIndex] = (0, react_2.useState)(0);
     const [thumbStartIndex, setThumbStartIndex] = (0, react_2.useState)(0);
     const [transformOrigin, setTransformOrigin] = (0, react_2.useState)("center center");
@@ -47,6 +50,8 @@ function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbna
     const [isPlaying, setIsPlaying] = (0, react_2.useState)(false);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
+    // Opaque enough that white ink clears 4.5:1/3:1 against it on any photo, not just this one.
+    const controlScrim = (0, scrim_1.overlayScrim)(theme.colors);
     const getYouTubeId = (url) => {
         const patterns = [
             /youtu\.be\/([A-Za-z0-9_-]{6,})/i,
@@ -105,6 +110,7 @@ function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbna
     }, [activeIndex]);
     const totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
     const hasMultiple = totalThumbs > 1;
+    const altFor = (index) => `${productName}, image ${index + 1} of ${totalThumbs}`;
     const visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
     const canScrollUp = thumbStartIndex > 0;
     const canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
@@ -136,7 +142,7 @@ function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbna
     };
     return ((0, jsx_runtime_1.jsx)(react_1.Flex, { maxW: "6xl", mx: "auto", gap: 4, direction: isMobile ? "column" : "row", children: isMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { w: "full", 
                     // h={`${imageSize}px`}
-                    position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: (e) => {
+                    position: "relative", overflow: "hidden", borderRadius: "lg", boxShadow: "md", onMouseMove: (e) => {
                         if (isMobile)
                             return;
                         const bounds = e.currentTarget.getBoundingClientRect();
@@ -156,38 +162,43 @@ function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbna
                             const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
                             if (isVideo) {
                                 if (!isPlaying) {
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": "Play video", onClick: () => setIsPlaying(true), onKeyDown: (e) => {
+                                                        if (e.key === "Enter" || e.key === " ") {
+                                                            e.preventDefault();
+                                                            setIsPlaying(true);
+                                                        }
+                                                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) })] }));
                                 }
                                 return yt ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
                             }
-                            return ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
-                        })(), hasMultiple && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: () => {
+                            return ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, alt: altFor(activeIndex), w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
+                        })(), hasMultiple && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.white }), "aria-label": "Previous", onClick: () => {
                                         var _a;
                                         const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
                                         const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
                                         updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
+                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.white }), "aria-label": "Next", onClick: () => {
                                         var _a;
                                         const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
                                         const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
                                         updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] }), hasMultiple && ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Left", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
+                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } })] }))] }), hasMultiple && ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Left", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
                             const actualIndex = thumbStartIndex + index;
                             const url = src.imageUrl;
                             const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
                             const thumb = src.thumb || getThumbForItem(url);
-                            return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                    ? `0.125rem solid ${theme.colors.gray[500]}`
-                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
-                        }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasMultiple && ((0, jsx_runtime_1.jsxs)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), (0, jsx_runtime_1.jsx)(react_1.VStack, { spacing: 2, flex: "1", overflow: "hidden", children: visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
+                            return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "lg", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
+                                    ? `0.063rem solid ${theme.colors.primary[500]}`
+                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: (0, motion_1.transitionFor)(["background-color", "transform"], "base"), position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.backgroundColor.subtle, children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, alt: altFor(actualIndex), w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
+                        }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasMultiple && ((0, jsx_runtime_1.jsxs)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), (0, jsx_runtime_1.jsx)(react_1.VStack, { spacing: 2, flex: "1", overflow: "hidden", children: visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
                                 const actualIndex = thumbStartIndex + index;
                                 const url = src.imageUrl;
                                 const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
                                 const thumb = src.thumb || getThumbForItem(url);
-                                return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                        ? `0.125rem solid ${theme.colors.gray[500]}`
-                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: theme.colors.red[500] }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` })) }, actualIndex));
-                            }) }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), (0, jsx_runtime_1.jsxs)(react_1.Box, { w: `${imageSize}px`, h: `${imageSize}px`, position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: (e) => {
+                                return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "lg", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
+                                        ? `0.063rem solid ${theme.colors.primary[500]}`
+                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: (0, motion_1.transitionFor)(["background-color", "transform"], "base"), position: "relative", children: isVideo ? (thumb ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: "Video thumbnail" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.backgroundColor.subtle, children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 14, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) }))) : ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: altFor(actualIndex) })) }, actualIndex));
+                            }) }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), (0, jsx_runtime_1.jsxs)(react_1.Box, { w: `${imageSize}px`, h: `${imageSize}px`, position: "relative", overflow: "hidden", borderRadius: "lg", boxShadow: "md", onMouseMove: (e) => {
                         const bounds = e.currentTarget.getBoundingClientRect();
                         const x = ((e.clientX - bounds.left) / bounds.width) * 100;
                         const y = ((e.clientY - bounds.top) / bounds.height) * 100;
@@ -205,20 +216,25 @@ function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbna
                             const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
                             if (isVideo) {
                                 if (!isPlaying) {
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: thumb || url, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": "Play video", onClick: () => setIsPlaying(true), onKeyDown: (e) => {
+                                                        if (e.key === "Enter" || e.key === " ") {
+                                                            e.preventDefault();
+                                                            setIsPlaying(true);
+                                                        }
+                                                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 24, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[50]) }) }) })] }));
                                 }
                                 return yt ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? ((0, jsx_runtime_1.jsx)(react_1.AspectRatio, { ratio: 16 / 9, w: "100%", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
                             }
-                            return ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }));
-                        })(), hasMultiple && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: () => {
+                            return ((0, jsx_runtime_1.jsx)(react_1.Image, { src: url, alt: altFor(activeIndex), w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }));
+                        })(), hasMultiple && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 20, color: theme.colors.white }), "aria-label": "Previous", onClick: () => {
                                         var _a;
                                         const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
                                         const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
                                         updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
+                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, color: theme.colors.white }), "aria-label": "Next", onClick: () => {
                                         var _a;
                                         const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
                                         const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
                                         updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] })] })) }));
+                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } })] }))] })] })) }));
 }

package/dist/Components/ProfileCard/ProfileCard.d.ts

@@ -1,12 +1,6 @@
 import React from "react";
-import { ProfileCardProps } from "./ProfileCardProps";
-export declare const ProfileCardHeader: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const ProfileCardBody: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const ProfileCardFooter: React.FC<{
-    children: React.ReactNode;
-}>;
+import { ProfileCardProps, ProfileCardHeaderSlotProps, ProfileCardBodySlotProps, ProfileCardFooterSlotProps } from "./ProfileCardProps";
+export declare const ProfileCardHeader: React.FC<ProfileCardHeaderSlotProps>;
+export declare const ProfileCardBody: React.FC<ProfileCardBodySlotProps>;
+export declare const ProfileCardFooter: React.FC<ProfileCardFooterSlotProps>;
 export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;