pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

package/dist/Components/AudioRecorder/AudioRecorder.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const DEFAULT_LABELS = {
     start: "Start recording",
     stop: "Stop recording",
@@ -164,6 +165,6 @@ const AudioRecorder = ({ onRecorded, maxDurationSec, isDisabled = false, labels
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: isRecording ? text.stop : text.start, size: "sm", colorScheme: isRecording ? "red" : undefined, variant: isRecording ? "solid" : "outline", "aria-pressed": isRecording, isDisabled: isRecording ? false : isDisabled || blocked, onClick: isRecording ? stop : () => void start() }), isRecording ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "audio-recorder-dot", boxSize: "0.5rem", borderRadius: "full", bg: colors.semanticText.error, "aria-hidden": true, sx: {
                                     "@media (prefers-reduced-motion: no-preference)": { animation: "audio-recorder-pulse 1.2s ease-in-out infinite" },
                                     "@keyframes audio-recorder-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.35 } },
-                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", role: "timer", fontSize: "0.875rem", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: (0, exports.formatElapsed)(elapsedMs) })] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? ((0, jsx_runtime_1.jsx)(react_2.Text, { role: "alert", mt: 1, fontSize: "0.75rem", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", role: "timer", fontSize: "sm", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: (0, exports.formatElapsed)(elapsedMs) })] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? ((0, jsx_runtime_1.jsx)(react_2.Text, { role: "alert", mt: 1, fontSize: "xs", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
 };
 exports.default = AudioRecorder;

package/dist/Components/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
 import type { AvatarProps } from "./AvatarProps";
-declare const Avatar: ({ name, src, size, status, ariaLabel, getInitials, "data-testid": testId }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+/** Initials or image avatar with an optional status dot; `ref` is the outer box. */
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Avatar;

package/dist/Components/Avatar/Avatar.js

@@ -13,12 +13,14 @@ const STATUS_TONE = {
 const STATUS_LABEL = {
     online: "Online", away: "Away", busy: "Busy", offline: "Offline",
 };
-const Avatar = ({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }) => {
+/** Initials or image avatar with an optional status dot; `ref` is the outer box. */
+const Avatar = (0, react_1.forwardRef)(function Avatar({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }, ref) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [imageFailed, setImageFailed] = (0, react_1.useState)(false);
     const px = avatarSizing_1.SIZE_PX[size];
     const showImage = Boolean(src) && !imageFailed;
     const { bg, color } = (0, avatarColorway_1.resolveAvatarColorway)(name, colors);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : avatarColorway_1.initialsFor)(name) })), status ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "0", right: "0", boxSize: avatarSizing_1.DOT_SIZE[size], borderRadius: "full", bg: (0, tone_1.toneInk)(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
-};
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: avatarSizing_1.FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : avatarColorway_1.initialsFor)(name) })), status ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "0", right: "0", boxSize: avatarSizing_1.DOT_SIZE[size], borderRadius: "full", bg: (0, tone_1.toneInk)(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
+});
+Avatar.displayName = "Avatar";
 exports.default = Avatar;

package/dist/Components/Backdrop/Backdrop.js

