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

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

@@ -3,8 +3,11 @@ import { useMemo, useState } from "react";
 import { Avatar, Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton, SkeletonText, Spinner, Text, Tooltip, VStack, } from "@chakra-ui/react";
 import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import Tag from "../Tag/Tag.js";
@@ -47,6 +50,7 @@ const DEFAULT_LABELS = {
     copyright: "Pixelize Corp. All rights reserved.",
     termsOfService: "Terms of Service",
 };
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher. */
 const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onDeleteRequest, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
     const { colors } = useCustomTheme();
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -56,9 +60,8 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const [editingOrgId, setEditingOrgId] = useState(null);
     const [editValue, setEditValue] = useState("");
     const [editError, setEditError] = useState("");
-    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = resolveStatusTone(colors.semantic.error, mode);
-    const warningTone = resolveStatusTone(colors.semantic.warning, mode);
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    const warningTone = resolveSoftTone(colors, colors.semantic.warning);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
     const muted = colors.textMuted;
@@ -67,7 +70,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const pageBg = colors.backgroundColor.main;
     const primary50 = colors.primary[50];
     const primary100 = colors.primary[100];
-    const primary500 = colors.primary[500];
+    const primarySolid = resolveFilledSurface(colors.primary, colors);
     const onPrimary50 = accentTextOnCanvas(colors.primary, colors.primary[50]);
     const cardSx = {
         backgroundColor: surface,
@@ -118,11 +121,11 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
             }, onClick: () => onDeleteRequest
                 ? onDeleteRequest(item.orgId)
                 : setDeleteOrgId(item.orgId) }));
-        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: transitionFor(["border-color", "box-shadow", "transform"]), sx: reducedMotionSx(), _hover: {
                 borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: transitionFor(["color", "gap"]), sx: reducedMotionSx(), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
                                         ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? (_jsx(Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? (_jsxs(Box, { children: [_jsxs(HStack, { spacing: 1, children: [_jsx(Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);
@@ -137,7 +140,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     };
     const renderInvitedCard = (item) => {
         const isResponding = respondingOrgIds.includes(item.orgId);
-        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: transitionFor(["box-shadow", "transform"]), sx: reducedMotionSx(), _hover: {
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
             }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: warningTone.bg, color: warningTone.fg, children: _jsx(Building2, { size: 18 }) }), _jsx(Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && (_jsxs(Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [_jsx(Globe, { size: 13 }), _jsx(Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), _jsxs(HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [_jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), _jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
@@ -153,7 +156,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         width: "100%",
     };
     const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
-    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: onFilled(primary500, colors.white, colors.black), children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
+    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primarySolid.fill, color: primarySolid.color, children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
                                                     ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
                                                     : labels.greeting }), _jsx(Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), _jsx(Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), _jsx(Button, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? (_jsx(Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Box, { ...cardSx, p: 3, children: [_jsx(Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), _jsx(SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? (_jsx(EmptyState, { icon: Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: _jsx(Button, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (_jsxs(VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Users, { size: 16, color: colors.accentText }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), _jsx(Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Mail, { size: 16, color: colors.semanticText.warning }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), _jsx(Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, _jsx(CreateOrgModal, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
                     await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));

package/dist/esm/Components/PageHeader/PageHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
+const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), _jsxs(Flex, { justify: "space-between", align: { base: "flex-start", md: "center" }, direction: { base: "column", md: "row" }, gap: 3, children: [_jsxs(Flex, { gap: 3, align: "center", minW: 0, children: [leading && _jsx(Box, { flexShrink: 0, children: leading }), _jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Heading, { as: "h1", fontSize: "lg", fontWeight: 600, letterSpacing: "-0.01em", color: colors.header[900], children: title }), titleAddon] }), subtitle && (_jsx(Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && (_jsx(Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && (_jsx(Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: 0, children: actions }))] }), tabs && _jsx(Box, { children: tabs })] }));
+};
+export default PageHeader;

package/dist/esm/Components/PageHeader/PageHeaderProps.js

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

package/dist/esm/Components/PdfViewer/PdfViewer.js

@@ -2,9 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { Download, ExternalLink, FileText } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import ToolTip from "../ToolTip/ToolTip.js";
+/** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
 const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
     const theme = useCustomTheme();
-    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.gray[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    const toolbarSurface = theme.colors.background[50];
+    const iconHoverInk = accentTextOnCanvas(theme.colors.primary, toolbarSurface);
+    const iconHoverBg = listRowBackgrounds(theme.colors).active;
+    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": `Open ${fileName} in a new tab`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, "aria-label": `Download ${fileName}`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
 };
 export default PdfViewer;

package/dist/esm/Components/PersonChip/PersonChip.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Icon, Text } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import Avatar from "../Avatar/Avatar.js";
+const NAME_SIZE = {
+    sm: "0.8125rem", md: "0.875rem", lg: "1rem", xl: "1.125rem",
+};
+const SECONDARY_SIZE = {
+    sm: "0.75rem", md: "0.75rem", lg: "0.8125rem", xl: "0.875rem",
+};
+const REMOVE_ICON_SIZE = {
+    sm: 12, md: 14, lg: 14, xl: 16,
+};
+// The remove button is a sibling of the clickable region, never nested in it — a <button> can't contain another.
+const PersonChip = ({ name, imageUrl, secondary, size = "md", orientation = "horizontal", status, onClick, onRemove, removeLabel, isTruncated = true, maxW, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const isInteractive = Boolean(onClick);
+    const isVertical = orientation === "vertical";
+    const removeButton = onRemove ? (_jsx(Box, { as: "button", type: "button", "aria-label": removeLabel !== null && removeLabel !== void 0 ? removeLabel : `Remove ${name}`, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, borderRadius: "full", p: 1, color: colors.textMuted, transition: transitionFor(["opacity", "color"]), _hover: { opacity: 0.8, color: colors.header[900] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+        }, children: _jsx(Icon, { as: X, boxSize: `${REMOVE_ICON_SIZE[size]}px` }) })) : null;
+    const content = (_jsxs(_Fragment, { children: [_jsx(Avatar, { name: name, src: imageUrl, size: size, status: status }), _jsxs(Box, { minW: 0, maxW: maxW, children: [_jsx(Text, { fontSize: NAME_SIZE[size], fontWeight: 600, color: colors.header[900], isTruncated: isTruncated, children: name }), secondary ? (_jsx(Text, { fontSize: SECONDARY_SIZE[size], color: colors.textMuted, isTruncated: isTruncated, children: secondary })) : null] })] }));
+    const identityStyle = {
+        direction: isVertical ? "column" : "row",
+        align: "center",
+        gap: isVertical ? 1.5 : 2.5,
+        minW: 0,
+        flex: isVertical ? undefined : "1",
+        textAlign: isVertical ? "center" : "left",
+        borderRadius: "lg",
+    };
+    const identity = isInteractive ? (_jsx(Flex, { as: "button", type: "button", onClick: onClick, ...identityStyle, cursor: "pointer", transition: transitionFor(["background-color"]), _hover: { bg: colors.backgroundColor.secondary }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, "data-testid": onRemove ? undefined : testId, children: content })) : (_jsx(Flex, { ...identityStyle, "data-testid": onRemove ? undefined : testId, children: content }));
+    if (!removeButton)
+        return identity;
+    return (_jsxs(Flex, { direction: isVertical ? "column" : "row", align: "center", gap: isVertical ? 1 : 0, minW: 0, "data-testid": testId, children: [identity, removeButton] }));
+};
+export default PersonChip;

package/dist/esm/Components/PersonChip/PersonChipProps.js

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

package/dist/esm/Components/PinInput/PinInput.js

@@ -2,14 +2,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { HStack, PinInput, PinInputField } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { TextLabel } from "../Common/FormLabel.js";
-export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, }) {
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { pinInputCellSize } from "./pinInputCellSize.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. */
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = DEFAULT_CONTROL_SIZE, }) {
+    var _a;
     const theme = useCustomTheme();
-    return (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(HStack, { children: _jsx(PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { backgroundColor: theme.colors.background[100], 
-                        // [800], not [300]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
-                        // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
-                        // [800] clears all named surfaces with margin (3.44-3.90).
-                        borderColor: theme.colors.boxborder[500], _focus: {
-                            borderColor: theme.colors.primary[500],
-                            boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
-                        } }, index))) }) })] }));
+    const fieldName = (_a = label !== null && label !== void 0 ? label : id) !== null && _a !== void 0 ? _a : "One-time code";
+    // Square cells at the same heights every other field uses — Chakra's own PinInput size
+    // scale doesn't line up with the library's, so cells are sized directly.
+    const cell = pinInputCellSize(size);
+    return (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(HStack, { role: "group", "aria-label": fieldName, children: _jsx(PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) } }, index))) }) })] }));
 }

