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

package/dist/esm/Components/BagBar/BagBar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronUp } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+const DEFAULT_LABELS = { region: "Bag total", total: "Total", viewDetails: "View price details", cta: "Place order" };
+const GLASS_ALPHA = Math.round(0.86 * 255).toString(16);
+const BLUR = "blur(20px) saturate(180%)";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
+/** Glass bar for the bag and checkout: total and price-details link left, the single primary action right. */
+const BagBar = ({ total, note, onViewDetails, ctaLabel, onCta, ctaDisabled = false, ctaLoading = false, position = "static", zIndex = 10, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const sticky = position === "bottom";
+    return (_jsxs(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 ${overlayScrim(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [_jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), _jsx(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: formatPrice(total, { currency, locale }) })] }), note && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && (_jsxs(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: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: {
+                            ...focusVisibleStyles(colors),
+                            ...reducedMotionSx(),
+                            "&::before": { content: '""', position: "absolute", inset: "-0.75rem -0.5rem" },
+                        }, children: [copy.viewDetails, _jsx(ChevronUp, { size: 14, "aria-hidden": true })] }))] }), _jsx(Button, { size: "lg", onClick: onCta, isDisabled: ctaDisabled, isLoading: ctaLoading, flexShrink: 0, children: ctaLabel !== null && ctaLabel !== void 0 ? ctaLabel : copy.cta })] }));
+};
+export default BagBar;

package/dist/esm/Components/BagBar/BagBarProps.js

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