@@ -30,5 +30,5 @@ function Backdrop({ open, variant = "dim", loader = false, text, invisible = fal
             inset: 0,
             zIndex: Number(zIndex !== null && zIndex !== void 0 ? zIndex : (container ? 10 : 1300)),
             pointerEvents: allowBackgroundInteraction ? "none" : "auto",
-        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? overlay_styles_1.OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...(0, motion_1.reducedMotionSx)() }, children: children !== null && children !== void 0 ? children : (loader ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", children: text })] })) : null) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? overlay_styles_1.OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...(0, motion_1.reducedMotionSx)() }, children: children !== null && children !== void 0 ? children : (loader ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: text })] })) : null) }) }));
 }

package/dist/Components/BagBar/BagBar.js

@@ -10,6 +10,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrim_1 = require("../../Theme/tokens/builders/scrim");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const price_1 = require("../../Utils/price");
 const Button_1 = __importDefault(require("../Button/Button"));
@@ -23,7 +24,7 @@ const BagBar = ({ total, note, onViewDetails, ctaLabel, onCta, ctaDisabled = fal
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const copy = { ...DEFAULT_LABELS, ...labels };
     const sticky = position === "bottom";
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", "aria-label": copy.region, align: "center", justify: "space-between", gap: 4, px: 4, pt: 3, pb: SAFE_BOTTOM, borderTopRadius: "1.5rem", bg: `${colors.surfaceRaised}${GLASS_ALPHA}`, backdropFilter: BLUR, position: sticky ? "sticky" : "static", bottom: sticky ? 0 : undefined, zIndex: sticky ? zIndex : undefined, boxShadow: sticky ? `0 -12px 32px -16px ${(0, scrim_1.overlayScrim)(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "1.25rem", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "bag-bar-total", children: (0, price_1.formatPrice)(total, { currency, locale }) })] }), note && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", onClick: onViewDetails, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", fontSize: "xs", fontWeight: 600, color: colors.accentText, borderRadius: "sm", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", "aria-label": copy.region, align: "center", justify: "space-between", gap: 4, px: 4, pt: 3, pb: SAFE_BOTTOM, borderTopRadius: "3xl", bg: `${colors.surfaceRaised}${GLASS_ALPHA}`, backdropFilter: BLUR, position: sticky ? "sticky" : "static", bottom: sticky ? 0 : undefined, zIndex: sticky ? zIndex : undefined, boxShadow: sticky ? `0 -12px 32px -16px ${(0, scrim_1.overlayScrim)(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xl", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, "data-testid": "bag-bar-total", children: (0, price_1.formatPrice)(total, { currency, locale }) })] }), note && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", onClick: onViewDetails, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", fontSize: "xs", fontWeight: 600, color: colors.accentText, borderRadius: "sm", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: {
                             ...(0, focusRing_styles_1.focusVisibleStyles)(colors),
                             ...(0, motion_2.reducedMotionSx)(),
                             "&::before": { content: '""', position: "absolute", inset: "-0.75rem -0.5rem" },

package/dist/Components/Button/Button.styles.js

@@ -5,18 +5,35 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const motion_1 = require("../../Theme/chakra/motion");
 const primitives_1 = require("../../Theme/tokens/primitives");
+const BUTTON_TRANSITION = [
+    (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
+    (0, primitives_1.transitionFor)(["transform"], "fast", "out"),
+].join(", ");
+const PRESS = {
+    [motion_1.MOTION_OK_QUERY]: {
+        "&:active:not(:disabled):not([data-loading]):not([aria-disabled=true])": {
+            transform: `scale(${primitives_1.MOTION_PRESS_SCALE})`,
+        },
+    },
+};
 const controlSize = (size) => {
     const { height, fontSize, paddingX } = primitives_1.BUTTON_SIZES[size];
     return { h: height, minW: height, fontSize, px: paddingX };
 };
 // NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.
 const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnCanvas)(theme.colors[colorScheme], theme.colors.backgroundColor.main);
-// NOTE: [50] alone measured ~1.04 (invisible) in both modes — opacity ramp fixes it where available.
+// NOTE: [50] alone measured ~1.04 (invisible) in both modes — gray borrows the row-state steps.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
-    return "opacity" in scale ? scale.opacity[step] : scale[50];
+    if ("opacity" in scale)
+        return scale.opacity[step];
+    if (colorScheme !== "gray")
+        return scale[50];
+    const rows = (0, rowStates_1.listRowBackgrounds)(theme.colors);
+    return step === 16 ? rows.active : rows.selectedActive;
 };
 const swatch = (theme, colorScheme) => theme.colors[colorScheme];
 const buttonSolidRung = (theme, colorScheme) => (0, filledSurface_1.solidFillRung)(swatch(theme, colorScheme), theme.colors.white);
@@ -27,6 +44,21 @@ const darkerFill = (theme, colorScheme, step) => {
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => (0, filledSurface_1.labelOnFill)(fill, theme.colors.white, theme.colors.black);
+const solidSurface = (theme, colorScheme) => {
+    if (colorScheme === "primary")
+        return (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
+    const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
+    const hoverFill = darkerFill(theme, colorScheme, 0);
+    const activeFill = darkerFill(theme, colorScheme, 1);
+    return {
+        fill,
+        color: labelFor(theme, fill),
+        hoverFill,
+        hoverColor: labelFor(theme, hoverFill),
+        activeFill,
+        activeColor: labelFor(theme, activeFill),
+    };
+};
 // NOTE: replaces Chakra's stock ring, which failed WCAG 1.4.11 on every brand — gated by focusRing.test.ts.
 const focusRing = (theme) => (0, focusRing_styles_1.focusVisibleStyles)(theme.colors);
 exports.Button = {
@@ -35,7 +67,7 @@ exports.Button = {
     baseStyle: ({ theme }) => ({
         borderRadius: "lg",
         fontWeight: 500,
-        transition: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
+        transition: BUTTON_TRANSITION,
         ...(0, motion_1.reducedMotionSx)(),
         _disabled: {
             opacity: 0.6,
@@ -45,35 +77,32 @@ exports.Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
-            const hoverFill = darkerFill(theme, colorScheme, 0);
-            const activeFill = darkerFill(theme, colorScheme, 1);
-            const hoverLabel = labelFor(theme, hoverFill);
+            const s = solidSurface(theme, colorScheme);
             return {
-                bg: fill,
-                color: labelFor(theme, fill),
+                bg: s.fill,
+                color: s.color,
                 _hover: {
-                    bg: hoverFill,
-                    color: hoverLabel,
-                    boxShadow: "sm",
+                    bg: s.hoverFill,
+                    color: s.hoverColor,
                     _disabled: {
-                        bg: hoverFill, // keep hover color on loading
-                        color: hoverLabel,
+                        bg: s.hoverFill, // keep hover color on loading
+                        color: s.hoverColor,
                     },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: s.activeFill,
+                    color: s.activeColor,
                     boxShadow: "none",
                 },
                 _loading: {
-                    bg: hoverFill, // keep hover color while loading
-                    color: hoverLabel,
+                    bg: s.hoverFill, // keep hover color while loading
+                    color: s.hoverColor,
                     _hover: {
-                        bg: hoverFill,
-                        color: hoverLabel,
+                        bg: s.hoverFill,
+                        color: s.hoverColor,
                     },
                 },
+                ...PRESS,
                 ...focusRing(theme),
             };
         },
@@ -94,6 +123,7 @@ exports.Button = {
                 _loading: {
                     color: ink,
                 },
+                ...PRESS,
                 ...focusRing(theme),
             };
         },
@@ -107,6 +137,7 @@ exports.Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...PRESS,
             ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
@@ -143,7 +174,6 @@ exports.Button = {
                 _hover: {
                     bgImage: bg,
                     filter: "brightness(0.92)",
-                    boxShadow: "md",
                     _disabled: { bgImage: bg, filter: "none" },
                 },
                 _active: {

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -73,7 +73,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                     px: "0.625rem",
                                     py: "0.5rem",
                                     borderRadius: "lg",
-                                    fontSize: "13px",
+                                    fontSize: "xs-plus",
                                     fontWeight: 500,
                                     color: theme.colors.text[700],
                                     transition: "background 0.12s",

package/dist/Components/CalendarGrid/CalendarGrid.js

@@ -52,7 +52,7 @@ const EventChip = ({ event, colors, surface, onEventClick, segment }) => {
         alignItems: "center",
         h: CHIP_HEIGHT,
         px: 2,
-        fontSize: "0.75rem",
+        fontSize: "xs",
         fontWeight: 500,
         lineHeight: 1,
         textAlign: "left",
@@ -154,7 +154,7 @@ const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventC
             body = ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 1, mt: 2, children: dayEvents.map((event) => ((0, jsx_runtime_1.jsx)(EventChip, { event: event, colors: colors, surface: surface, onEventClick: onEventClick }, event.id))) }));
         }
         else {
-            body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", mt: 1, h: `calc(${layout.visibleLanes} * ${LANE_HEIGHT})`, children: ownSegments.map((s) => ((0, jsx_runtime_1.jsx)(EventChip, { event: s.event, colors: colors, surface: surface, onEventClick: onEventClick, segment: s }, s.event.id))) }), hidden > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": text.moreLabel(hidden, (0, calendarMath_1.formatFullDate)(day, locale)), onClick: () => drillIntoDay(day), px: 1, fontSize: "0.75rem", fontWeight: 600, color: colors.header[900], textAlign: "left", textDecoration: "underline", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: text.more(hidden) })) : null] }));
+            body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", mt: 1, h: `calc(${layout.visibleLanes} * ${LANE_HEIGHT})`, children: ownSegments.map((s) => ((0, jsx_runtime_1.jsx)(EventChip, { event: s.event, colors: colors, surface: surface, onEventClick: onEventClick, segment: s }, s.event.id))) }), hidden > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": text.moreLabel(hidden, (0, calendarMath_1.formatFullDate)(day, locale)), onClick: () => drillIntoDay(day), px: 1, fontSize: "xs", fontWeight: 600, color: colors.header[900], textAlign: "left", textDecoration: "underline", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: text.more(hidden) })) : null] }));
         }
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { role: "gridcell", ref: (el) => {
                 if (el)
@@ -162,10 +162,10 @@ const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventC
                 else
                     cellRefs.current.delete(key);
             }, "data-date": key, "aria-label": label, "aria-current": isToday ? "date" : undefined, tabIndex: active ? 0 : -1, onFocus: () => setFocusedKey(key), onKeyDown: (e) => handleCellKeyDown(e, day), position: "relative", minH: MIN_CELL_HEIGHT[view], p: 1, bg: surface, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, outline: "none", _focusVisible: {
-                boxShadow: `inset 0 0 0 2px ${colors.focusRing.halo}, inset 0 0 0 4px ${colors.focusRing.ring}`,
-            }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "0.8125rem", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), body] }, key));
+                boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors),
+            }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "xs-plus", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), body] }, key));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", wrap: "wrap", gap: 2, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [onDateChange ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: text.today, size: "sm", variant: "outline", onClick: () => onDateChange((0, calendarMath_1.startOfDay)(new Date())) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.previous, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, -1)) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.next, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, 1)) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", fontSize: "1rem", fontWeight: 600, color: colors.header[900], children: title })] }), onViewChange ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "group", "aria-label": text[view], gap: 1, children: VIEWS.map((v) => ((0, jsx_runtime_1.jsx)(Button_1.default, { label: text[v], size: "sm", variant: v === view ? "solid" : "outline", "aria-pressed": v === view, onClick: () => onViewChange(v) }, v))) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "grid", "aria-label": title, "aria-busy": isLoading || undefined, "data-view": view, minW: view === "day" ? undefined : "42rem", borderTop: "1px solid", borderLeft: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Grid, { role: "row", templateColumns: template, children: headerDays.map((i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "columnheader", "aria-label": weekdayLong[i], px: 2, py: 1, fontSize: "0.75rem", fontWeight: 600, color: colors.textMuted, bg: colors.backgroundColor.main, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, children: weekdayShort[i] }, i))) }), weeks.map((week, weekIndex) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", wrap: "wrap", gap: 2, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [onDateChange ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: text.today, size: "sm", variant: "outline", onClick: () => onDateChange((0, calendarMath_1.startOfDay)(new Date())) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.previous, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, -1)) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.next, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, 1)) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title })] }), onViewChange ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "group", "aria-label": text[view], gap: 1, children: VIEWS.map((v) => ((0, jsx_runtime_1.jsx)(Button_1.default, { label: text[v], size: "sm", variant: v === view ? "solid" : "outline", "aria-pressed": v === view, onClick: () => onViewChange(v) }, v))) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "grid", "aria-label": title, "aria-busy": isLoading || undefined, "data-view": view, minW: view === "day" ? undefined : "42rem", borderTop: "1px solid", borderLeft: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Grid, { role: "row", templateColumns: template, children: headerDays.map((i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "columnheader", "aria-label": weekdayLong[i], px: 2, py: 1, fontSize: "xs", fontWeight: 600, color: colors.textMuted, bg: colors.backgroundColor.main, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, children: weekdayShort[i] }, i))) }), weeks.map((week, weekIndex) => {
                             const layout = (0, calendarMath_1.layoutWeek)(week, shownEvents, maxLanes);
                             return ((0, jsx_runtime_1.jsx)(react_2.Grid, { role: "row", templateColumns: template, children: week.map((day, col) => renderCell(day, col, weekIndex, layout)) }, (0, calendarMath_1.dayKey)(week[0])));
                         })] }) })] }));

package/dist/Components/CalendarGrid/calendarMath.js

@@ -156,23 +156,35 @@ const moveFocus = (view, d, key, weekStartsOn) => {
 };
 exports.moveFocus = moveFocus;
 const probe = (weekday) => new Date(2024, 0, 7 + weekday);
+const dateFormatters = new Map();
+const dateFormatter = (locale, options) => {
+    const key = JSON.stringify([locale, options]);
+    let formatter = dateFormatters.get(key);
+    if (!formatter) {
+        formatter = new Intl.DateTimeFormat(locale, options);
+        dateFormatters.set(key, formatter);
+    }
+    return formatter;
+};
+const FULL_DATE = { weekday: "long", day: "numeric", month: "long", year: "numeric" };
+const MONTH_TITLE = { month: "long", year: "numeric" };
+const WEEK_RANGE = { day: "numeric", month: "short", year: "numeric" };
 const weekdayLabels = (locale, weekStartsOn, style = "short") => {
-    const fmt = new Intl.DateTimeFormat(locale, { weekday: style });
+    const fmt = dateFormatter(locale, { weekday: style });
     return Array.from({ length: 7 }, (_, i) => fmt.format(probe((i + weekStartsOn) % 7)));
 };
 exports.weekdayLabels = weekdayLabels;
 const formatTitle = (view, d, locale, weekStartsOn) => {
     if (view === "month")
-        return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(d);
+        return dateFormatter(locale, MONTH_TITLE).format(d);
     if (view === "day")
-        return new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(d);
+        return dateFormatter(locale, FULL_DATE).format(d);
     const days = (0, exports.weekDays)(d, weekStartsOn);
-    const opts = { day: "numeric", month: "short", year: "numeric" };
-    const fmt = new Intl.DateTimeFormat(locale, opts);
+    const fmt = dateFormatter(locale, WEEK_RANGE);
     return typeof fmt.formatRange === "function"
         ? fmt.formatRange(days[0], days[6])
         : `${fmt.format(days[0])} - ${fmt.format(days[6])}`;
 };
 exports.formatTitle = formatTitle;
-const formatFullDate = (d, locale) => new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(d);
+const formatFullDate = (d, locale) => dateFormatter(locale, FULL_DATE).format(d);
 exports.formatFullDate = formatFullDate;

package/dist/Components/Card/CardProps.d.ts

@@ -8,14 +8,14 @@ type DeadDividerProps = {
 };
 /** Padding steps: "none" flush, "2xs" 0.375rem, "xs" 0.75rem all round, "sm" / "md" / "lg" match `size`. */
 export type CardPadding = "none" | "2xs" | "xs" | "sm" | "md" | "lg";
-/** Themed outline surface with optional header/footer slots; children and direction/align/justify apply to the body. */
+/** Themed card surface (outline rule or borderless elevated) with optional header/footer slots; direction/align/justify apply to the body. */
 export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" | "color" | "colorScheme" | "direction" | "align" | "justify" | "padding"> & DeadDividerProps & {
     /** Rendered in CardHeader (semibold header ink) only when truthy. */
     header?: React.ReactNode;
     /** Rendered in CardFooter only when truthy. */
     footer?: React.ReactNode;
     children: React.ReactNode;
-    /** Defaults to "outline", the only token-themed one; others fall back to Chakra's stock look. */
+    /** "elevated" (default): borderless, lifted by `shadows.card`. "outline": 1px rule, no shadow, for tables and row lists. */
     variant?: "elevated" | "outline" | "filled" | "unstyled";
     /** Padding scale for header/body/footer; defaults to "md". */
     size?: "sm" | "md" | "lg";

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -10,6 +10,7 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../../Theme/tokens/builders/filledSurface");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 const motion_2 = require("../../../Theme/chakra/motion");
 const Button_1 = __importDefault(require("../../Button/Button"));
 const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
@@ -26,7 +27,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (isActive) {
         return withOnButtonColor({
             badgeText: "Active Plan",
-            badgeColor: `0.063rem solid ${theme.colors.green[500]}`,
+            badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
             buttonScale: "green",
             buttonColor50: theme.colors.green[50],
@@ -36,7 +37,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (isNextUpgrade) {
         return withOnButtonColor({
             badgeText: "Upgrade Your Plan",
-            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
@@ -46,7 +47,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (popular) {
         return withOnButtonColor({
             badgeText: "Most Popular",
-            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
@@ -55,7 +56,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     }
     return withOnButtonColor({
         badgeText: "",
-        badgeColor: `0.063rem solid ${theme.colors.boxborder[200]}`,
+        badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`,
         buttonColor: theme.colors.primary[500],
         buttonScale: "primary",
         buttonColor50: theme.colors.primary[50],
@@ -76,7 +77,7 @@ const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCyc
             // 🔹 Skeleton Loader Layout
             (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 2, spacing: "2" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "lg" }), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
             // 🔹 Actual Card Content
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: iconInk, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.header[900], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.header[900], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: iconInk, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.header[900], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.header[900], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "2xl", children: "\u20B9" }), billingCycle === "yearly"
                                         ? plan.yearlyPrice
                                         : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.semanticText.success, mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.textMuted, mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, colorScheme: colorScheme, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.semanticText.success, mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
 };

