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

package/dist/Components/CalendarGrid/calendarMath.js

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

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

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

package/dist/Components/CartItem/CartItem.js

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

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

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

package/dist/Components/Checkbox/Checkbox.js

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

package/dist/Components/CheckoutKit/selectable.js

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

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

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

package/dist/Components/ChoiceCard/ChoiceCard.js

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

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

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

package/dist/Components/ChoiceCard/ChoiceCardGroup.js

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

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

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

package/dist/Components/ChoiceCard/ChoiceCardProps.js

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

package/dist/Components/CircularProgress/CircularProgress.js

@@ -5,20 +5,16 @@ const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const arc_1 = require("./arc");
 const Circle = (0, react_1.chakra)("circle");
-const LABEL_FONT = {
-    sm: "0.625rem",
-    md: "0.75rem",
-    lg: "1rem",
-};
 const scaleFor = (colors, tone) => tone === "info" ? colors.primary : (0, tone_1.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 } = (0, useCustomTheme_1.useCustomTheme)();
-    const diameter = arc_1.SIZE_PX[size];
-    const stroke = thickness !== null && thickness !== void 0 ? thickness : arc_1.THICKNESS_PX[size];
+    const { diameter, thickness: defaultStroke, label: labelSize } = (0, arc_1.resolveDiameter)(size);
+    const stroke = thickness !== null && thickness !== void 0 ? thickness : defaultStroke;
     const { radius, circumference, fraction, clamped, safeMax, dashOffset } = (0, arc_1.arcGeometry)(diameter, stroke, value, max);
     const ink = (0, tone_1.resolveSoftTone)(colors, scaleFor(colors, tone), colors.background[50]).fg;
     const center = diameter / 2;