package/dist/esm/Components/CartItem/CartItem.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Truck } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+import PriceBlock from "../PriceBlock/PriceBlock.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import StockStatus from "../StockStatus/StockStatus.js";
+import { summariseOptions } from "./cartItemOptions.js";
+const DEFAULT_LABELS = {
+    moveToWishlist: "Move to wishlist",
+    remove: "Remove",
+    outOfStock: "Out of stock",
+    notIncluded: "Not included in your total",
+    quantity: (quantity) => `Qty ${quantity}`,
+    each: (price) => `${price} each`,
+    delivery: (date) => `Delivery by ${date}`,
+};
+const THUMB = {
+    row: { w: "5rem", h: "6.25rem", radius: "0.75rem" },
+    compact: { w: "3.5rem", h: "4.375rem", radius: "0.625rem" },
+};
+const DIMMED_MEDIA = 0.45;
+const CartItemSkeleton = ({ layout }) => {
+    const thumb = THUMB[layout];
+    return (_jsxs(Flex, { gap: 3, align: "flex-start", "aria-busy": "true", "data-testid": "cart-item-skeleton", children: [_jsx(Skeletons, { type: "skeleton", height: thumb.h, width: thumb.w, borderRadius: thumb.radius }), _jsxs(Flex, { direction: "column", gap: 2, flex: 1, minW: 0, children: [_jsx(Skeletons, { type: "skeleton", height: 3, width: "35%" }), _jsx(Skeletons, { type: "skeleton", height: 4, width: "80%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "45%" }), layout === "row" && _jsx(Skeletons, { type: "skeleton", height: 10, width: "100%", borderRadius: "full" })] })] }));
+};
+/** One bag line: tonal thumbnail, linked title, chosen options, line total with struck MRP, stepper and calm text actions. */
+const CartItem = ({ title, brand, href, onTitleClick, image, imageAlt = "", axes, selection, optionsSummary, price, mrp, quantity, onQuantityChange, minQuantity = 1, maxQuantity, onRemove, onMoveToWishlist, stock, stockCount, stockMessage, deliveryBy, unavailable = false, layout = "row", isLoading = false, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const compact = layout === "compact";
+    const thumb = THUMB[layout];
+    const fmt = { currency, locale };
+    if (isLoading)
+        return _jsx(CartItemSkeleton, { layout: layout });
+    const summary = optionsSummary !== null && optionsSummary !== void 0 ? optionsSummary : summariseOptions(axes, selection);
+    const lineTotal = price * quantity;
+    const lineMrp = mrp !== undefined ? mrp * quantity : undefined;
+    const titleInk = unavailable ? colors.textMuted : colors.header[900];
+    const titleProps = href
+        ? { as: "a", href }
+        : onTitleClick
+            ? { as: "button", type: "button", onClick: onTitleClick }
+            : { as: "span" };
+    const linked = !!href || !!onTitleClick;
+    const stepper = (_jsx(QuantityStepper, { size: "sm", variant: "soft", value: quantity, min: minQuantity, max: maxQuantity, removable: !!onRemove, onRemove: onRemove, onValueChange: onQuantityChange, itemLabel: title }));
+    return (_jsxs(Flex, { gap: 3, align: "flex-start", "data-testid": testId, "data-unavailable": unavailable || undefined, children: [_jsx(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 && _jsx(Box, { as: "img", src: image, alt: imageAlt, w: "100%", h: "100%", objectFit: "cover", display: "block" }) }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: 1.5, children: [_jsxs(Flex, { direction: "column", gap: 0.5, minW: 0, children: [brand && (_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.textMuted, noOfLines: 1, children: brand })), _jsx(Text, { ...titleProps, display: "block", textAlign: "left", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: titleInk, noOfLines: 2, borderRadius: "sm", cursor: linked ? "pointer" : undefined, transition: transitionFor(["color"]), _hover: linked ? { textDecoration: "underline" } : undefined, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: title }), summary && (_jsx(Text, { as: "span", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: summary }))] }), unavailable ? (_jsxs(Flex, { direction: "column", gap: 0.5, children: [_jsx(StockStatus, { status: "out-of-stock", message: copy.outOfStock, size: "sm" }), _jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: copy.notIncluded })] })) : (_jsxs(Flex, { align: "flex-end", justify: "space-between", gap: 3, wrap: "wrap", children: [compact ? (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: copy.quantity(quantity) })) : (stepper), _jsx(Box, { ml: "auto", children: _jsx(PriceBlock, { size: compact ? "sm" : "md", align: "end", price: lineTotal, mrp: lineMrp, taxNote: quantity > 1 ? copy.each(formatPrice(price, fmt)) : undefined, ...fmt }) })] })), !unavailable && !compact && stock && stock !== "in-stock" && (_jsx(StockStatus, { status: stock, count: stockCount, message: stockMessage, size: "sm" })), !unavailable && deliveryBy && (_jsxs(Flex, { align: "center", gap: 1.5, color: colors.textMuted, children: [_jsx(Truck, { size: 13, "aria-hidden": true }), _jsx(Text, { as: "span", fontSize: "xs", lineHeight: 1.4, children: copy.delivery(deliveryBy) })] })), !compact && (onRemove || (onMoveToWishlist && !unavailable)) && (_jsxs(Flex, { gap: 1, ml: -3, mt: 0.5, children: [onMoveToWishlist && !unavailable && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onMoveToWishlist, "aria-label": `${copy.moveToWishlist}: ${title}`, children: copy.moveToWishlist })), onRemove && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove}: ${title}`, children: copy.remove }))] }))] })] }));
+};
+export default CartItem;

package/dist/esm/Components/CartItem/CartItemProps.js

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

package/dist/esm/Components/CartItem/cartItemOptions.js

@@ -0,0 +1,9 @@
+/** "Indigo Wash · M" from the chosen option labels, in axis order; axes with no pick are skipped. */
+export const summariseOptions = (axes, selection) => {
+    if (!axes || !selection)
+        return "";
+    return axes
+        .map((axis) => { var _a; return (_a = axis.values.find((value) => value.id === selection[axis.id])) === null || _a === void 0 ? void 0 : _a.label; })
+        .filter((label) => !!label)
+        .join(" · ");
+};

package/dist/esm/Components/CheckoutKit/selectable.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useMemo, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+const GroupContext = createContext(null);
+export const useSelectableGroup = () => useContext(GroupContext);
+const firstEnabledValue = (children) => {
+    for (const child of Children.toArray(children)) {
+        if (!isValidElement(child))
+            continue;
+        const { value, disabled } = child.props;
+        if (typeof value === "string" && !disabled)
+            return value;
+    }
+    return undefined;
+};
+const STEP = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+/** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
+export const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }) => {
+    const [inner, setInner] = useState(defaultValue);
+    const current = value !== null && value !== void 0 ? value : inner;
+    const state = useMemo(() => ({
+        value: current,
+        tabStop: current !== null && current !== void 0 ? current : firstEnabledValue(children),
+        select: (next) => {
+            if (value === undefined)
+                setInner(next);
+            if (next !== current)
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+        },
+    }), [current, children, value, onValueChange]);
+    const onKeyDown = (event) => {
+        const edge = event.key === "Home" ? 0 : event.key === "End" ? -1 : null;
+        const step = STEP[event.key];
+        if (edge === null && step === undefined)
+            return;
+        const radios = Array.from(event.currentTarget.querySelectorAll('[role="radio"]:not([aria-disabled="true"])'));
+        const at = radios.indexOf(document.activeElement);
+        if (at < 0)
+            return;
+        event.preventDefault();
+        const index = edge === null ? (at + step + radios.length) % radios.length : edge < 0 ? radios.length - 1 : 0;
+        const target = radios[index];
+        target.focus();
+        const next = target.getAttribute("data-value");
+        if (next !== null)
+            state.select(next);
+    };
+    return (_jsx(GroupContext.Provider, { value: state, children: _jsx(Flex, { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: "column", gap: gap, onKeyDown: onKeyDown, "data-testid": testId, children: children }) }));
+};
+/** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
+export const selectableSurface = (colors, { selected, disabled, interactive, ringed }) => ({
+    bg: colors.background[100],
+    borderRadius: "1rem",
+    boxShadow: selected ? `inset 0 0 0 2px ${colors.header[900]}` : "none",
+    opacity: disabled ? 0.6 : 1,
+    transition: transitionFor(["background-color", "box-shadow"]),
+    _hover: interactive && !selected && !disabled ? { bg: colors.background[200] } : undefined,
+    sx: { ...(ringed ? focusVisibleRing(colors) : {}), ...reducedMotionSx() },
+});
+/** The 20px circle that carries selection state beside the text. */
+export const RadioIndicator = ({ selected }) => {
+    const { colors } = useCustomTheme();
+    const fill = colors.header[900];
+    return (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "1.25rem", flexShrink: 0, borderRadius: "full", bg: selected ? fill : "transparent", color: onFilled(fill, colors.white, colors.black), boxShadow: selected ? "none" : `inset 0 0 0 1.5px ${colors.textMuted}`, transition: transitionFor(["background-color", "box-shadow"]), sx: reducedMotionSx(), children: selected && _jsx(Check, { size: 12, strokeWidth: 3 }) }));
+};
+/** Radio inside a group, toggle button when only `onSelect` is given, inert otherwise. */
+export const useSelectable = ({ value, selected, disabled, onSelect, }) => {
+    const group = useSelectableGroup();
+    const [ringed, setRinged] = useState(false);
+    const inGroup = group !== null && value !== undefined;
+    const isSelected = inGroup ? group.value === value : !!selected;
+    const interactive = (inGroup || !!onSelect) && !disabled;
+    const choose = () => {
+        if (!interactive)
+            return;
+        if (inGroup)
+            group.select(value);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const props = {
+        role: inGroup ? "radio" : onSelect ? "button" : undefined,
+        "aria-checked": inGroup ? isSelected : undefined,
+        "aria-pressed": !inGroup && onSelect ? isSelected : undefined,
+        tabIndex: inGroup ? (group.tabStop === value && !disabled ? 0 : -1) : onSelect && !disabled ? 0 : undefined,
+        "data-value": inGroup ? value : undefined,
+        onClick: choose,
+        onKeyDown: (event) => {
+            if (event.target !== event.currentTarget)
+                return;
+            if (event.key === " " || event.key === "Enter") {
+                event.preventDefault();
+                choose();
+            }
+        },
+        onFocus: (event) => {
+            try {
+                setRinged(event.currentTarget.matches(":focus-visible"));
+            }
+            catch {
+                setRinged(true);
+            }
+        },
+        onBlur: () => setRinged(false),
+    };
+    return { isSelected, interactive, inGroup, ringed, props };
+};

package/dist/esm/Components/Commerce/commerceTypes.js

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

package/dist/esm/Components/Commerce/commerceVariants.js

@@ -0,0 +1,41 @@
+export const LOW_STOCK_THRESHOLD = 5;
+export function stockState(variant, threshold = LOW_STOCK_THRESHOLD) {
+    if (!variant || variant.stock === undefined)
+        return "in-stock";
+    if (variant.stock > 0)
+        return variant.stock <= threshold ? "low-stock" : "in-stock";
+    return variant.backorder ? "backorder" : "out-of-stock";
+}
+const sellable = (variant) => stockState(variant) !== "out-of-stock";
+const matches = (variant, selection) => Object.entries(selection).every(([axisId, valueId]) => variant.options[axisId] === valueId);
+export function selectionComplete(axes, selection) {
+    return axes.every((axis) => selection[axis.id] !== undefined);
+}
+export function findVariant(axes, variants, selection) {
+    if (!selectionComplete(axes, selection))
+        return undefined;
+    return variants.find((variant) => matches(variant, selection));
+}
+/** A value is offered when some sellable variant has it alongside the other axes' current picks. */
+export function isOptionAvailable(variants, selection, axisId, valueId) {
+    const probe = { ...selection, [axisId]: valueId };
+    return variants.some((variant) => sellable(variant) && matches(variant, probe));
+}
+export function remainingStock(variants, selection, axisId, valueId) {
+    const probe = { ...selection, [axisId]: valueId };
+    const hits = variants.filter((variant) => matches(variant, probe) && sellable(variant));
+    if (hits.length === 0 || hits.some((variant) => variant.stock === undefined))
+        return undefined;
+    return hits.reduce((sum, variant) => { var _a; return sum + ((_a = variant.stock) !== null && _a !== void 0 ? _a : 0); }, 0);
+}
+export function priceRange(variants) {
+    if (variants.length === 0)
+        return null;
+    const prices = variants.map((variant) => variant.price);
+    return { min: Math.min(...prices), max: Math.max(...prices) };
+}
+export function firstAvailableSelection(variants) {
+    var _a;
+    const first = (_a = variants.find(sellable)) !== null && _a !== void 0 ? _a : variants[0];
+    return first ? { ...first.options } : {};
+}

package/dist/esm/Components/Commerce/index.js

@@ -0,0 +1,2 @@
+export * from "./commerceTypes.js";
+export * from "./commerceVariants.js";

package/dist/esm/Components/Commerce/useContainerWidth.js

@@ -0,0 +1,21 @@
+import { useLayoutEffect, useState } from "react";
+/** Width of the referenced element, or undefined until measurable (SSR, jsdom, no ResizeObserver). */
+export const useContainerWidth = (ref) => {
+    const [width, setWidth] = useState(undefined);
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return undefined;
+        const measure = () => {
+            const next = node.getBoundingClientRect().width;
+            setWidth(next > 0 ? Math.round(next) : undefined);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return undefined;
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+};

package/dist/esm/Components/CouponField/CouponField.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { BadgeCheck, ChevronDown, Ticket } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+const DEFAULT_LABELS = {
+    prompt: "Have a coupon?",
+    inputLabel: "Coupon code",
+    placeholder: "Enter code",
+    apply: "Apply",
+    remove: "Remove",
+    suggestionsTitle: "Available offers",
+    applied: (code) => `${code} applied`,
+    saved: (amount) => `You saved ${amount}`,
+    applySuggestion: (code) => `Apply ${code}`,
+};
+const normalise = (raw) => raw.replace(/\s+/g, "").toUpperCase();
+/** Coupon entry that stays out of the way: a quiet prompt row, a field with tap-to-apply offers, then an applied state with the saving. */
+const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply, onRemove, suggestions, value, defaultValue = "", onValueChange, expanded, defaultExpanded = false, onExpandedChange, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const panelId = `${uid}-panel`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const [innerText, setInnerText] = useState(defaultValue);
+    const [innerOpen, setInnerOpen] = useState(defaultExpanded);
+    const text = value !== null && value !== void 0 ? value : innerText;
+    const applying = status === "applying";
+    const open = (expanded !== null && expanded !== void 0 ? expanded : innerOpen) || applying || status === "error";
+    const setText = (next) => {
+        if (value === undefined)
+            setInnerText(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    };
+    const setOpen = (next) => {
+        if (expanded === undefined)
+            setInnerOpen(next);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+    };
+    const submit = (code) => {
+        const clean = normalise(code);
+        if (!clean || applying)
+            return;
+        onApply === null || onApply === void 0 ? void 0 : onApply(clean);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Enter" && event.target.tagName === "INPUT") {
+            event.preventDefault();
+            submit(text);
+        }
+    };
+    const success = resolveSoftTone(colors, toneScale(colors, "success"), colors.background[100]);
+    if (status === "applied" && appliedCode) {
+        return (_jsxs(Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "1rem", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [_jsx(Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: _jsx(BadgeCheck, { size: 16, "aria-hidden": true }) }), _jsxs(Box, { flex: 1, minW: 0, role: "status", children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], noOfLines: 1, children: copy.applied(appliedCode) }), savedAmount !== undefined && savedAmount > 0 && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: { fontVariantNumeric: "tabular-nums" }, children: copy.saved(formatPrice(savedAmount, { currency, locale })) }))] }), _jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
+    }
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [_jsxs(Box, { as: "button", type: "button", "aria-expanded": open, "aria-controls": panelId, disabled: applying || status === "error", onClick: () => setOpen(!open), display: "flex", alignItems: "center", gap: 3, w: "100%", minH: "3rem", px: 4, borderRadius: "1rem", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Ticket, { size: 18, "aria-hidden": true }), _jsx(Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), _jsx(Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: transitionFor(["transform"]), sx: reducedMotionSx({ transform: open ? "rotate(180deg)" : "none" }), children: _jsx(ChevronDown, { size: 16 }) })] }), _jsxs(Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [_jsxs(Flex, { gap: 2, align: "flex-start", children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(TextInput, { size: "lg", variant: "filled", "aria-label": copy.inputLabel, placeholder: copy.placeholder, value: text, onChange: (event) => setText(normalise(event.target.value)), error: status === "error", errorMessage: status === "error" ? error : undefined, isDisabled: applying, autoComplete: "off", autoCapitalize: "characters", spellCheck: false }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && (_jsxs(Box, { mt: 4, children: [_jsx(Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), _jsx(Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => (_jsx(Box, { as: "li", children: _jsxs(Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
+                                            setText(s.code);
+                                            submit(s.code);
+                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "0.75rem", bg: colors.background[100], textAlign: "left", transition: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, _disabled: { cursor: "not-allowed", opacity: 0.6 }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Text, { as: "span", flexShrink: 0, px: 2, py: 1, borderRadius: "0.5rem", bg: colors.background[200], fontSize: "xs", fontWeight: 700, letterSpacing: "0.04em", color: colors.header[900], children: s.code }), _jsxs(Box, { as: "span", flex: 1, minW: 0, children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), _jsx(Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), _jsx(VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
+};
+export default CouponField;

package/dist/esm/Components/CouponField/CouponFieldProps.js

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

package/dist/esm/Components/DatePicker/PickerPortal.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Portal } from "@chakra-ui/react";
+import { MotionContext } from "framer-motion";
+// NOTE: mounts on first open, after any open Modal's aria-hidden pass, then opens a render later.
+export const usePickerPortal = (isOpen) => {
+    const [hasMounted, setHasMounted] = useState(false);
+    useEffect(() => {
+        if (isOpen)
+            setHasMounted(true);
+    }, [isOpen]);
+    return { isMounted: isOpen || hasMounted, isPopoverOpen: isOpen && hasMounted };
+};
+// NOTE: detaches from an ancestor Modal's variant tree, which otherwise pins a late-mounted popover hidden.
+const ROOT_MOTION_CONTEXT = {};
+const BodyPortal = ({ children }) => {
+    const bodyRef = useRef(document.body);
+    return (_jsx(Portal, { containerRef: bodyRef, children: _jsx(MotionContext.Provider, { value: ROOT_MOTION_CONTEXT, children: children }) }));
+};
+export const PickerPortal = ({ isMounted, children }) => isMounted ? _jsx(BodyPortal, { children: children }) : null;
+export default PickerPortal;

package/dist/esm/Components/DatePicker/RangeDatePicker.js

@@ -14,13 +14,14 @@ import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes
 import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
 import TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
+import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 // helper to set time on date while preserving date part
 const setTimeFrom = (base, time) => {
     const b = base ? new Date(base) : new Date();
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
-/** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
+/** Two-endpoint range field; `onChange` fires on Apply, outside click or Escape in the calendar — never on a bare day click. */
 export const RangeDatePicker = (props) => {
     var _a, _b, _c, _d;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, dayStates, renderDayContent, } = props;
@@ -32,6 +33,7 @@ export const RangeDatePicker = (props) => {
     const calendarIconWrapperSx = getTextInputIconWrapperSx(sizeKey);
     const { isOpen, onOpen, onClose } = useDisclosure();
     const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const pickerPortal = usePickerPortal(isOpen);
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date range";
     const inputRef = useRef(null);
     const triggerRef = useRef(null);
@@ -179,7 +181,7 @@ export const RangeDatePicker = (props) => {
             return `${format(tempRangeStart, dateFormat)} -`;
         return "";
     }, [inputValue, tempRangeStart, tempRangeEnd, dateFormat]);
-    return (_jsxs(FormControl, { id: ids.inputId, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
+    return (_jsxs(FormControl, { id: ids.inputId, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: requestClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
                                             if (!isOpen)
                                                 handleOpen();
                                         }, onClick: () => {
@@ -193,35 +195,35 @@ export const RangeDatePicker = (props) => {
                                                 else {
                                                     onClose();
                                                 }
-                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
-                                            const [from, to] = p.getRange();
-                                            applyPreset(from, to);
-                                        }, children: p.label }, p.label))) }), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
-                                                        if (!tempRangeStart) {
-                                                            setTempRangeStart(updated);
-                                                            return;
-                                                        }
-                                                        const withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
-                                                        setTempRangeStart(withStartDate);
-                                                    }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeStart })) : (_jsx(TimePickerInput, { value: tempRangeStart, onChange: (t) => {
-                                                        if (!t) {
-                                                            setTempRangeStart(null);
-                                                            return;
-                                                        }
-                                                        setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeStart, size: sizeKey }))] }), _jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: endTimeBaseDate, onChange: (updated) => {
-                                                        if (!tempRangeEnd) {
-                                                            setTempRangeEnd(updated);
-                                                            return;
-                                                        }
-                                                        const withEndDate = new Date(tempRangeEnd.getFullYear(), tempRangeEnd.getMonth(), tempRangeEnd.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
-                                                        setTempRangeEnd(withEndDate);
-                                                    }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeEnd })) : (_jsx(TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
-                                                        if (!t) {
-                                                            setTempRangeEnd(null);
-                                                            return;
-                                                        }
-                                                        setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
+                                                const [from, to] = p.getRange();
+                                                applyPreset(from, to);
+                                            }, children: p.label }, p.label))) }), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
+                                                            if (!tempRangeStart) {
+                                                                setTempRangeStart(updated);
+                                                                return;
+                                                            }
+                                                            const withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
+                                                            setTempRangeStart(withStartDate);
+                                                        }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeStart })) : (_jsx(TimePickerInput, { value: tempRangeStart, onChange: (t) => {
+                                                            if (!t) {
+                                                                setTempRangeStart(null);
+                                                                return;
+                                                            }
+                                                            setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeStart, size: sizeKey }))] }), _jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: endTimeBaseDate, onChange: (updated) => {
+                                                            if (!tempRangeEnd) {
+                                                                setTempRangeEnd(updated);
+                                                                return;
+                                                            }
+                                                            const withEndDate = new Date(tempRangeEnd.getFullYear(), tempRangeEnd.getMonth(), tempRangeEnd.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
+                                                            setTempRangeEnd(withEndDate);
+                                                        }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeEnd })) : (_jsx(TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
+                                                            if (!t) {
+                                                                setTempRangeEnd(null);
+                                                                return;
+                                                            }
+                                                            setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 export default RangeDatePicker;

package/dist/esm/Components/DatePicker/SingleDatePicker.js

@@ -16,6 +16,7 @@ import { formatHasTime, inferPickerTypeFromFormat, resolvePickerAliases } from "
 import TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
 import CalendarPanel from "./CalendarPanel.js";
+import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 const TOKEN_CHARS = /[dMyHhmsaAm]/;
 const getPlaceholderForToken = (token, length) => {
@@ -224,6 +225,7 @@ export function SingleDatePicker(props) {
     const calendarIconWrapperSx = getTextInputIconWrapperSx(sizeKey);
     const { isOpen, onOpen, onClose } = useDisclosure();
     const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const pickerPortal = usePickerPortal(isOpen);
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
     const inputRef = useRef(null);
     const popoverRef = useRef(null);
@@ -961,12 +963,13 @@ export function SingleDatePicker(props) {
         : tempDate
             ? format(tempDate, resolvedDateFormat)
             : "";
-    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: () => {
+    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: () => {
                     if (suppressOnCloseFinalizeRef.current) {
                         suppressOnCloseFinalizeRef.current = false;
                         return;
                     }
                     finalize();
+                    onClose();
                 }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, cursor: "text" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: _jsx(IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
                                                 e.stopPropagation();
                                                 if (!isOpen) {
@@ -975,17 +978,17 @@ export function SingleDatePicker(props) {
                                                 else {
                                                     onClose();
                                                 }
-                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [showDate && (_jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && (_jsx(Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? (_jsx(TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
-                                            setTempDate(updatedDate);
-                                            setInputValue(updatedDate ? format(updatedDate, resolvedDateFormat) : "");
-                                            setIsTyping(false);
-                                        }, dateFormat: resolvedDateFormat, isDisabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: (updatedDate) => {
-                                            setTempDate(updatedDate);
-                                            setInputValue(format(updatedDate, resolvedDateFormat));
-                                            setIsTyping(false);
-                                        }, isDisabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
-                                                setTempDate(null);
-                                                requestClose(null);
-                                            }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [showDate && (_jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && (_jsx(Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? (_jsx(TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue(updatedDate ? format(updatedDate, resolvedDateFormat) : "");
+                                                setIsTyping(false);
+                                            }, dateFormat: resolvedDateFormat, isDisabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue(format(updatedDate, resolvedDateFormat));
+                                                setIsTyping(false);
+                                            }, isDisabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                                    setTempDate(null);
+                                                    requestClose(null);
+                                                }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }
 export default SingleDatePicker;