package/dist/Components/CartItem/CartItem.js

@@ -9,6 +9,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const price_1 = require("../../Utils/price");
 const Button_1 = __importDefault(require("../Button/Button"));
@@ -55,6 +56,6 @@ const CartItem = ({ title, brand, href, onTitleClick, image, imageAlt = "", axes
             : { as: "span" };
     const linked = !!href || !!onTitleClick;
     const stepper = ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: "sm", variant: "soft", value: quantity, min: minQuantity, max: maxQuantity, removable: !!onRemove, onRemove: onRemove, onValueChange: onQuantityChange, itemLabel: title }));
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "flex-start", "data-testid": testId, "data-unavailable": unavailable || undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, w: thumb.w, h: thumb.h, borderRadius: thumb.radius, overflow: "hidden", bg: colors.background[100], opacity: unavailable ? DIMMED_MEDIA : 1, children: image && (0, jsx_runtime_1.jsx)(react_1.Box, { as: "img", src: image, alt: imageAlt, w: "100%", h: "100%", objectFit: "cover", display: "block" }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: 1.5, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 0.5, minW: 0, children: [brand && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.textMuted, noOfLines: 1, children: brand })), (0, jsx_runtime_1.jsx)(react_1.Text, { ...titleProps, display: "block", textAlign: "left", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: titleInk, noOfLines: 2, borderRadius: "sm", cursor: linked ? "pointer" : undefined, transition: (0, motion_1.transitionFor)(["color"]), _hover: linked ? { textDecoration: "underline" } : undefined, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: title }), summary && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: summary }))] }), unavailable ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 0.5, children: [(0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "out-of-stock", message: copy.outOfStock, size: "sm" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: copy.notIncluded })] })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-end", justify: "space-between", gap: 3, wrap: "wrap", children: [compact ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: copy.quantity(quantity) })) : (stepper), (0, jsx_runtime_1.jsx)(react_1.Box, { ml: "auto", children: (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: compact ? "sm" : "md", align: "end", price: lineTotal, mrp: lineMrp, taxNote: quantity > 1 ? copy.each((0, price_1.formatPrice)(price, fmt)) : undefined, ...fmt }) })] })), !unavailable && !compact && stock && stock !== "in-stock" && ((0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: stock, count: stockCount, message: stockMessage, size: "sm" })), !unavailable && deliveryBy && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Truck, { size: 13, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", lineHeight: 1.4, children: copy.delivery(deliveryBy) })] })), !compact && (onRemove || (onMoveToWishlist && !unavailable)) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 1, ml: -3, mt: 0.5, children: [onMoveToWishlist && !unavailable && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onMoveToWishlist, "aria-label": `${copy.moveToWishlist}: ${title}`, children: copy.moveToWishlist })), onRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove}: ${title}`, children: copy.remove }))] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "flex-start", "data-testid": testId, "data-unavailable": unavailable || undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, w: thumb.w, h: thumb.h, borderRadius: thumb.radius, overflow: "hidden", bg: colors.background[100], opacity: unavailable ? DIMMED_MEDIA : 1, children: image && (0, jsx_runtime_1.jsx)(react_1.Box, { as: "img", src: image, alt: imageAlt, w: "100%", h: "100%", objectFit: "cover", display: "block" }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: 1.5, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 0.5, minW: 0, children: [brand && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.textMuted, noOfLines: 1, children: brand })), (0, jsx_runtime_1.jsx)(react_1.Text, { ...titleProps, display: "block", textAlign: "left", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: titleInk, noOfLines: 2, borderRadius: "sm", cursor: linked ? "pointer" : undefined, transition: (0, motion_1.transitionFor)(["color"]), _hover: linked ? { textDecoration: "underline" } : undefined, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: title }), summary && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: summary }))] }), unavailable ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 0.5, children: [(0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "out-of-stock", message: copy.outOfStock, size: "sm" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: copy.notIncluded })] })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-end", justify: "space-between", gap: 3, wrap: "wrap", children: [compact ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: copy.quantity(quantity) })) : (stepper), (0, jsx_runtime_1.jsx)(react_1.Box, { ml: "auto", children: (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: compact ? "sm" : "md", align: "end", price: lineTotal, mrp: lineMrp, taxNote: quantity > 1 ? copy.each((0, price_1.formatPrice)(price, fmt)) : undefined, ...fmt }) })] })), !unavailable && !compact && stock && stock !== "in-stock" && ((0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: stock, count: stockCount, message: stockMessage, size: "sm" })), !unavailable && deliveryBy && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Truck, { size: 13, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", lineHeight: 1.4, children: copy.delivery(deliveryBy) })] })), !compact && (onRemove || (onMoveToWishlist && !unavailable)) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 1, ml: -3, mt: 0.5, children: [onMoveToWishlist && !unavailable && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onMoveToWishlist, "aria-label": `${copy.moveToWishlist}: ${title}`, children: copy.moveToWishlist })), onRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove}: ${title}`, children: copy.remove }))] }))] })] }));
 };
 exports.default = CartItem;

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,18 @@
-import { CheckboxProps } from "./CheckboxProps";
-/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label. `error` marks it invalid and links the message via aria-describedby. */
-export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, id, variant, ...aria }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+/** Native checkbox with optional label (else aria-label); `error` links its message via aria-describedby; `ref` is the `<input>`. */
+declare const CheckBox: React.ForwardRefExoticComponent<Pick<import("@chakra-ui/react").CheckboxProps, "size" | "defaultChecked" | "id" | "aria-describedby" | "aria-label" | "aria-labelledby" | "onChange" | "onClick" | "sx" | "isDisabled" | "value" | "spacing" | "isInvalid" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate"> & {
+    label?: string;
+    labelFontSize?: string;
+    showLabelTooltip?: boolean;
+    labelTooltip?: string;
+    labelClampLines?: number;
+    width?: string | number;
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    size?: "sm" | "md" | "lg";
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    labelSx?: React.CSSProperties;
+} & React.RefAttributes<HTMLInputElement>>;
+export default CheckBox;

