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

package/dist/esm/Components/SideBar/components/MenuPopoverContent.js

@@ -8,12 +8,13 @@ import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
 import { sidebarRowPeak } from "../../../Theme/tokens/builders/sidebarAccent.js";
 import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
 import TruncatedTextWithTooltip from "./TextTruncation.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
 import { SIDEBAR_ROW } from "../sidebarScale.js";
 const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     var _a;
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
-    const { title, icon, subMenu, badge, locked } = menu;
+    const { title, icon, subMenu, badge, locked, lockedReason } = menu;
     const isBlocked = menuDisabled(menu) || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const isParentActive = activeMenu === menu.id;
@@ -38,7 +39,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                         const variant = (_d = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _d !== void 0 ? _d : "subtle";
                         const tone = resolveSoftTone(theme.colors, scaleFor(theme.colors, colorScheme), sidebarRowPeak(theme.colors.sidebar.elevated));
                         return (_jsx(Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
-                    })(), locked && _jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })] }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((sub) => {
+                    })(), locked && (lockedReason ? (_jsx(ToolTip, { label: lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })))] }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((sub) => {
                 var _a;
                 const isSubActive = activeMenu === sub.id;
                 const isSubBlocked = menuDisabled(sub) || sub.locked;
@@ -49,7 +50,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                     }, px: 2, h: SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
                         bg: isSubBlocked ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
                         cursor: !isSubBlocked ? "pointer" : "not-allowed",
-                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? (_jsx(ToolTip, { label: sub.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge

package/dist/esm/Components/SpecTable/SpecTable.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+const DEFAULT_LABELS = { showAll: "Show all", showLess: "Show less" };
+/** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
+const SpecTable = ({ items, columns = 1, collapsedCount, expanded, defaultExpanded = false, onExpandedChange, labels, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const listId = useId();
+    const [inner, setInner] = useState(defaultExpanded);
+    const text = { ...DEFAULT_LABELS, ...labels };
+    if (items.length === 0)
+        return null;
+    const foldable = collapsedCount !== undefined && collapsedCount < items.length;
+    const isExpanded = expanded !== null && expanded !== void 0 ? expanded : inner;
+    const visible = foldable && !isExpanded ? items.slice(0, collapsedCount) : items;
+    const tint = colors.background[100];
+    const toggle = () => {
+        const next = !isExpanded;
+        if (expanded === undefined)
+            setInner(next);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+    };
+    return (_jsxs(Box, { "data-testid": testId, children: [_jsx(Box, { as: "dl", id: listId, m: 0, "aria-label": ariaLabel, display: "grid", gridTemplateColumns: columns === 2 ? { base: "1fr", md: "1fr 1fr" } : "1fr", borderRadius: "xl", overflow: "hidden", children: visible.map((item, i) => {
+                    const stripeNarrow = i % 2 === 0;
+                    const stripeWide = columns === 2 ? Math.floor(i / 2) % 2 === 0 : stripeNarrow;
+                    return (_jsxs(Flex, { "data-stripe": stripeNarrow, "data-stripe-wide": stripeWide, gap: 4, px: 4, py: 3, fontSize: "sm", bg: { base: stripeNarrow ? tint : "transparent", md: stripeWide ? tint : "transparent" }, children: [_jsx(Box, { as: "dt", flex: "0 0 40%", minW: 0, color: colors.textMuted, overflowWrap: "anywhere", children: item.label }), _jsx(Box, { as: "dd", m: 0, flex: "1 1 0", minW: 0, fontWeight: 500, color: colors.header[900], overflowWrap: "anywhere", sx: { fontVariantNumeric: "tabular-nums" }, children: item.value })] }, `${item.label}-${i}`));
+                }) }), foldable && (_jsx(Box, { mt: 2, children: _jsx(Button, { variant: "ghost", size: "sm", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, rightIcon: _jsx(Box, { as: "span", display: "inline-flex", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform"]), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16, "aria-hidden": true }) }), children: isExpanded ? text.showLess : `${text.showAll} (${items.length})` }) }))] }));
+};
+export default SpecTable;

package/dist/esm/Components/SpecTable/SpecTableProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Spinner/Spinner.js

@@ -11,9 +11,9 @@ const SPINNER_SIZES = {
     xl: { boxSize: "3rem", thickness: "0.25rem" },
 };
 /** Themed spinner for inline or panel loading; for a blocking overlay use Loading, for a button use Button isLoading. */
-export default function Spinner({ size = "md", tone, color, label = "Loading", thickness, speed = "0.7s", emptyColor = "transparent", sx, ...rest }) {
+export default function Spinner({ size = "md", tone, color, label = "Loading", thickness, speed = "0.7s", emptyColor = "transparent", sx, testId, ...rest }) {
     const { colors } = useCustomTheme();
     const spec = SPINNER_SIZES[size];
     const ink = color !== null && color !== void 0 ? color : (tone ? toneInk(colors, tone) : colors.accentText);
-    return (_jsx(ChakraSpinner, { boxSize: spec.boxSize, ...rest, label: label, color: ink, emptyColor: emptyColor, thickness: thickness !== null && thickness !== void 0 ? thickness : spec.thickness, speed: speed, sx: { [REDUCED_MOTION_QUERY]: { animationDuration: "1.6s" }, ...sx } }));
+    return (_jsx(ChakraSpinner, { boxSize: spec.boxSize, ...rest, label: label, color: ink, emptyColor: emptyColor, thickness: thickness !== null && thickness !== void 0 ? thickness : spec.thickness, speed: speed, sx: { [REDUCED_MOTION_QUERY]: { animationDuration: "1.6s" }, ...sx }, ...(testId !== undefined ? { "data-testid": testId } : {}) }));
 }

package/dist/esm/Components/StageProgress/StepperStage.js

@@ -19,8 +19,9 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const s = sizeMap[size];
     const interactive = !isReadOnly && !disabled;
     useEffect(() => {
+        var _a, _b;
         if (state === "active" && scrollIntoViewWhenActive && ref.current) {
-            ref.current.scrollIntoView({
+            (_b = (_a = ref.current).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
                 behavior: "smooth",
                 inline: "center",
                 block: "nearest",

package/dist/esm/Components/StatCard/StatCard.js

@@ -8,7 +8,7 @@ import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import Skeletons from "../Skeletons/Skeletons.js";
 const StatCardSkeleton = ({ hasIcon }) => (_jsxs(Flex, { direction: "column", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [hasIcon && _jsx(Skeletons, { type: "skeleton", height: 8, width: 8 }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "40%" })] }), _jsx(Skeletons, { type: "skeleton", height: 7, width: "55%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "45%" })] }));
 /** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
-const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, icon: Icon, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
     const { colors } = useCustomTheme();
     const isInteractive = !!onClick && !isLoading;
     const deltaColor = trend
@@ -28,7 +28,7 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, icon
         px: 5,
         py: 4,
     };
-    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: colors.primary.opacity[8], color: colors.accentText, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] }))] }));
+    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: colors.primary.opacity[8], color: colors.accentText, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsxs(Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), sparkline && (_jsx(Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && (_jsx(Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
     if (!isInteractive) {
         return (_jsx(Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
     }

package/dist/esm/Components/StickyBuyBar/StickyBuyBar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Grid } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Check } from "lucide-react";
+import Button from "../Button/Button.js";
+import PriceBlock from "../PriceBlock/PriceBlock.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import { glassStyles } from "../MediaGallery/glass.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { MOTION_EASE, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+const DEFAULT_LABELS = {
+    region: "Buy",
+    add: "Add to bag",
+    selectOption: "Select an option",
+    notify: "Notify me",
+    added: "Added",
+    goToBag: "Go to bag",
+    buyNow: "Buy now",
+    adding: "Adding to bag",
+};
+const SLIDE_MS = 240;
+const BAR_HEIGHT = "3.25rem";
+const SLOT_MIN_WIDTH = "9.5rem";
+const RISE = "6px";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
+const pop = keyframes `0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); }`;
+const STACK_ORDER = ["add", "select-option", "notify", "added", "go-to-bag"];
+const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "sticky", isLoading = false, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const glass = glassStyles(colors);
+    const stepping = mode === "stepper";
+    const active = stepping ? null : mode;
+    const text = {
+        add: copy.add,
+        "select-option": copy.selectOption,
+        notify: copy.notify,
+        added: copy.added,
+        "go-to-bag": copy.goToBag,
+    };
+    const handlers = {
+        add: onAddToBag,
+        "select-option": onSelectOption,
+        notify: onNotify,
+        added: undefined,
+        "go-to-bag": onGoToBag,
+    };
+    const tonal = mode === "notify";
+    const inert = mode === "added" || isLoading;
+    // NOTE: Button's prop type is a closed Pick, so aria-busy / aria-disabled ride in on a spread.
+    const aria = {
+        "aria-busy": isLoading ? "true" : undefined,
+        "aria-disabled": inert ? "true" : undefined,
+        "aria-label": isLoading ? copy.adding : undefined,
+    };
+    const layer = (on) => ({
+        gridArea: "1 / 1",
+        opacity: on ? 1 : 0,
+        visibility: on ? "visible" : "hidden",
+        transition: reduced ? "none" : `${transitionFor(["opacity"])}, visibility 0s linear ${on ? 0 : 150}ms`,
+    });
+    const label = (key) => {
+        const on = key === active;
+        return (_jsxs(Flex, { as: "span", "aria-hidden": on ? undefined : true, gridArea: "1 / 1", align: "center", justify: "center", gap: 1.5, opacity: on ? 1 : 0, transform: on || reduced ? "none" : `translateY(${RISE})`, transition: transitionFor(["opacity", "transform"]), sx: reducedMotionSx(), children: [key === "added" && (_jsx(Box, { as: "span", display: "inline-flex", animation: on && !reduced ? `${pop} 280ms ${MOTION_EASE} both` : undefined, sx: reducedMotionSx(), children: _jsx(Check, { size: 18, "aria-hidden": true }) })), text[key]] }, key));
+    };
+    return (_jsx(Box, { as: "section", role: "region", "aria-label": copy.region, "aria-hidden": visible ? undefined : true, position: position === "sticky" ? "sticky" : "relative", bottom: position === "sticky" ? 0 : undefined, zIndex: zIndices.sticky, px: 4, pt: 3, pb: SAFE_BOTTOM, transform: visible ? "translateY(0)" : "translateY(100%)", visibility: visible ? "visible" : "hidden", transition: reduced ? "none" : `transform ${SLIDE_MS}ms ${MOTION_EASE}, visibility 0s linear ${visible ? 0 : SLIDE_MS}ms`, "data-testid": testId, ...glass, sx: { ...glass.sx, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised }, ...reducedMotionSx() }, children: _jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(PriceBlock, { size: "sm", price: price, mrp: mrp, currency: currency, locale: locale }) }), mode === "add" && onBuyNow && (_jsx(Button, { variant: "outline", size: "lg", h: BAR_HEIGHT, onClick: onBuyNow, label: copy.buyNow })), _jsxs(Grid, { minW: SLOT_MIN_WIDTH, justifyItems: "stretch", alignItems: "center", children: [_jsx(Box, { ...layer(!stepping), "aria-hidden": stepping ? true : undefined, children: _jsx(Button, { ...aria, variant: tonal ? "ghost" : "solid", size: "lg", w: "100%", h: BAR_HEIGHT, onClick: () => {
+                                    var _a;
+                                    if (!inert)
+                                        (_a = handlers[mode]) === null || _a === void 0 ? void 0 : _a.call(handlers);
+                                }, sx: {
+                                    ...(tonal ? { bg: colors.background[100], color: colors.header[900], _hover: { bg: colors.background[200] } } : {}),
+                                    ...(inert ? { cursor: isLoading ? "progress" : "default", pointerEvents: isLoading ? "auto" : "none" } : {}),
+                                    display: "grid",
+                                }, children: STACK_ORDER.map(label) }) }), _jsx(Flex, { ...layer(stepping), "aria-hidden": stepping ? undefined : true, justify: "center", align: "center", h: BAR_HEIGHT, children: _jsx(QuantityStepper, { value: quantity, onValueChange: onQuantityChange, max: maxQuantity, itemLabel: itemLabel, size: "md" }) })] })] }) }));
+};
+export default StickyBuyBar;

package/dist/esm/Components/StickyBuyBar/StickyBuyBarProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/StockStatus/StockStatus.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const TEXT_SIZE = { sm: "xs", md: "sm" };
+const DOT_PX = { sm: 6, md: 8 };
+const defaultMessage = (status, count) => {
+    switch (status) {
+        case "in-stock":
+            return "In stock";
+        case "low-stock":
+            return count !== undefined ? `Only ${count} left` : "Low stock";
+        case "out-of-stock":
+            return "Out of stock";
+        case "backorder":
+            return "Available on backorder";
+    }
+};
+/** Availability dot + label for a `StockState`; colour comes from `semanticText`, meaning from the words. */
+const StockStatus = ({ status, count, message, size = "md", "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    const ink = {
+        "in-stock": colors.semanticText.success,
+        "low-stock": colors.semanticText.warning,
+        "out-of-stock": colors.textMuted,
+        backorder: colors.semanticText.info,
+    };
+    return (_jsxs(Flex, { as: "span", display: "inline-flex", align: "center", gap: 1.5, "data-status": status, "data-testid": testId, color: ink[status], children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${DOT_PX[size]}px`, flexShrink: 0, borderRadius: "full", bg: "currentColor" }), _jsx(Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, lineHeight: 1.4, children: message !== null && message !== void 0 ? message : defaultMessage(status, count) })] }));
+};
+export default StockStatus;

package/dist/esm/Components/StockStatus/StockStatusProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Table/Table.js

@@ -19,6 +19,7 @@ import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT, MAX_TABLE_HEIGHT
 import { scrollbarStyles, SCROLLBAR_WIDTH } from "../../Theme/tokens/builders/scrollbar.js";
 import { scrollShadowStyles } from "../../Theme/tokens/builders/scrollShadow.js";
 import useTable from "./hooks/useTable.js";
+import { toSavedColumns } from "./columnLabel.js";
 import { searchAndSortData, SortMultiColumnData, groupRows, buildTablePalette, pickTableColor } from "../../Utils/table.js";
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
 import TableSettings from "./settings/TableSettings.js";
@@ -165,7 +166,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
     }, [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: 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/esm/Components/Table/columnLabel.js

@@ -0,0 +1,21 @@
+import { isValidElement } from "react";
+export const isPrimitiveLabel = (label) => typeof label === "string" || typeof label === "number";
+const textOf = (node) => {
+    if (isPrimitiveLabel(node))
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(textOf).join("");
+    if (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. */
+export const columnLabelText = (column) => {
+    if (isPrimitiveLabel(column.label))
+        return String(column.label);
+    if (column.labelText)
+        return column.labelText;
+    return textOf(column.label).replace(/\s+/g, " ").trim() || String(column.id);
+};
+/** Columns as they may be POSTed: a node label is swapped for its text, since elements are not JSON. */
+export const toSavedColumns = (columns) => columns.map((column) => isPrimitiveLabel(column.label) ? column : { ...column, label: columnLabelText(column) });

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

@@ -12,6 +12,7 @@ import { useTableVariant } from "../variants/TableVariantContext.js";
 import { resolvePillInk } from "../variants/pillInk.js";
 import EmptyState from "../../EmptyState/EmptyState.js";
 import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT } from "./rowMetrics.js";
+import { columnLabelText, isPrimitiveLabel } from "../columnLabel.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 const getRowId = (row) => row.id;
@@ -80,7 +81,10 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
     }, [onMeasure, isExpanded, hasContent, row]);
     const handleCellClick = useCallback((header) => {
         if (!header.node && onRowClick) {
-            onRowClick(row, { label: header.label, id: header.id });
+            onRowClick(row, {
+                label: isPrimitiveLabel(header.label) ? header.label : columnLabelText(header),
+                id: header.id,
+            });
         }
     }, [row, onRowClick]);
     const variant = useTableVariant();

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

@@ -5,6 +5,7 @@ import { calculateLeftOffset } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
 import TableFilters from "../filters/TableFilters.js";
+import { columnLabelText } from "../columnLabel.js";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
 import { useTableVariant } from "../variants/TableVariantContext.js";
@@ -17,7 +18,7 @@ const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths
     return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_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 (_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 (_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 }, columnLabelText(header)));
             }), isLink && _jsx(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
 };
 export default memo(TableHeader);
@@ -91,7 +92,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, isCheckbox,
         !!columnsSearch[header.id];
     return (_jsx(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: _jsxs(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: [_jsx(Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: transitionFor(["opacity"], "base"), sx: reducedMotionSx(), _focusWithin: { opacity: 1 }, children: [header.isSort && (_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: _jsxs(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: [_jsx(Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: transitionFor(["opacity"], "base"), sx: reducedMotionSx(), _focusWithin: { opacity: 1 }, children: [header.isSort && (_jsx(SortingIcon, { label: 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/esm/Components/Table/filters/ActiveFilters.js

@@ -7,6 +7,7 @@ import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js
 import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { focusVisibleStyles } from "../../../Theme/chakra/focusRing.styles.js";
+import { columnLabelText } from "../columnLabel.js";
 import VeritcalDivider from "../../Divider/Divider.js";
 const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
     const theme = useCustomTheme();
@@ -14,7 +15,7 @@ const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, })
     const columnLabelMap = useMemo(() => {
         const map = new Map();
         for (const col of columns) {
-            map.set(col.id, col.label);
+            map.set(col.id, columnLabelText(col));
         }
         return map;
     }, [columns]);

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

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

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

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { searchAndSortData, SortMultiColumnData } from "../../../Utils/table.js";
+import { isPrimitiveLabel, toSavedColumns } from "../columnLabel.js";
 export const DEFAULT_PAGE_SIZE = 20;
 const defaultPageSize = DEFAULT_PAGE_SIZE;
 const mergeColumnWithPreference = (pref, originalCol) => {
@@ -10,7 +11,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 (isPrimitiveLabel(pref.label) && isPrimitiveLabel(originalCol === null || originalCol === void 0 ? void 0 : originalCol.label)) {
         next.label = pref.label;
     }
     return next;
@@ -217,7 +218,7 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
         if (savePreferences) {
             savePreferences({
                 ...tablePreferences,
-                columns: columns,
+                columns: toSavedColumns(columns),
                 ...extra,
             });
         }

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

@@ -6,6 +6,7 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
+import { columnLabelText } from "../columnLabel.js";
 import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
@@ -61,7 +62,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) => columnLabelText(item).toLowerCase().includes(searchTerm.toLowerCase()));
     const allChecked = items.every((item) => !item.isHidden);
     const someChecked = items.some((item) => !item.isHidden) && !allChecked;
     const handleSelectAll = () => {
@@ -87,9 +88,9 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                             : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: transitionFor(["background-color", "border-color"]), _hover: {
                             bg: rowBackgrounds.active,
                             borderColor: theme.colors.boxborder[200],
-                        }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                        }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: columnLabelText(item), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
                                     color: item.isHidden ? theme.colors.textMuted : theme.colors.text[700],
-                                } }), _jsx(Text, { fontSize: "12px", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(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) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(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));
+                                } }), _jsx(Text, { fontSize: "12px", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} up`, icon: _jsx(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) }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} down`, icon: _jsx(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));
                 })) : (_jsx(Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 export default ManageColumns;

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

@@ -6,6 +6,7 @@ import ManageColumns from "./ManageColumns.js";
 import Button from "../../Button/Button.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { columnLabelText } from "../columnLabel.js";
 import { Settings, Check } from "lucide-react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
@@ -67,7 +68,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: columnLabelText(c) }))]
                                                                 .map((opt) => {
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;

package/dist/esm/Components/TrustBadges/TrustBadges.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+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 } = useCustomTheme();
+    if (items.length === 0)
+        return null;
+    const stacked = layout === "stack";
+    const tile = (item) => {
+        var _a;
+        return (_jsxs(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: [_jsx(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 }), _jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, lineHeight: 1.35, color: colors.header[900], children: item.title }), item.detail ? (_jsx(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 (_jsx(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) }));
+};
+export default TrustBadges;

package/dist/esm/Components/TrustBadges/TrustBadgesProps.js

@@ -0,0 +1 @@
+export {};