pixelize-design-library 2.4.2-beta.56 → 2.4.2-beta.57

package/dist/Components/StockStatus/StockStatusProps.d.ts

@@ -0,0 +1,14 @@
+import type { StockState } from "../Commerce/commerceTypes";
+/** Text size; the dot scales with it. */
+export type StockStatusSize = "sm" | "md";
+/** Availability as a dot plus words, never colour alone. */
+export interface StockStatusProps {
+    /** Availability: in-stock and low-stock read as success and warning, backorder as info, out-of-stock as muted. */
+    status: StockState;
+    /** Units left; shown as "Only 3 left" for low-stock only, ignored for every other state. */
+    count?: number;
+    /** Replaces the default words, e.g. "In stock · ships within 24 hours". */
+    message?: string;
+    size?: StockStatusSize;
+    "data-testid"?: string;
+}

package/dist/Components/StockStatus/StockStatusProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Table/Table.js

@@ -25,6 +25,7 @@ const rowMetrics_1 = require("./components/rowMetrics");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const scrollShadow_1 = require("../../Theme/tokens/builders/scrollShadow");
 const useTable_1 = __importDefault(require("./hooks/useTable"));
+const columnLabel_1 = require("./columnLabel");
 const table_1 = require("../../Utils/table");
 const usePreferences_1 = require("../../Hooks/usePreferences");
 const TableSettings_1 = __importDefault(require("./settings/TableSettings"));
@@ -171,7 +172,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
     }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.groupBy]);
     const handleDensityChange = (d) => {
         setDensityState(d);
-        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences({ ...tablePreferences, columns: columnsList, groupBy: groupByState !== null && groupByState !== void 0 ? groupByState : null, density: d });
+        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences({ ...tablePreferences, columns: (0, columnLabel_1.toSavedColumns)(columnsList), groupBy: groupByState !== null && groupByState !== void 0 ? groupByState : null, density: d });
     };
     // Settings "Save": persist columns + group (+ current density) in ONE write so
     // they don't clobber each other, and apply them locally.

package/dist/Components/Table/TableProps.d.ts

@@ -62,7 +62,7 @@ export type TableProps = {
     isPagination?: boolean;
     /** Controlled selected row ids; a new array replaces the internal selection. */
     selections?: (string | number)[];
-    /** Fires per cell, gated on the column: a column with `node` swallows its clicks. */
+    /** Fires per cell, gated on the column: a column with `node` swallows its clicks. A node `label` arrives as its plain text. */
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
     /** Sticky-positions the trailing action/link column during horizontal scroll. Defaults true. */
     isActionFreeze?: boolean;
@@ -169,7 +169,10 @@ export type HeaderActionsProps = {
 };
 /** Column definition: label, sort/search/freeze flags, and optional status or custom cell renderer. */
 export type TableHeaderProps = {
-    label: string | number;
+    /** Header content. A node (icon, tooltip trigger) renders as-is but is clipped, not ellipsized, when too wide. */
+    label: string | number | ReactNode;
+    /** Plain-text name for a node `label` — used by the sort/filter button names, Manage Columns, Group, filter chips and saved preferences. Ignored for a string/number label. Omitted: the node's text children, else `id`. */
+    labelText?: string;
     id: string | number;
     /** Enables the multi-column sort control; sorts client-side only — server mode never reorders rows. */
     isSort?: boolean;

package/dist/Components/Table/columnLabel.d.ts

@@ -0,0 +1,6 @@
+import type { TableHeaderProps } from "./TableProps";
+export declare const isPrimitiveLabel: (label: unknown) => label is string | number;
+/** Plain-text name of a column, for every place a node cannot go: aria-labels, settings, chips, saved preferences. */
+export declare const columnLabelText: (column: Pick<TableHeaderProps, "id" | "label" | "labelText">) => string;
+/** Columns as they may be POSTed: a node label is swapped for its text, since elements are not JSON. */
+export declare const toSavedColumns: (columns: TableHeaderProps[]) => TableHeaderProps[];

package/dist/Components/Table/columnLabel.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toSavedColumns = exports.columnLabelText = exports.isPrimitiveLabel = void 0;
+const react_1 = require("react");
+const isPrimitiveLabel = (label) => typeof label === "string" || typeof label === "number";
+exports.isPrimitiveLabel = isPrimitiveLabel;
+const textOf = (node) => {
+    if ((0, exports.isPrimitiveLabel)(node))
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(textOf).join("");
+    if ((0, react_1.isValidElement)(node))
+        return textOf(node.props.children);
+    return "";
+};
+/** Plain-text name of a column, for every place a node cannot go: aria-labels, settings, chips, saved preferences. */
+const columnLabelText = (column) => {
+    if ((0, exports.isPrimitiveLabel)(column.label))
+        return String(column.label);
+    if (column.labelText)
+        return column.labelText;
+    return textOf(column.label).replace(/\s+/g, " ").trim() || String(column.id);
+};
+exports.columnLabelText = columnLabelText;
+/** Columns as they may be POSTed: a node label is swapped for its text, since elements are not JSON. */
+const toSavedColumns = (columns) => columns.map((column) => (0, exports.isPrimitiveLabel)(column.label) ? column : { ...column, label: (0, exports.columnLabelText)(column) });
+exports.toSavedColumns = toSavedColumns;

package/dist/Components/Table/components/TableBody.js

@@ -51,6 +51,7 @@ const TableVariantContext_1 = require("../variants/TableVariantContext");
 const pillInk_1 = require("../variants/pillInk");
 const EmptyState_1 = __importDefault(require("../../EmptyState/EmptyState"));
 const rowMetrics_1 = require("./rowMetrics");
+const columnLabel_1 = require("../columnLabel");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../../Theme/chakra/motion");
 const getRowId = (row) => row.id;
@@ -120,7 +121,10 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
     }, [onMeasure, isExpanded, hasContent, row]);
     const handleCellClick = (0, react_2.useCallback)((header) => {
         if (!header.node && onRowClick) {
-            onRowClick(row, { label: header.label, id: header.id });
+            onRowClick(row, {
+                label: (0, columnLabel_1.isPrimitiveLabel)(header.label) ? header.label : (0, columnLabel_1.columnLabelText)(header),
+                id: header.id,
+            });
         }
     }, [row, onRowClick]);
     const variant = (0, TableVariantContext_1.useTableVariant)();

