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

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

@@ -5,6 +5,7 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../../Theme/tokens/builders/filledSurface.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import Button from "../../Button/Button.js";
 const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
@@ -21,7 +22,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (isActive) {
         return withOnButtonColor({
             badgeText: "Active Plan",
-            badgeColor: `0.063rem solid ${theme.colors.green[500]}`,
+            badgeColor: `${BORDER_WIDTHS.hairline} solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
             buttonScale: "green",
             buttonColor50: theme.colors.green[50],
@@ -31,7 +32,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (isNextUpgrade) {
         return withOnButtonColor({
             badgeText: "Upgrade Your Plan",
-            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `${BORDER_WIDTHS.hairline} solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
@@ -41,7 +42,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (popular) {
         return withOnButtonColor({
             badgeText: "Most Popular",
-            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `${BORDER_WIDTHS.hairline} solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
@@ -50,7 +51,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     }
     return withOnButtonColor({
         badgeText: "",
-        badgeColor: `0.063rem solid ${theme.colors.boxborder[200]}`,
+        badgeColor: `${BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`,
         buttonColor: theme.colors.primary[500],
         buttonScale: "primary",
         buttonColor50: theme.colors.primary[50],
@@ -71,7 +72,7 @@ const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCyc
             // 🔹 Skeleton Loader Layout
             _jsxs(_Fragment, { children: [_jsx(Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), _jsx(Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), _jsx(Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), _jsx(Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), _jsx(SkeletonText, { noOfLines: 2, spacing: "2" }), _jsx(Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "lg" }), _jsx(VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => (_jsx(Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
             // 🔹 Actual Card Content
-            _jsxs(_Fragment, { children: [badgeText && (_jsx(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 })), _jsxs(Box, { textAlign: "center", mb: 6, children: [_jsx(Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: iconInk, mx: "auto", mb: 4, children: plan.icon }), _jsx(Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.header[900], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (_jsxs(Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.header[900], display: "flex", justifyContent: "center", children: [_jsx(Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
+            _jsxs(_Fragment, { children: [badgeText && (_jsx(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 })), _jsxs(Box, { textAlign: "center", mb: 6, children: [_jsx(Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: iconInk, mx: "auto", mb: 4, children: plan.icon }), _jsx(Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.header[900], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (_jsxs(Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.header[900], display: "flex", justifyContent: "center", children: [_jsx(Box, { fontSize: "2xl", children: "\u20B9" }), billingCycle === "yearly"
                                         ? plan.yearlyPrice
                                         : plan.monthlyPrice, _jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [_jsx(Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.billing }), _jsx(Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.tax })] })] })), plan.priceDescription && (_jsx(Text, { color: theme.colors.semanticText.success, mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), _jsx(Text, { color: theme.colors.textMuted, mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && (_jsx(Button, { 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 })), _jsx(VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => (_jsxs(Flex, { align: "center", children: [_jsx(Icon, { as: Check, color: theme.colors.semanticText.success, mr: 2 }), _jsx(Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
 };

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

@@ -4,6 +4,7 @@ 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 { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { formatPrice } from "../../Utils/price.js";
 import Button from "../Button/Button.js";
@@ -50,6 +51,6 @@ const CartItem = ({ title, brand, href, onTitleClick, image, imageAlt = "", axes
             : { 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 }))] }))] })] }));
+    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: NUMERIC_TEXT, 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/Checkbox/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Checkbox as ChakraCheckbox, Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import FieldMessage from "../Common/FieldMessage.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
 import ToolTip from "../ToolTip/ToolTip.js";
-/** 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 = "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 = 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 = useCustomTheme();
     const ids = useFieldIds(id, { error, errorMessage, helperText });
@@ -24,8 +25,10 @@ export default function CheckBox({ label, labelFontSize, showLabelTooltip, label
             ...labelSx,
         }
         : { ...labelSx };
-    return (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { 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 (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { 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 ? (_jsx(ToolTip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(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 }) })) : (_jsx(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 }))) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
-}
+                }, children: label && (showLabelTooltip ? (_jsx(ToolTip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(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 }) })) : (_jsx(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 }))) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+CheckBox.displayName = "CheckBox";
+export default CheckBox;

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

@@ -56,7 +56,7 @@ export const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, c
 /** 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",
+    borderRadius: "2xl",
     boxShadow: selected ? `inset 0 0 0 2px ${colors.header[900]}` : "none",
     opacity: disabled ? 0.6 : 1,
     transition: transitionFor(["background-color", "box-shadow"]),

package/dist/esm/Components/ChoiceCard/ChoiceCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { RadioIndicator, selectableSurface, useSelectable } from "../CheckoutKit/selectable.js";
+const ChoiceCard = ({ value, label, description, icon, disabled = false, "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const labelId = `${uid}-label`;
+    const descriptionId = `${uid}-description`;
+    const { isSelected, interactive, inGroup, ringed, props } = useSelectable({ value, disabled });
+    return (_jsx(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && inGroup, disabled, interactive, ringed }), children: _jsxs(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 && _jsx(RadioIndicator, { selected: isSelected }), icon && (_jsx(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 })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Text, { as: "span", id: labelId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: label }), description && (_jsx(Text, { as: "span", id: descriptionId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: description }))] })] }) }));
+};
+export default ChoiceCard;

package/dist/esm/Components/ChoiceCard/ChoiceCardGroup.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectableGroup } from "../CheckoutKit/selectable.js";
+const ChoiceCardGroup = (props) => _jsx(SelectableGroup, { ...props });
+export default ChoiceCardGroup;

package/dist/esm/Components/ChoiceCard/ChoiceCardProps.js

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

package/dist/esm/Components/CircularProgress/CircularProgress.js

@@ -3,20 +3,16 @@ import { Box, Flex, chakra } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
-import { arcGeometry, SIZE_PX, THICKNESS_PX } from "./arc.js";
+import { arcGeometry, resolveDiameter } from "./arc.js";
 const Circle = chakra("circle");
-const LABEL_FONT = {
-    sm: "0.625rem",
-    md: "0.75rem",
-    lg: "1rem",
-};
 const scaleFor = (colors, tone) => tone === "info" ? colors.primary : toneScale(colors, tone);
 /** Ring-shaped determinate progress with a centred label — for a linear bar use ProgressBar. */
 const CircularProgress = ({ value, max = 100, size = "md", thickness, tone = "info", label, "aria-label": ariaLabel, "data-testid": testId, }) => {
     const { colors } = useCustomTheme();
-    const diameter = SIZE_PX[size];
-    const stroke = thickness !== null && thickness !== void 0 ? thickness : THICKNESS_PX[size];
+    const { diameter, thickness: defaultStroke, label: labelSize } = resolveDiameter(size);
+    const stroke = thickness !== null && thickness !== void 0 ? thickness : defaultStroke;
     const { radius, circumference, fraction, clamped, safeMax, dashOffset } = arcGeometry(diameter, stroke, value, max);
     const ink = resolveSoftTone(colors, scaleFor(colors, tone), colors.background[50]).fg;
     const center = diameter / 2;
@@ -32,6 +28,6 @@ const CircularProgress = ({ value, max = 100, size = "md", thickness, tone = "in
                             transformOrigin: "50% 50%",
                             transition: transitionFor(["stroke-dashoffset"]),
                             ...reducedMotionSx(),
-                        } })] }), label !== undefined && label !== null && (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", fontSize: LABEL_FONT[size], fontWeight: 600, lineHeight: 1, color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: label }))] }));
+                        } })] }), label !== undefined && label !== null && (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", fontSize: labelSize, fontWeight: 600, lineHeight: 1, color: colors.header[900], sx: NUMERIC_TEXT, children: label }))] }));
 };
 export default CircularProgress;

package/dist/esm/Components/CircularProgress/arc.js

@@ -1,5 +1,18 @@
 export const SIZE_PX = { sm: 32, md: 48, lg: 72 };
 export const THICKNESS_PX = { sm: 4, md: 5, lg: 7 };
+export const LABEL_REM = { sm: "0.625rem", md: "0.75rem", lg: "1rem" };
+export const MIN_DIAMETER = 24;
+export const MAX_DIAMETER = 160;
+export const resolveDiameter = (size) => {
+    if (typeof size === "string")
+        return { diameter: SIZE_PX[size], thickness: THICKNESS_PX[size], label: LABEL_REM[size] };
+    const diameter = Math.min(Math.max(Number.isFinite(size) ? Math.round(size) : SIZE_PX.md, MIN_DIAMETER), MAX_DIAMETER);
+    return {
+        diameter,
+        thickness: Math.min(Math.max(Math.round(diameter / 10), 3), 12),
+        label: `${Math.min(Math.max(Math.round(diameter / 4), 10), 32) / 16}rem`,
+    };
+};
 export const clampValue = (value, max) => Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
 export const arcGeometry = (diameter, thickness, value, max) => {
     const safeMax = max > 0 ? max : 100;

package/dist/esm/Components/Common/FormLabel.js

@@ -30,7 +30,7 @@ export const TextLabel = ({ label, id, isRequired = false, isInformation = false
         mb: inline ? 0 : base.mb,
         fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : base.fontSize,
     };
-    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
     // NOTE: real <label> only with a control id — Checkbox/Radio render this inline inside their own <label>.
     return id ? (_jsx(Box, { as: "label", htmlFor: id, ...wrapperStyles, children: content })) : (_jsx(Box, { as: "span", ...wrapperStyles, children: content }));
 };

package/dist/esm/Components/Common/FormattedDescription.js

@@ -8,7 +8,7 @@ const InlineText = ({ text }) => {
         if (text.startsWith("**", i)) {
             const end = text.indexOf("**", i + 2);
             if (end !== -1) {
-                nodes.push(_jsx(Text, { as: "span", fontWeight: "bold", children: text.slice(i + 2, end) }, `b-${i}`));
+                nodes.push(_jsx(Text, { as: "span", fontWeight: 700, children: text.slice(i + 2, end) }, `b-${i}`));
                 i = end + 2;
                 continue;
             }

package/dist/esm/Components/Common/HelperText.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FormHelperText, Text, useFormControlContext } from "@chakra-ui/react";
+import { FormHelperText, Text, chakra, useFormControlContext, useFormControlStyles } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { fieldMessageStyles } from "./fieldMessageStyles.js";
-/** `id` is optional — pass one to control aria-describedby yourself; omitted, Chakra auto-generates one only inside a FormControl ancestor. */
+const UnregisteredHelperText = ({ helperText, id, style }) => {
+    const styles = useFormControlStyles();
+    return (_jsx(chakra.div, { id: id, ...style, __css: styles.helperText, className: "chakra-form__helper-text", children: helperText }));
+};
+/** `id` is optional — pass one to own aria-describedby; omitted, a FormControl wires its own. */
 /** Renders `helperText` unconditionally; prefer `FieldMessage`, which swaps it for the error. */
 const HelperText = ({ helperText, id }) => {
     const theme = useCustomTheme();
     const field = useFormControlContext();
-    // An explicit id={undefined} overwrites the id FormHelperText generates for aria-describedby.
-    const idProp = id ? { id } : {};
     const style = fieldMessageStyles(theme.colors);
-    // FormHelperText throws without a FormControl ancestor; Checkbox, MultiSelect and
-    // SearchSelect render this outside one.
     if (!field) {
-        return (_jsx(Text, { ...idProp, ...style, children: helperText }));
+        return (_jsx(Text, { id: id, ...style, children: helperText }));
     }
-    return (_jsx(FormHelperText, { ...idProp, ...style, children: helperText }));
+    // NOTE: FormHelperText makes Chakra append a dangling `<fieldId>-helptext` to aria-describedby.
+    if (id)
+        return _jsx(UnregisteredHelperText, { helperText: helperText, id: id, style: style });
+    return _jsx(FormHelperText, { ...style, children: helperText });
 };
 export default HelperText;

package/dist/esm/Components/Common/fieldStyles.js

@@ -1,9 +1,10 @@
 import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { RADIUS_ROLE } from "../../Theme/tokens/primitives/radii.js";
 import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { fieldFocusVisible, focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
-export const FIELD_RADIUS = "lg";
+export const FIELD_RADIUS = RADIUS_ROLE.field;
 export const FIELD_BORDER_WIDTH = "1px";
 /** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
 export const FIELD_TRANSITION = transitionFor(["border-color", "background-color"]);

package/dist/esm/Components/ContactForm/ContactForm.js

@@ -111,6 +111,6 @@ const ContactForm = ({ apiKey, onSubmit, customFields, getCustomValues, isDisabl
             setIsLoading(false);
         }
     };
-    return (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? (_jsxs(Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: "bold", variant: "solid", mb: 1, children: [(response === null || response === void 0 ? void 0 : response.isSuccess) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: (e) => handleChange("firstName", e.target.value), error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: (e) => handleChange("phone", e.target.value), isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsx(InputTextArea, { label: "Enquiry", placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
+    return (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? (_jsxs(Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: 700, variant: "solid", mb: 1, children: [(response === null || response === void 0 ? void 0 : response.isSuccess) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: (e) => handleChange("firstName", e.target.value), error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: (e) => handleChange("phone", e.target.value), isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsx(InputTextArea, { label: "Enquiry", placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
 };
 export default ContactForm;

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
+import { Box, Flex, IconButton, Text, VisuallyHidden } from "@chakra-ui/react";
 import { Check, Copy } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 /** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
 const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
@@ -31,16 +32,22 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     const accent = accentTextOnCanvas(theme.colors.primary, theme.colors.backgroundColor.main);
     const success = theme.colors.semanticText.success;
     const rowBackgrounds = listRowBackgrounds(theme.colors);
+    const announcement = (_jsx(VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: copied ? copiedLabel : "" }));
     if (variant === "menu-item") {
         const hoverAccent = accentTextOnCanvas(theme.colors.primary, rowBackgrounds.active);
         const hoverSuccess = liftToContrast(theme.colors.semantic.success[500], rowBackgrounds.active, AA_NORMAL_TEXT);
-        return (_jsxs(Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: rowBackgrounds.active }, onClick: handleCopy, children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "14px", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { role: "button", tabIndex: 0, align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: rowBackgrounds.active }, _focusVisible: focusVisibleRing(theme.colors), onClick: handleCopy, onKeyDown: (e) => {
+                        if (e.key !== "Enter" && e.key !== " ")
+                            return;
+                        e.preventDefault();
+                        handleCopy(e);
+                    }, children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
     }
     if (variant === "button") {
-        return (_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
-            // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
-            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.text[700], fontSize: "14px", fontWeight: 500, transition: transitionFor(["border-color", "color"]), _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
+                    // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
+                    borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.text[700], fontSize: "sm", fontWeight: 500, transition: transitionFor(["border-color", "color"]), _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }), announcement] }));
     }
-    return (_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }), announcement] }));
 };
 export default CopyButton;

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

@@ -4,6 +4,7 @@ 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 { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.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";
@@ -57,11 +58,11 @@ const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply
     };
     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, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "2xl", 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: NUMERIC_TEXT, 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: () => {
+    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: "2xl", 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}…` : "" })] }));
+                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "xl", 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: "lg", 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/CustomModulesTable/EditModuleModal.js

@@ -10,7 +10,7 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
                                 // NOTE: [200] is the decorative divider rung — a real control's outline needs 1.4.11's 3:1, from [800].
                                 borderColor: colors.boxborder[500], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };

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