package/dist/esm/Components/PinInput/pinInputCellSize.js

@@ -0,0 +1,6 @@
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+/** Square OTP cell dimensions for a size, aligned to the shared CONTROL_SIZES heights. */
+export const pinInputCellSize = (size) => {
+    const spec = CONTROL_SIZES[size];
+    return { boxSize: spec.height, fontSize: spec.fontSize };
+};

package/dist/esm/Components/PlanBadge/PlanBadge.js

@@ -1,13 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { resolvePlanBadge } from "../../Utils/planBadge.js";
 import PlanPill from "../PlanPill/PlanPill.js";
-/**
- * The top-bar plan badge: resolves an org's plan state into a `PlanPill`, or
- * renders nothing when there is nothing to say (or nobody who can act on it).
- *
- * Use this when the app has the plan state to hand; drop to `PlanPill` directly
- * for a badge whose copy is decided elsewhere.
- */
+// Top-bar plan badge — resolves an org's plan state into a PlanPill, or renders nothing.
 const PlanBadge = ({ input, maxLabelWidth, ariaLabel, onClick, }) => {
     const { visible, label, mobileLabel, subtitle, tone } = resolvePlanBadge(input);
     if (!visible)

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

@@ -3,6 +3,7 @@ import { Box, Flex, Text } from "@chakra-ui/react";
 import { AlertCircle, Clock, Sparkles } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { chipBorder, chipFill, statusGradient, } from "./planPillGradient.js";
 const TONE_ICON = {
     normal: Sparkles,
@@ -24,10 +25,8 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: gradientCss(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
             transform: "translateY(-1px)",
             boxShadow: `0 6px 18px ${resolved.from}59`,
-        }, _focusVisible: {
-            outline: "none",
-            boxShadow: `0 0 0 3px ${resolved.from}55`,
         }, sx: {
+            ...focusVisibleStyles(c),
             "@media (prefers-reduced-motion: reduce)": {
                 transition: "none",
                 _hover: { transform: "none" },

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

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

package/dist/esm/Components/Primitives/Primitives.js

@@ -0,0 +1,3 @@
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Badge, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+// Renamed: the library's own Table owns this name.
+export { Table as TableRoot } from "@chakra-ui/react";

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

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

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

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

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

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

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

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

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

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