package/dist/Components/Table/components/TableHeader.js

@@ -10,6 +10,7 @@ const table_1 = require("../../../Utils/table");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const TableFilters_1 = __importDefault(require("../filters/TableFilters"));
+const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const TableVariantContext_1 = require("../variants/TableVariantContext");
@@ -22,7 +23,7 @@ const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths
     return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
-                return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, header.label));
+                return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, (0, columnLabel_1.columnLabelText)(header)));
             }), isLink && (0, jsx_runtime_1.jsx)(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
 };
 exports.default = (0, react_2.memo)(TableHeader);
@@ -96,7 +97,7 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, slotWidth
         !!columnsSearch[header.id];
     return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textAlign: align, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffset}px` : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: align === "end" ? undefined : 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
             ? "none"
-            : `0.063rem solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: LABEL_JUSTIFY[align], flexDirection: align === "end" ? "row-reverse" : "row", gap: align === "end" ? 1 : undefined, alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), _focusWithin: { opacity: 1 }, children: [header.isSort && ((0, jsx_runtime_1.jsx)(SortingIcon, { label: String(header.label), sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
+            : `0.063rem solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: LABEL_JUSTIFY[align], flexDirection: align === "end" ? "row-reverse" : "row", gap: align === "end" ? 1 : undefined, alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), _focusWithin: { opacity: 1 }, children: [header.isSort && ((0, jsx_runtime_1.jsx)(SortingIcon, { label: (0, columnLabel_1.columnLabelText)(header), sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
                                 let direction = "asc";
                                 if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
                                     direction = "desc";

package/dist/Components/Table/filters/ActiveFilters.js

@@ -45,6 +45,7 @@ const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const tone_1 = require("../../../Theme/tokens/builders/tone");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const columnLabel_1 = require("../columnLabel");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
 const ActiveFilters = react_1.default.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -52,7 +53,7 @@ const ActiveFilters = react_1.default.memo(({ columns, columnsSearch, setColumns
     const columnLabelMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         for (const col of columns) {
-            map.set(col.id, col.label);
+            map.set(col.id, (0, columnLabel_1.columnLabelText)(col));
         }
         return map;
     }, [columns]);

package/dist/Components/Table/filters/TableFilters.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
+const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
 const TableFilters = (0, react_1.memo)(({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }) => {
     const theme = (0, react_2.useTheme)();
@@ -38,7 +39,7 @@ const TableFilters = (0, react_1.memo)(({ header, setColumnsSearch, columnsSearc
         setRefreshDataOnOpen((prev) => !prev);
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Filter ${header.label}`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { flex: "1", size: "xs", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.textMuted, boxSize: 4 }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { autoFocus: true, placeholder: `Search ${header.label}...`, size: "xs", ref: searchRef, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Filter ${(0, columnLabel_1.columnLabelText)(header)}`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { flex: "1", size: "xs", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.textMuted, boxSize: 4 }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { autoFocus: true, placeholder: `Search ${(0, columnLabel_1.columnLabelText)(header)}...`, size: "xs", ref: searchRef, onChange: (e) => {
                                         e.stopPropagation();
                                         debouncedSearch(e.target.value);
                                     }, onFocus: (e) => e.stopPropagation() })] }) }) }) })] }));

package/dist/Components/Table/hooks/useTable.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_PAGE_SIZE = void 0;
 const react_1 = require("react");
 const table_1 = require("../../../Utils/table");
+const columnLabel_1 = require("../columnLabel");
 exports.DEFAULT_PAGE_SIZE = 20;
 const defaultPageSize = exports.DEFAULT_PAGE_SIZE;
 const mergeColumnWithPreference = (pref, originalCol) => {
@@ -13,7 +14,7 @@ const mergeColumnWithPreference = (pref, originalCol) => {
     const next = { ...originalCol };
     next.isHidden =
         typeof pref.isHidden === "boolean" ? pref.isHidden : (_a = originalCol === null || originalCol === void 0 ? void 0 : originalCol.isHidden) !== null && _a !== void 0 ? _a : false;
-    if (typeof pref.label === "string" || typeof pref.label === "number") {
+    if ((0, columnLabel_1.isPrimitiveLabel)(pref.label) && (0, columnLabel_1.isPrimitiveLabel)(originalCol === null || originalCol === void 0 ? void 0 : originalCol.label)) {
         next.label = pref.label;
     }
     return next;
@@ -220,7 +221,7 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
         if (savePreferences) {
             savePreferences({
                 ...tablePreferences,
-                columns: columns,
+                columns: (0, columnLabel_1.toSavedColumns)(columns),
                 ...extra,
             });
         }

package/dist/Components/Table/settings/ManageColumns.js

@@ -11,6 +11,7 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
@@ -66,7 +67,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
         setItems(newItems);
         setError(null);
     };
-    const filteredItems = items.filter((item) => item.label.toString().toLowerCase().includes(searchTerm.toLowerCase()));
+    const filteredItems = items.filter((item) => (0, columnLabel_1.columnLabelText)(item).toLowerCase().includes(searchTerm.toLowerCase()));
     const allChecked = items.every((item) => !item.isHidden);
     const someChecked = items.some((item) => !item.isHidden) && !allChecked;
     const handleSelectAll = () => {
@@ -92,9 +93,9 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                             : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: {
                             bg: rowBackgrounds.active,
                             borderColor: theme.colors.boxborder[200],
-                        }, _active: { cursor: "grabbing" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                        }, _active: { cursor: "grabbing" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: (0, columnLabel_1.columnLabelText)(item), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
                                     color: item.isHidden ? theme.colors.textMuted : theme.colors.text[700],
-                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} up`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} down`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${(0, columnLabel_1.columnLabelText)(item)} up`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${(0, columnLabel_1.columnLabelText)(item)} down`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
                 })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 exports.default = ManageColumns;

package/dist/Components/Table/settings/TableSettings.js

@@ -11,6 +11,7 @@ const ManageColumns_1 = __importDefault(require("./ManageColumns"));
 const Button_1 = __importDefault(require("../../Button/Button"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
@@ -72,7 +73,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 // Only columns that declare a `columnType` are groupable.
                                                                 ...columns
                                                                     .filter((c) => !!c.columnType && !c.isHidden)
-                                                                    .map((c) => ({ id: c.id, label: String(c.label) }))]
+                                                                    .map((c) => ({ id: c.id, label: (0, columnLabel_1.columnLabelText)(c) }))]
                                                                 .map((opt) => {
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;

package/dist/Components/TrustBadges/TrustBadges.d.ts

@@ -0,0 +1,4 @@
+import type { TrustBadgesProps } from "./TrustBadgesProps";
+/** Reassurance items (returns, COD, authenticity, secure payments) on calm tonal tiles; the title always carries the meaning. */
+declare const TrustBadges: ({ items, layout, "aria-label": ariaLabel, "data-testid": testId }: TrustBadgesProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TrustBadges;

package/dist/Components/TrustBadges/TrustBadges.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const DEFAULT_LABEL = "Why shop with us";
+const LIST_STYLES = {
+    row: { display: "flex", flexWrap: "wrap" },
+    grid: { display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))" },
+    stack: { display: "flex", flexDirection: "column" },
+};
+/** Reassurance items (returns, COD, authenticity, secure payments) on calm tonal tiles; the title always carries the meaning. */
+const TrustBadges = ({ items, layout = "row", "aria-label": ariaLabel = DEFAULT_LABEL, "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (items.length === 0)
+        return null;
+    const stacked = layout === "stack";
+    const tile = (item) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", align: stacked ? "center" : "flex-start", gap: 3, p: 3, minH: "2.75rem", borderRadius: "xl", bg: colors.background[100], flex: layout === "row" ? "1 1 9.5rem" : undefined, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", "aria-hidden": true, flexShrink: 0, align: "center", justify: "center", boxSize: "2.25rem", borderRadius: "full", bg: colors.background[50], color: colors.accentText, sx: { "& svg": { width: "1.125rem", height: "1.125rem" } }, children: item.icon }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, lineHeight: 1.35, color: colors.header[900], children: item.title }), item.detail ? ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: 0.5, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: item.detail })) : null] })] }, (_a = item.id) !== null && _a !== void 0 ? _a : item.title));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "ul", "aria-label": ariaLabel, "data-layout": layout, "data-testid": testId, listStyleType: "none", m: 0, p: 0, gap: 2, sx: LIST_STYLES[layout], children: items.map(tile) }));
+};
+exports.default = TrustBadges;

package/dist/Components/TrustBadges/TrustBadgesProps.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+/** One reassurance, e.g. "7-day easy returns". */
+export interface TrustItem {
+    /** Stable key; falls back to the title. */
+    id?: string;
+    /** A lucide icon element; decorative, so the title always carries the meaning. */
+    icon: ReactNode;
+    title: string;
+    detail?: string;
+}
+/** `row` is a wrapping horizontal strip, `grid` an even two-column grid, `stack` a vertical list. */
+export type TrustBadgesLayout = "row" | "grid" | "stack";
+/** Reassurance items (returns, COD, authenticity, secure payments) on a tonal tile. */
+export interface TrustBadgesProps {
+    items: TrustItem[];
+    layout?: TrustBadgesLayout;
+    /** Accessible name of the list. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/TrustBadges/TrustBadgesProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/VariantSelector/VariantSelector.d.ts

@@ -0,0 +1,4 @@
+import type { VariantSelectorProps } from "./VariantSelectorProps";
+/** Per-axis radiogroups whose availability is derived from `variants`; no vertical-specific vocabulary lives here. */
+declare const VariantSelector: ({ axes, variants, value, defaultValue, onValueChange, error, showSelectedLabel, showLowStock, size, layout, onGuideClick, "data-testid": testId, }: VariantSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export default VariantSelector;

package/dist/Components/VariantSelector/VariantSelector.js

@@ -0,0 +1,123 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const OptionChip_1 = __importDefault(require("../OptionChip/OptionChip"));
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+const variantSelection_1 = require("./variantSelection");
+const GAP = "0.5rem";
+const GRID_MIN = {
+    chip: "4rem",
+    swatch: "3rem",
+    "image-tile": "4.75rem",
+    pack: "6.5rem",
+};
+const cellKey = (axisId, valueId) => `${axisId}\u0000${valueId}`;
+/** Per-axis radiogroups whose availability is derived from `variants`; no vertical-specific vocabulary lives here. */
+const VariantSelector = ({ axes, variants, value, defaultValue, onValueChange, error, showSelectedLabel = false, showLowStock = false, size = "md", layout = "wrap", onGuideClick, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const statusId = `${uid}-status`;
+    const cells = (0, react_1.useRef)(new Map());
+    const [inner, setInner] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {});
+    const [focus, setFocus] = (0, react_1.useState)(null);
+    const selection = value !== null && value !== void 0 ? value : inner;
+    const commit = (0, react_1.useCallback)((next) => {
+        if ((0, variantSelection_1.sameSelection)(next, selection))
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next, (0, commerceVariants_1.findVariant)(axes, variants, next));
+    }, [axes, variants, selection, value, onValueChange]);
+    const choose = (axisId, valueId) => {
+        if ((0, variantSelection_1.isSoldOutEverywhere)(variants, axisId, valueId))
+            return;
+        commit((0, variantSelection_1.selectValue)(axes, variants, selection, axisId, valueId));
+    };
+    const lowStockHint = (axis, option) => {
+        if (!showLowStock)
+            return undefined;
+        const left = (0, commerceVariants_1.remainingStock)(variants, selection, axis.id, option.id);
+        if (left === undefined || left <= 0 || left > commerceVariants_1.LOW_STOCK_THRESHOLD)
+            return undefined;
+        return `${left} left`;
+    };
+    const hintFor = (axis, option) => {
+        const low = lowStockHint(axis, option);
+        if (!low)
+            return option.hint;
+        return axis.type === "pack" && option.hint ? `${option.hint} · ${low}` : low;
+    };
+    const onKeyDown = (axis) => (event) => {
+        var _a;
+        const index = axis.values.findIndex((option) => cells.current.get(cellKey(axis.id, option.id)) === document.activeElement);
+        if (index < 0)
+            return;
+        const last = axis.values.length - 1;
+        const target = event.key === "ArrowRight" || event.key === "ArrowDown"
+            ? (index + 1) % axis.values.length
+            : event.key === "ArrowLeft" || event.key === "ArrowUp"
+                ? (index - 1 + axis.values.length) % axis.values.length
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? last
+                        : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        const next = axis.values[target];
+        (_a = cells.current.get(cellKey(axis.id, next.id))) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus({ axisId: axis.id, valueId: next.id });
+        if ((0, commerceVariants_1.isOptionAvailable)(variants, selection, axis.id, next.id))
+            choose(axis.id, next.id);
+    };
+    const containerStyles = (axis) => {
+        if (layout === "grid") {
+            return { display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${GRID_MIN[axis.type]}, 1fr))`, gap: GAP };
+        }
+        if (layout === "scroll") {
+            return {
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: GAP,
+                overflowX: "auto",
+                pt: "0.5rem",
+                mt: "-0.5rem",
+                pr: "0.5rem",
+                scrollSnapType: "x proximity",
+                sx: (0, scrollbar_1.scrollbarStyles)(colors, "hover"),
+            };
+        }
+        return { display: "flex", flexWrap: "wrap", gap: GAP, pt: "0.25rem" };
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, "data-testid": testId, children: [axes.map((axis) => {
+                var _a, _b;
+                const labelId = `${uid}-${axis.id}-label`;
+                const picked = axis.values.find((option) => option.id === selection[axis.id]);
+                const unpicked = selection[axis.id] === undefined;
+                const invalid = !!error && unpicked;
+                const available = axis.values.map((option) => (0, commerceVariants_1.isOptionAvailable)(variants, selection, axis.id, option.id));
+                const firstAvailable = (_a = axis.values.find((_, i) => available[i])) !== null && _a !== void 0 ? _a : axis.values[0];
+                const stopId = (focus === null || focus === void 0 ? void 0 : focus.axisId) === axis.id ? focus.valueId : (_b = (picked !== null && picked !== void 0 ? picked : firstAvailable)) === null || _b === void 0 ? void 0 : _b.id;
+                const { guide } = axis;
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", justify: "space-between", gap: 3, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: labelId, fontSize: "sm", fontWeight: 600, color: colors.header[900], children: axis.label }), showSelectedLabel && picked ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", color: colors.textMuted, noOfLines: 1, children: picked.label })) : null] }), guide ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", display: "inline-flex", alignItems: "center", gap: 1, flexShrink: 0, fontSize: "sm", fontWeight: 600, color: colors.accentText, borderRadius: "md", onClick: () => {
+                                        guide.onClick();
+                                        onGuideClick === null || onGuideClick === void 0 ? void 0 : onGuideClick(axis.id);
+                                    }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Ruler, { size: 14, "aria-hidden": true }), guide.label] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { role: "radiogroup", "aria-labelledby": labelId, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? statusId : undefined, onKeyDown: onKeyDown(axis), onBlur: (event) => {
+                                if (!event.currentTarget.contains(event.relatedTarget))
+                                    setFocus(null);
+                            }, ...containerStyles(axis), children: axis.values.map((option, i) => ((0, jsx_runtime_1.jsx)(OptionChip_1.default, { ref: (node) => {
+                                    cells.current.set(cellKey(axis.id, option.id), node);
+                                }, label: option.label, variant: axis.type, swatch: option.swatch, image: option.image, hint: hintFor(axis, option), showLabel: axis.type === "swatch" && layout === "grid", size: size, fullWidth: layout === "grid" && (axis.type === "chip" || axis.type === "pack"), selected: option.id === selection[axis.id], unavailable: !available[i], invalid: invalid, tabIndex: option.id === stopId ? 0 : -1, onFocus: () => setFocus({ axisId: axis.id, valueId: option.id }), onSelect: () => choose(axis.id, option.id) }, option.id))) })] }, axis.id));
+            }), (0, jsx_runtime_1.jsx)(react_2.Box, { role: "status", id: statusId, "aria-live": "polite", mt: error ? -2 : 0, children: error ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: error })] })) : null })] }));
+};
+exports.default = VariantSelector;