@@ -118,11 +118,11 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                 const dayLabel = dayStates
                     ? dayAccessibleName(format(thisDay, "d MMMM yyyy"), states)
                     : format(thisDay, "d MMMM yyyy");
-                days.push(_jsx(Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsxs(Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? dayStateClassName(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                days.push(_jsx(Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsxs(Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? dayStateClassName(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs-plus", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: solidHoverFill, color: circleHoverColor }
-                                : { bg: rangeBg }, children: [format(thisDay, "d"), hasDayOverlay && (_jsx(Box, { as: "span", className: `${DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "0.0625rem", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
+                                : { bg: rangeBg }, children: [format(thisDay, "d"), hasDayOverlay && (_jsx(Box, { as: "span", className: `${DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "px", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
                                 // The overlay is decoration: clicks belong to the day button under it.
                                 pointerEvents: "none", children: customContent !== null && customContent !== void 0 ? customContent : (_jsx(Box, { as: "span", className: `${DAY_CLASS}__marker`, w: "0.25rem", h: "0.25rem", borderRadius: "full", bg: markerColor })) }))] }) }, thisDay.toString()));
                 day = addDays(day, 1);

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

@@ -57,6 +57,12 @@ function CustomDatePicker(props) {
         }
         onOpen();
     };
+    const handleTriggerKeyDown = (event) => {
+        if (isOpen || (event.key !== "Enter" && event.key !== "ArrowDown"))
+            return;
+        event.preventDefault();
+        handleOpen();
+    };
     useEffect(() => {
         if (!isRange) {
             if (selectedDate instanceof Date) {
@@ -169,7 +175,7 @@ function CustomDatePicker(props) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen, onClose, tempDate, props, emitSingle]);
-    return (_jsxs(Box, { width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { onClick: handleOpen, children: _jsx(TextInput, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), _jsx(Portal, { appendToParentPortal: false, children: _jsx(PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [showDate && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => subMonths(prev, 1)), children: _jsx(ChevronLeftIcon, {}) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx("select", { value: currentMonth.getMonth(), onChange: (e) => {
+    return (_jsxs(Box, { width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { onClick: handleOpen, onKeyDown: handleTriggerKeyDown, children: _jsx(TextInput, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), _jsx(Portal, { appendToParentPortal: false, children: _jsx(PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [showDate && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => subMonths(prev, 1)), children: _jsx(ChevronLeftIcon, {}) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx("select", { value: currentMonth.getMonth(), onChange: (e) => {
                                                                     const newMonth = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
                                                                 }, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx("select", { value: currentMonth.getFullYear(), onChange: (e) => {
@@ -183,7 +189,7 @@ function CustomDatePicker(props) {
                                                                     if (!disableToday && !isRange) {
                                                                         handleDaySelect(new Date(today));
                                                                     }
-                                                                }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => addMonths(prev, 1)), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
+                                                                }, "aria-label": "Today", sx: { fontSize: "xs", px: 2 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => addMonths(prev, 1)), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: 700, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             emitSingle(updatedDate);
                                         } })), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, FormControl, IconButton, Input, InputGroup, InputRightElement, Popover, PopoverAnchor, PopoverBody, PopoverContent, useDisclosure, } from "@chakra-ui/react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Box, FormControl, IconButton, Input, InputGroup, InputRightElement, Popover, PopoverAnchor, PopoverBody, PopoverContent, useDisclosure, useMergeRefs, } from "@chakra-ui/react";
 import { format, isAfter, isBefore, isSameDay, subDays, startOfMonth, endOfMonth } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import Button from "../Button/Button.js";
@@ -21,8 +21,8 @@ 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 on Apply, outside click or Escape in the calendar — never on a bare day click. */
-export const RangeDatePicker = (props) => {
+/** Two-endpoint range field; `onChange` fires on Apply, outside click or calendar Escape, never a bare day click; `ref` is the `<input>`. */
+export const RangeDatePicker = forwardRef(function RangeDatePicker(props, ref) {
     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;
     const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
@@ -36,6 +36,7 @@ export const RangeDatePicker = (props) => {
     const pickerPortal = usePickerPortal(isOpen);
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date range";
     const inputRef = useRef(null);
+    const mergedInputRef = useMergeRefs(inputRef, ref);
     const triggerRef = useRef(null);
     const popoverRef = useRef(null);
     const today = new Date();
@@ -181,7 +182,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: 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: () => {
+    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: mergedInputRef, ...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: () => {
@@ -225,5 +226,6 @@ export const RangeDatePicker = (props) => {
                                                             }
                                                             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 })] }));
-};
+});
+RangeDatePicker.displayName = "RangeDatePicker";
 export default RangeDatePicker;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from "react";
-import { Box, Popover, PopoverAnchor, PopoverContent, PopoverBody, useDisclosure, Input, InputGroup, InputRightElement, IconButton, FormControl, } from "@chakra-ui/react";
+import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from "react";
+import { Box, Popover, PopoverAnchor, PopoverContent, PopoverBody, useDisclosure, Input, InputGroup, InputRightElement, IconButton, FormControl, useMergeRefs, } from "@chakra-ui/react";
 import { format, parse, isValid, isSameDay, isBefore, isAfter, addDays, } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import Button from "../Button/Button.js";
@@ -214,7 +214,7 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     }
     return { value: buf, completed: buf.length >= segmentLength };
 };
-export function SingleDatePicker(props) {
+function SingleDatePickerInner(props, ref) {
     var _a, _b, _c, _d;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, } = props;
     const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
@@ -228,6 +228,7 @@ export function SingleDatePicker(props) {
     const pickerPortal = usePickerPortal(isOpen);
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
     const inputRef = useRef(null);
+    const mergedInputRef = useMergeRefs(inputRef, ref);
     const popoverRef = useRef(null);
     const triggerRef = useRef(null);
     const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
@@ -970,7 +971,7 @@ export function SingleDatePicker(props) {
                     }
                     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) => {
+                }, 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: mergedInputRef, ...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) {
                                                     handleOpen();
@@ -991,4 +992,6 @@ export function SingleDatePicker(props) {
                                                     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 const SingleDatePicker = forwardRef(SingleDatePickerInner);
+SingleDatePicker.displayName = "SingleDatePicker";
 export default SingleDatePicker;