@@ -34,6 +30,6 @@ const CircularProgress = ({ value, max = 100, size = "md", thickness, tone = "in
                             transformOrigin: "50% 50%",
                             transition: (0, motion_1.transitionFor)(["stroke-dashoffset"]),
                             ...(0, motion_2.reducedMotionSx)(),
-                        } })] }), label !== undefined && label !== null && ((0, jsx_runtime_1.jsx)(react_1.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 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", fontSize: labelSize, fontWeight: 600, lineHeight: 1, color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: label }))] }));
 };
 exports.default = CircularProgress;

package/dist/Components/CircularProgress/CircularProgressProps.d.ts

@@ -2,15 +2,17 @@ import type { ReactNode } from "react";
 import type { Tone } from "../../Theme/tokens/builders/tone";
 /** Diameter preset: sm 32px, md 48px, lg 72px. */
 export type CircularProgressSize = "sm" | "md" | "lg";
+/** A preset, or a diameter in px (clamped to 24..160). */
+export type CircularProgressDiameter = CircularProgressSize | number;
 /** Props for the SVG ring CircularProgress; the arc starts at 12 o'clock and fills clockwise. */
 export interface CircularProgressProps {
     /** Current progress, clamped to 0..max. */
     value: number;
     /** Upper bound of the range; default 100. */
     max?: number;
-    /** Diameter preset (32 / 48 / 72px); default "md". */
-    size?: CircularProgressSize;
-    /** Ring stroke in px; defaults by size (4 / 5 / 7). */
+    /** Diameter preset (32 / 48 / 72px) or a px number clamped to 24..160; default "md". */
+    size?: CircularProgressDiameter;
+    /** Ring stroke in px; defaults by preset (4 / 5 / 7), or a tenth of a numeric size (3..12). */
     thickness?: number;
     /** Fill colour; default "info", which paints the brand primary rather than blue. */
     tone?: Tone;

package/dist/Components/CircularProgress/arc.d.ts

@@ -1,6 +1,14 @@
-import type { CircularProgressSize } from "./CircularProgressProps";
+import type { CircularProgressDiameter, CircularProgressSize } from "./CircularProgressProps";
 export declare const SIZE_PX: Record<CircularProgressSize, number>;
 export declare const THICKNESS_PX: Record<CircularProgressSize, number>;
+export declare const LABEL_REM: Record<CircularProgressSize, string>;
+export declare const MIN_DIAMETER = 24;
+export declare const MAX_DIAMETER = 160;
+export declare const resolveDiameter: (size: CircularProgressDiameter) => {
+    diameter: number;
+    thickness: number;
+    label: string;
+};
 export declare const clampValue: (value: number, max: number) => number;
 export declare const arcGeometry: (diameter: number, thickness: number, value: number, max: number) => {
     radius: number;

package/dist/Components/CircularProgress/arc.js

@@ -1,8 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.arcGeometry = exports.clampValue = exports.THICKNESS_PX = exports.SIZE_PX = void 0;
+exports.arcGeometry = exports.clampValue = exports.resolveDiameter = exports.MAX_DIAMETER = exports.MIN_DIAMETER = exports.LABEL_REM = exports.THICKNESS_PX = exports.SIZE_PX = void 0;
 exports.SIZE_PX = { sm: 32, md: 48, lg: 72 };
 exports.THICKNESS_PX = { sm: 4, md: 5, lg: 7 };
+exports.LABEL_REM = { sm: "0.625rem", md: "0.75rem", lg: "1rem" };
+exports.MIN_DIAMETER = 24;
+exports.MAX_DIAMETER = 160;
+const resolveDiameter = (size) => {
+    if (typeof size === "string")
+        return { diameter: exports.SIZE_PX[size], thickness: exports.THICKNESS_PX[size], label: exports.LABEL_REM[size] };
+    const diameter = Math.min(Math.max(Number.isFinite(size) ? Math.round(size) : exports.SIZE_PX.md, exports.MIN_DIAMETER), exports.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`,
+    };
+};
+exports.resolveDiameter = resolveDiameter;
 const clampValue = (value, max) => Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
 exports.clampValue = clampValue;
 const arcGeometry = (diameter, thickness, value, max) => {

package/dist/Components/Common/FormLabel.js

@@ -37,7 +37,7 @@ const TextLabel = ({ label, id, isRequired = false, isInformation = false, infor
         mb: inline ? 0 : base.mb,
         fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : base.fontSize,
     };
-    const content = ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label })), isRequired && ((0, jsx_runtime_1.jsx)("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "xs", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label })), isRequired && ((0, jsx_runtime_1.jsx)("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "xs", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "label", htmlFor: id, ...wrapperStyles, children: content })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ...wrapperStyles, children: content }));
 };

package/dist/Components/Common/FormattedDescription.js

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

package/dist/Components/Common/HelperText.d.ts

@@ -1,7 +1,8 @@
-/** `id` is optional — pass one to control aria-describedby yourself; omitted, Chakra auto-generates one only inside a FormControl ancestor. */
-/** Renders `helperText` unconditionally; prefer `FieldMessage`, which swaps it for the error. */
-declare const HelperText: ({ helperText, id }: {
+type HelperTextProps = {
     helperText: string;
     id?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+};
+/** `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. */
+declare const HelperText: ({ helperText, id }: HelperTextProps) => import("react/jsx-runtime").JSX.Element;
 export default HelperText;

package/dist/Components/Common/HelperText.js

@@ -4,19 +4,22 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const fieldMessageStyles_1 = require("./fieldMessageStyles");
-/** `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 = (0, react_1.useFormControlStyles)();
+    return ((0, jsx_runtime_1.jsx)(react_1.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 = (0, useCustomTheme_1.useCustomTheme)();
     const field = (0, react_1.useFormControlContext)();
-    // An explicit id={undefined} overwrites the id FormHelperText generates for aria-describedby.
-    const idProp = id ? { id } : {};
     const style = (0, fieldMessageStyles_1.fieldMessageStyles)(theme.colors);
-    // FormHelperText throws without a FormControl ancestor; Checkbox, MultiSelect and
-    // SearchSelect render this outside one.
     if (!field) {
-        return ((0, jsx_runtime_1.jsx)(react_1.Text, { ...idProp, ...style, children: helperText }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Text, { id: id, ...style, children: helperText }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.FormHelperText, { ...idProp, ...style, children: helperText }));
+    // NOTE: FormHelperText makes Chakra append a dangling `<fieldId>-helptext` to aria-describedby.
+    if (id)
+        return (0, jsx_runtime_1.jsx)(UnregisteredHelperText, { helperText: helperText, id: id, style: style });
+    return (0, jsx_runtime_1.jsx)(react_1.FormHelperText, { ...style, children: helperText });
 };
 exports.default = HelperText;

package/dist/Components/Common/fieldStyles.d.ts

@@ -2,7 +2,7 @@ import type { SystemStyleObject } from "@chakra-ui/react";
 import { CustomThemeProps } from "../../Theme/themeProps";
 import type { PaletteProps } from "../../Theme/tokens/types";
 import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
-export declare const FIELD_RADIUS = "lg";
+export declare const FIELD_RADIUS: "lg";
 export declare const FIELD_BORDER_WIDTH = "1px";
 /** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
 export declare const FIELD_TRANSITION: string;
@@ -21,7 +21,7 @@ export declare const fieldBoxStyles: (colors: PaletteProps) => {
     borderWidth: string;
     borderStyle: string;
     borderColor: string;
-    borderRadius: string;
+    borderRadius: "lg";
     transition: string;
 };
 /** Value text: 400 weight, no tracking. */
@@ -44,7 +44,7 @@ export declare const getFieldStateStyles: (theme: CustomThemeProps, { error, foc
     bg: string;
     borderWidth: string;
     borderStyle: string;
-    borderRadius: string;
+    borderRadius: "lg";
     transition: string;
 } | {
     bg: string;
@@ -53,7 +53,7 @@ export declare const getFieldStateStyles: (theme: CustomThemeProps, { error, foc
     boxShadow: string;
     borderWidth: string;
     borderStyle: string;
-    borderRadius: string;
+    borderRadius: "lg";
     transition: string;
 };
 /** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */

package/dist/Components/Common/fieldStyles.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fieldFocusRing = exports.getFieldStateStyles = exports.fieldControlStyles = exports.fieldTextStyles = exports.fieldBoxStyles = exports.fieldHoverBorder = exports.controlSizeStyles = exports.FIELD_TRANSITION = exports.FIELD_BORDER_WIDTH = exports.FIELD_RADIUS = void 0;
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const radii_1 = require("../../Theme/tokens/primitives/radii");
 const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
-exports.FIELD_RADIUS = "lg";
+exports.FIELD_RADIUS = radii_1.RADIUS_ROLE.field;
 exports.FIELD_BORDER_WIDTH = "1px";
 /** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
 exports.FIELD_TRANSITION = (0, motion_1.transitionFor)(["border-color", "background-color"]);

package/dist/Components/ContactForm/ContactForm.js

@@ -116,6 +116,6 @@ const ContactForm = ({ apiKey, onSubmit, customFields, getCustomValues, isDisabl
             setIsLoading(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? ((0, jsx_runtime_1.jsxs)(react_2.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) ? (0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.CircleX, {}), " \u00A0", " ", response.title] })) : null, (0, jsx_runtime_1.jsx)(react_2.Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), (0, jsx_runtime_1.jsx)(react_2.Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "form", onSubmit: handleSubmit, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.email, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { label: "Enquiry", placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? ((0, jsx_runtime_1.jsxs)(react_2.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) ? (0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.CircleX, {}), " \u00A0", " ", response.title] })) : null, (0, jsx_runtime_1.jsx)(react_2.Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), (0, jsx_runtime_1.jsx)(react_2.Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "form", onSubmit: handleSubmit, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.email, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { label: "Enquiry", placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
 };
 exports.default = ContactForm;

package/dist/Components/CopyButton/CopyButton.js

@@ -12,6 +12,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 /** 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, }) => {
@@ -36,16 +37,22 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     const accent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.backgroundColor.main);
     const success = theme.colors.semanticText.success;
     const rowBackgrounds = (0, rowStates_1.listRowBackgrounds)(theme.colors);
+    const announcement = ((0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: copied ? copiedLabel : "" }));
     if (variant === "menu-item") {
         const hoverAccent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, rowBackgrounds.active);
         const hoverSuccess = (0, outlineRung_1.liftToContrast)(theme.colors.semantic.success[500], rowBackgrounds.active, accentText_1.AA_NORMAL_TEXT);
-        return ((0, jsx_runtime_1.jsxs)(react_2.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: hoverSuccess })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: hoverAccent })), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.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: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: handleCopy, onKeyDown: (e) => {
+                        if (e.key !== "Enter" && e.key !== " ")
+                            return;
+                        e.preventDefault();
+                        handleCopy(e);
+                    }, children: [copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: hoverSuccess })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: hoverAccent })), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
     }
     if (variant === "button") {
-        return ((0, jsx_runtime_1.jsxs)(react_2.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: (0, primitives_1.transitionFor)(["border-color", "color"]), _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.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: (0, primitives_1.transitionFor)(["border-color", "color"]), _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }), announcement] }));
     }
-    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: copied ? copiedLabel : tooltip, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }) }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: copied ? copiedLabel : tooltip, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }) }) }), announcement] }));
 };
 exports.default = CopyButton;