package/dist/Components/VariantSelector/VariantSelectorProps.d.ts

@@ -0,0 +1,27 @@
+import type { OptionAxis, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+import type { OptionChipSize } from "../OptionChip/OptionChipProps";
+/** How an axis lays out its options: wrapping rows, one horizontal scroller, or an even grid (which also prints swatch names). */
+export type VariantSelectorLayout = "wrap" | "scroll" | "grid";
+/** Config-driven option picker for any product vertical; every axis label and value comes from `axes`. */
+export interface VariantSelectorProps {
+    /** One radiogroup per axis, in order. */
+    axes: OptionAxis[];
+    /** Availability is derived per combination from these variants' stock. */
+    variants: ProductVariant[];
+    /** Controlled selection, axis id to option value id. */
+    value?: VariantSelection;
+    defaultValue?: VariantSelection;
+    /** Receives the new selection and the matching variant, or undefined while the selection is incomplete or has no variant. */
+    onValueChange?: (selection: VariantSelection, variant: ProductVariant | undefined) => void;
+    /** Prompt such as "Select a size": shown as a status message and rings every axis still unpicked. */
+    error?: string;
+    /** Prints the picked value beside each axis label ("Colour  Indigo Wash"). */
+    showSelectedLabel?: boolean;
+    /** Tags a value "N left" only when its real remaining stock is at or under LOW_STOCK_THRESHOLD. */
+    showLowStock?: boolean;
+    size?: OptionChipSize;
+    layout?: VariantSelectorLayout;
+    /** Also called when an axis `guide` link is clicked, after the guide's own onClick. */
+    onGuideClick?: (axisId: string) => void;
+    "data-testid"?: string;
+}

package/dist/Components/VariantSelector/VariantSelectorProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/VariantSelector/variantSelection.d.ts

@@ -0,0 +1,6 @@
+import type { OptionAxis, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+/** Picks `valueId` on `axisId`, then drops every other pick that no sellable variant can pair with it. */
+export declare const selectValue: (axes: OptionAxis[], variants: ProductVariant[], selection: VariantSelection, axisId: string, valueId: string) => VariantSelection;
+/** Sold out under every combination, so picking it can never lead to a purchasable variant. */
+export declare const isSoldOutEverywhere: (variants: ProductVariant[], axisId: string, valueId: string) => boolean;
+export declare const sameSelection: (a: VariantSelection, b: VariantSelection) => boolean;

package/dist/Components/VariantSelector/variantSelection.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sameSelection = exports.isSoldOutEverywhere = exports.selectValue = void 0;
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+/** Picks `valueId` on `axisId`, then drops every other pick that no sellable variant can pair with it. */
+const selectValue = (axes, variants, selection, axisId, valueId) => {
+    const next = { ...selection, [axisId]: valueId };
+    for (const axis of axes) {
+        const pick = next[axis.id];
+        if (axis.id === axisId || pick === undefined)
+            continue;
+        if (!(0, commerceVariants_1.isOptionAvailable)(variants, next, axis.id, pick))
+            delete next[axis.id];
+    }
+    return next;
+};
+exports.selectValue = selectValue;
+/** Sold out under every combination, so picking it can never lead to a purchasable variant. */
+const isSoldOutEverywhere = (variants, axisId, valueId) => !(0, commerceVariants_1.isOptionAvailable)(variants, {}, axisId, valueId);
+exports.isSoldOutEverywhere = isSoldOutEverywhere;
+const sameSelection = (a, b) => {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    return [...keys].every((key) => a[key] === b[key]);
+};
+exports.sameSelection = sameSelection;

package/dist/Components/WishlistToggle/WishlistToggle.d.ts

@@ -0,0 +1,4 @@
+import type { WishlistToggleProps } from "./WishlistToggleProps";
+/** Heart toggle for saving a product: glass on media, tonal or bare elsewhere; pops once when saved. */
+declare const WishlistToggle: ({ selected, defaultSelected, onSelectedChange, size, variant, label, isDisabled, "data-testid": testId, }: WishlistToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default WishlistToggle;

package/dist/Components/WishlistToggle/WishlistToggle.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const react_3 = require("@emotion/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const HIT_PX = { sm: 32, md: 44, lg: 48 };
+const POP_MS = 320;
+const pop = (0, react_3.keyframes) `
+  0% { transform: scale(1); }
+  40% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+`;
+/** Heart toggle for saving a product: glass on media, tonal or bare elsewhere; pops once when saved. */
+const WishlistToggle = ({ selected, defaultSelected = false, onSelectedChange, size = "md", variant = "soft", label, isDisabled = false, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const [inner, setInner] = (0, react_1.useState)(defaultSelected);
+    const [popKey, setPopKey] = (0, react_1.useState)(0);
+    const on = selected !== null && selected !== void 0 ? selected : inner;
+    const spec = controlSizes_1.BUTTON_SIZES[size];
+    const hit = HIT_PX[size];
+    const icon = spec.iconSize + 2;
+    const popping = on && popKey > 0 && !reduced;
+    const toggle = () => {
+        const next = !on;
+        if (selected === undefined)
+            setInner(next);
+        if (next)
+            setPopKey((k) => k + 1);
+        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(next);
+    };
+    const saved = (0, filledSurface_1.resolveFilledSurface)(colors.semantic.error, colors);
+    const look = (() => {
+        if (variant === "glass") {
+            return on
+                ? { bg: saved.fill, hoverBg: saved.hoverFill, color: saved.color }
+                : { bg: (0, scrim_1.overlayScrim)(colors), hoverBg: (0, scrim_1.overlayScrim)(colors), color: colors.white };
+        }
+        const ink = on ? colors.semanticText.error : variant === "soft" ? colors.header[900] : colors.textMuted;
+        return {
+            bg: variant === "soft" ? colors.background[100] : colors.transparent,
+            hoverBg: variant === "soft" ? colors.background[200] : colors.background[100],
+            color: ink,
+        };
+    })();
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-pressed": on, "aria-label": label !== null && label !== void 0 ? label : (on ? "Remove from wishlist" : "Add to wishlist"), disabled: isDisabled, onClick: toggle, "data-testid": testId, "data-selected": on || undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: `${hit}px`, flexShrink: 0, borderRadius: "full", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, sx: {
+            outline: "none",
+            "&:focus-visible > [data-disc]": (0, focusRing_styles_1.focusVisibleRing)(colors),
+            "&:hover:not(:disabled) > [data-disc]": { backgroundColor: look.hoverBg },
+            ...(reduced ? {} : { "&:active:not(:disabled) > [data-disc]": { transform: "scale(0.92)" } }),
+        }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "data-disc": true, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: spec.height, borderRadius: "full", bg: look.bg, color: look.color, transition: (0, motion_1.transitionFor)(["background-color", "color", "transform"]), sx: {
+                ...(variant === "glass" ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),
+                ...(0, motion_2.reducedMotionSx)(),
+            }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", "data-pop": popping || undefined, animation: popping ? `${pop} ${POP_MS}ms ${motion_1.MOTION_EASE}` : undefined, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Heart, { size: icon, "aria-hidden": true, fill: on ? "currentColor" : "none", strokeWidth: 2 }) }, popKey) }) }));
+};
+exports.default = WishlistToggle;