package/dist/Components/Checkbox/Checkbox.js

@@ -3,15 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = CheckBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
 const useFieldIds_1 = require("../Common/useFieldIds");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label. `error` marks it invalid and links the message via aria-describedby. */
-function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, id, variant, ...aria }) {
+/** Native checkbox with optional label (else aria-label); `error` links its message via aria-describedby; `ref` is the `<input>`. */
+const CheckBox = (0, react_1.forwardRef)(function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, id, variant, ...aria }, ref) {
     void variant;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
@@ -30,8 +30,10 @@ function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelC
             ...labelSx,
         }
         : { ...labelSx };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { id: ids.inputId, "aria-describedby": ids.describedBy, ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid || error, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], display: "flex", alignItems: "center", sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { ref: ref, id: ids.inputId, "aria-describedby": ids.describedBy, ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid || error, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], display: "flex", alignItems: "center", sx: {
                     ...sx,
                     ".chakra-checkbox__control": { w: controlSize, h: controlSize },
-                }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
-}
+                }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "xs", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+CheckBox.displayName = "CheckBox";
+exports.default = CheckBox;

package/dist/Components/CheckoutKit/selectable.js

@@ -61,7 +61,7 @@ exports.SelectableGroup = SelectableGroup;
 /** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
 const selectableSurface = (colors, { selected, disabled, interactive, ringed }) => ({
     bg: colors.background[100],
-    borderRadius: "1rem",
+    borderRadius: "2xl",
     boxShadow: selected ? `inset 0 0 0 2px ${colors.header[900]}` : "none",
     opacity: disabled ? 0.6 : 1,
     transition: (0, motion_1.transitionFor)(["background-color", "box-shadow"]),

package/dist/Components/ChoiceCard/ChoiceCard.d.ts

@@ -0,0 +1,3 @@
+import type { ChoiceCardProps } from "./ChoiceCardProps";
+declare const ChoiceCard: ({ value, label, description, icon, disabled, "data-testid": testId }: ChoiceCardProps) => import("react/jsx-runtime").JSX.Element;
+export default ChoiceCard;

package/dist/Components/ChoiceCard/ChoiceCard.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const selectable_1 = require("../CheckoutKit/selectable");
+const ChoiceCard = ({ value, label, description, icon, disabled = false, "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const labelId = `${uid}-label`;
+    const descriptionId = `${uid}-description`;
+    const { isSelected, interactive, inGroup, ringed, props } = (0, selectable_1.useSelectable)({ value, disabled });
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && inGroup, disabled, interactive, ringed }), children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { ...props, "data-radio": true, "aria-disabled": inGroup && disabled ? true : undefined, "aria-labelledby": props.role ? labelId : undefined, "aria-describedby": props.role && description ? descriptionId : undefined, align: "center", gap: 3, p: 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", children: [inGroup && (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }), icon && ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", "aria-hidden": true, align: "center", justify: "center", boxSize: 10, flexShrink: 0, borderRadius: "xl", bg: colors.background[50], color: colors.header[900], children: icon })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: labelId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: label }), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: descriptionId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: description }))] })] }) }));
+};
+exports.default = ChoiceCard;

package/dist/Components/ChoiceCard/ChoiceCardGroup.d.ts

@@ -0,0 +1,3 @@
+import type { ChoiceCardGroupProps } from "./ChoiceCardProps";
+declare const ChoiceCardGroup: (props: ChoiceCardGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default ChoiceCardGroup;

package/dist/Components/ChoiceCard/ChoiceCardGroup.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const selectable_1 = require("../CheckoutKit/selectable");
+const ChoiceCardGroup = (props) => (0, jsx_runtime_1.jsx)(selectable_1.SelectableGroup, { ...props });
+exports.default = ChoiceCardGroup;

package/dist/Components/ChoiceCard/ChoiceCardProps.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+/** One option in a `ChoiceCardGroup`: a radio card with a label, optional description and leading icon. */
+export interface ChoiceCardProps {
+    /** Identifies the card; becomes the group's value when chosen. */
+    value: string;
+    /** Visible title and the radio's accessible name. */
+    label: ReactNode;
+    /** Muted line under the label, announced as the radio's description. */
+    description?: ReactNode;
+    /** Leading icon in a 40px well, hidden from assistive tech. */
+    icon?: ReactNode;
+    /** Dims the card and skips it for clicks, arrow keys and the tab stop. */
+    disabled?: boolean;
+    "data-testid"?: string;
+}
+/** Radiogroup of `ChoiceCard`s: one tab stop; arrows, Home and End move focus and selection together. */
+export interface ChoiceCardGroupProps {
+    value?: string;
+    /** Seeds an uncontrolled selection; ignored once `value` is passed. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Direct `ChoiceCard` children; a wrapper component hides their `value` from the tab stop. */
+    children: ReactNode;
+    /** Name the group with this or `aria-labelledby`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/ChoiceCard/ChoiceCardProps.js

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