pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

package/dist/esm/Components/Backdrop/Backdrop.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Fade, Text } from "@chakra-ui/react";
+import Spinner from "../Spinner/Spinner.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { backdropScrim, overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { OVERLAY_BLUR } from "../../Theme/chakra/overlay.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+const ENTER_MS = 225;
+const EXIT_MS = 195;
+const SPINNER_BOX = "2.5rem";
+const SPINNER_THICKNESS = "0.225rem";
+/** Fading scrim that blocks (or optionally lets through) the page behind; prefer it over a hand-rolled overlay. */
+export default function Backdrop({ open, variant = "dim", loader = false, text, invisible = false, allowBackgroundInteraction = false, onClick, transitionDuration, container = false, zIndex, children, ariaLabel, }) {
+    var _a, _b;
+    const { colors } = useCustomTheme();
+    const durations = typeof transitionDuration === "number"
+        ? { enter: transitionDuration, exit: transitionDuration }
+        : { enter: (_a = transitionDuration === null || transitionDuration === void 0 ? void 0 : transitionDuration.enter) !== null && _a !== void 0 ? _a : ENTER_MS, exit: (_b = transitionDuration === null || transitionDuration === void 0 ? void 0 : transitionDuration.exit) !== null && _b !== void 0 ? _b : EXIT_MS };
+    const isDim = variant === "dim";
+    const scrim = invisible ? "transparent" : isDim ? backdropScrim(colors) : overlayScrim(colors);
+    const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (loader ? "Loading" : undefined);
+    return (_jsx(Fade, { in: open, unmountOnExit: true, transition: { enter: { duration: durations.enter / 1000 }, exit: { duration: durations.exit / 1000 } }, style: {
+            position: container ? "absolute" : "fixed",
+            inset: 0,
+            zIndex: Number(zIndex !== null && zIndex !== void 0 ? zIndex : (container ? 10 : 1300)),
+            pointerEvents: allowBackgroundInteraction ? "none" : "auto",
+        }, children: _jsx(Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...reducedMotionSx() }, children: children !== null && children !== void 0 ? children : (loader ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && _jsx(Text, { fontSize: "0.875rem", children: text })] })) : null) }) }));
+}

package/dist/esm/Components/Backdrop/BackdropProps.js

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

package/dist/esm/Components/Breadcrumbs/Breadcrumbs.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
+import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { breadcrumbInk } from "./breadcrumbInk.js";
 export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
     const theme = useTheme();
-    return (_jsx(Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => (_jsx(BreadcrumbItem, { isCurrentPage: isCurrentPage && index === items.length - 1, children: _jsx(BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: (event) => {
-                    event.preventDefault();
-                    handleClick(item.path);
-                }, children: item.label }) }, index))) }));
+    const { colors } = useCustomTheme();
+    const ink = breadcrumbInk(colors);
+    const effectiveSeparator = separator !== null && separator !== void 0 ? separator : (_jsx(Box, { as: "span", color: ink.separator, children: "/" }));
+    return (_jsx(Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => {
+            const isLast = isCurrentPage && index === items.length - 1;
+            return (_jsx(BreadcrumbItem, { isCurrentPage: isLast, children: _jsx(BreadcrumbLink, { href: item.path, color: isLast ? ink.current : ink.link, fontWeight: isLast ? 600 : fontWeight, sx: {
+                        "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover },
+                    }, onClick: (event) => {
+                        event.preventDefault();
+                        handleClick(item.path);
+                    }, children: item.label }) }, index));
+        }) }));
 }

package/dist/esm/Components/Breadcrumbs/breadcrumbInk.js

@@ -0,0 +1,7 @@
+/** Chakra ships no default Breadcrumb theme, so every ink here needs an explicit token. */
+export const breadcrumbInk = (colors) => ({
+    link: colors.textMuted,
+    linkHover: colors.accentText,
+    current: colors.text[900],
+    separator: colors.textMuted,
+});

package/dist/esm/Components/Button/Button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, memo } from "react";
 import { Button as ChakraButton } from "@chakra-ui/react";
-const Button = forwardRef(function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, w, sx, colorScheme, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }, ref) {
+const Button = forwardRef(function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText, type, width, w, sx, colorScheme, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }, ref) {
     const isIconOnly = !children && !label && !!(leftIcon || rightIcon);
-    return (_jsx(ChakraButton, { ...aria, type: type, onClick: onClick, width: width || w || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, iconSpacing: isIconOnly ? 0 : undefined, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
+    return (_jsx(ChakraButton, { ...aria, type: type, onClick: onClick, width: width || w || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, iconSpacing: isIconOnly ? 0 : undefined, px: isIconOnly ? 0 : undefined, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
 });
 export default memo(Button);

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

@@ -2,19 +2,15 @@ import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { darkerFillRung, labelOnFill, solidFillRung, } from "../../Theme/tokens/builders/filledSurface.js";
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
-/**
- * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
- * `[500]` is pinned dark enough to carry a white label on the solid variant and measures only
- * ~4.2 against the dark canvas. Returns `[500]` unchanged on light canvases, so existing apps
- * are pixel-identical.
- */
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE, transitionFor } from "../../Theme/tokens/primitives/index.js";
+const controlSize = (size) => {
+    const { height, fontSize, paddingX } = CONTROL_SIZES[size];
+    return { h: height, minW: height, fontSize, px: paddingX };
+};
+// NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.
 const onCanvasText = (theme, colorScheme) => accentTextOnCanvas(theme.colors[colorScheme], theme.colors.backgroundColor.main);
-/**
- * Ghost hover tint: translucent accent composited over whatever is behind it, so one value works
- * on either canvas. The `[50]` rung it replaces sits ~1.04 against its own canvas in BOTH modes —
- * a hover state you cannot see. Utility scales (red, green…) carry no `opacity` ramp, so they keep
- * `[50]`.
- */
+// NOTE: [50] alone measured ~1.04 (invisible) in both modes — opacity ramp fixes it where available.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
     return "opacity" in scale ? scale.opacity[step] : scale[50];
@@ -28,14 +24,7 @@ const darkerFill = (theme, colorScheme, step) => {
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => labelOnFill(fill, theme.colors.white, theme.colors.black);
-/**
- * The two-tone `:focus-visible` ring, from the palette's derived `focusRing` pair.
- *
- * Every variant spreads this. Before it, none of them defined `_focusVisible` at all, so every
- * button in every consuming app fell through to Chakra's stock `shadows.outline` — one fixed blue
- * that measured 1.83:1 on the canvas and 1.38:1 on a primary fill, failing WCAG 1.4.11 (3:1) on
- * all nine brands. `focusRing.test.ts` is the gate that keeps this true.
- */
+// NOTE: replaces Chakra's stock ring, which failed WCAG 1.4.11 on every brand — gated by focusRing.test.ts.
 const focusRing = (theme) => focusVisibleStyles(theme.colors);
 export const Button = {
     // The ring is repeated on every variant below AND here, so a variant name this file does not
@@ -43,8 +32,8 @@ export const Button = {
     baseStyle: ({ theme }) => ({
         borderRadius: "lg",
         fontWeight: 500,
-        fontSize: "1rem",
-        transition: "all 0.2s",
+        transition: transitionFor(["background-color", "border-color", "color", "box-shadow", "filter"]),
+        ...reducedMotionSx(),
         _disabled: {
             opacity: 0.6,
             cursor: "not-allowed",
@@ -86,30 +75,20 @@ export const Button = {
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
-            // Same rung as `solid`'s fill, not raw [500] — keeps hover bg AA-safe for white text.
-            const hoverFill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
-            const activeFill = darkerFill(theme, colorScheme, 0);
             const ink = onCanvasText(theme, colorScheme);
             return {
-                border: "0.1rem solid",
+                border: "0.0625rem solid",
                 borderColor: ink,
                 color: ink,
                 bg: "transparent",
                 _hover: {
-                    bg: hoverFill,
-                    borderColor: activeFill,
-                    color: labelFor(theme, hoverFill),
-                    _disabled: {
-                        //  bg: theme.colors[colorScheme][500],
-                        color: ink,
-                    },
+                    bg: onCanvasHoverBg(theme, colorScheme, 16),
+                    _disabled: { bg: "transparent" },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: onCanvasHoverBg(theme, colorScheme, 24),
                 },
                 _loading: {
-                    // bg: theme.colors[colorScheme][500],
                     color: ink,
                 },
                 ...focusRing(theme),
@@ -179,34 +158,14 @@ export const Button = {
         },
     },
     sizes: {
-        xs: {
-            h: "1.5rem",
-            fontSize: "0.75rem",
-            px: "0.5rem",
-        },
-        sm: {
-            h: "2rem",
-            fontSize: "0.875rem",
-            px: "0.75rem",
-        },
-        md: {
-            h: "2.5rem",
-            fontSize: "1rem",
-            px: "1rem",
-        },
-        lg: {
-            h: "3rem",
-            fontSize: "1.125rem",
-            px: "1.5rem",
-        },
-        xl: {
-            h: "3.5rem",
-            fontSize: "1.25rem",
-            px: "2rem",
-        },
+        xs: controlSize("xs"),
+        sm: controlSize("sm"),
+        md: controlSize("md"),
+        lg: controlSize("lg"),
+        xl: { h: "3.5rem", minW: "3.5rem", fontSize: "1.125rem", px: "2rem" },
     },
     defaultProps: {
-        size: "md",
+        size: DEFAULT_CONTROL_SIZE,
         variant: "solid",
         colorScheme: "primary",
     },

package/dist/esm/Components/ButtonGroupIcon/ButtonGoupIconProps.js

@@ -1 +1,2 @@
-export {};
+/** @deprecated Misspelled path — import from `./ButtonGroupIconProps` instead. */
+export * from "./ButtonGroupIconProps.js";

package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -37,14 +37,11 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
     };
     const handleMenuClick = (event, option) => {
         setIsDropdownOpen(false);
-        // console.log("Option clicked:", option,event)
         if (onDropdownOptionClick) {
             onDropdownOptionClick(event, option);
         }
     };
-    // For the gradient variant we paint ONE continuous gradient on the group and
-    // keep the segments transparent (so it doesn't restart per button/icon), with a
-    // translucent-white hover overlay for per-segment feedback.
+    // NOTE: gradient variant paints ONE continuous gradient on the group, segments stay transparent.
     const isGradient = variant === "gradient";
     const gradientStops = resolveGradient(theme.colors.gradient, theme.colors.white, theme.colors.black);
     const gradientBg = gradientCss(gradientStops);
@@ -63,12 +60,8 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
         : undefined;
     return (_jsxs(ButtonGroup, { size: size, isAttached: true, variant: isGradient ? "solid" : variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle, sx: isGradient
             ? { bgImage: gradientBg, color: gradientInk, borderRadius: "lg", overflow: "hidden" }
-            : undefined, children: [leftIcon && (_jsx(IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), _jsx(Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: _jsx(Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: _jsx(Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? (_jsxs(Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [_jsx(MenuButton, { as: IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), _jsx(Box, { sx: { zIndex: 99 }, children: _jsx(MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, 
-                            // Chakra's own MenuItem renders `background: var(--menu-bg)` at rest, and its
-                            // MenuList baseStyle sets that var to a hardcoded "#fff" (never our `_dark`, which
-                            // this theme-swap app never triggers) — our `bg` prop above only recolors the list
-                            // itself, not the inherited var, so items fell back to white until hover/focus (which
-                            // our own sx already overrides). Setting the var here fixes the rest state too.
+            : undefined, children: [leftIcon && (_jsx(IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), _jsx(Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: _jsx(Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: _jsx(Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? (_jsxs(Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [_jsx(MenuButton, { as: IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), _jsx(Box, { sx: { zIndex: 99 }, children: _jsx(MenuList, { style: menulistStyle, bg: theme.colors.surfaceRaised, 
+                            // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.
                             sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => (_jsxs(MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
                                     display: "flex",
                                     alignItems: "center",

package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIconProps.js

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

package/dist/esm/Components/Buttons/Buttons.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const Buttons = ({ onClick, label, className, disabled }) => {
-    return (_jsx("button", { onClick: onClick, className: `bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`, disabled: disabled, children: label }));
-};
+import Button from '../Button/Button.js';
+const Buttons = ({ onClick, label, isDisabled, disabled }) => (_jsx(Button, { label: label, onClick: onClick, isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled, colorScheme: "primary" }));
 export default Buttons;

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

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Card as ChakraCard } from "@chakra-ui/react";
-export default function Card({ maxW, align, variant, direction, justify, children, size, color, overflow, sx, }) {
-    return (_jsx(ChakraCard, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, p: 4, sx: sx, children: children }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Card as ChakraCard, CardBody, CardFooter, CardHeader, } from "@chakra-ui/react";
+const Card = forwardRef(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, ...rest }, ref) {
+    const cardProps = { ...rest };
+    delete cardProps.dividercolor;
+    delete cardProps.dividersize;
+    delete cardProps.dividervariant;
+    return (_jsxs(ChakraCard, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, children: [header && _jsx(CardHeader, { children: header }), _jsx(CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && _jsx(CardFooter, { children: footer })] }));
+});
+export default Card;

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

@@ -3,6 +3,9 @@ import { Box, Badge, Flex, GridItem, Heading, Icon, Text, VStack, Skeleton, Skel
 import { Check } from "lucide-react";
 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 { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import Button from "../../Button/Button.js";
 const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     const withOnButtonColor = (styles) => {
@@ -12,12 +15,13 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
             ...styles,
             buttonColor: solid.fill,
             onButtonColor: solid.color,
+            iconInk: accentTextOnCanvas(scale, styles.buttonColor50),
         };
     };
     if (isActive) {
         return withOnButtonColor({
             badgeText: "Active Plan",
-            badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
+            badgeColor: `0.063rem solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
             buttonScale: "green",
             buttonColor50: theme.colors.green[50],
@@ -27,7 +31,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (isNextUpgrade) {
         return withOnButtonColor({
             badgeText: "Upgrade Your Plan",
-            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
@@ -37,7 +41,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (popular) {
         return withOnButtonColor({
             badgeText: "Most Popular",
-            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
+            badgeColor: `0.063rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
@@ -46,7 +50,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     }
     return withOnButtonColor({
         badgeText: "",
-        badgeColor: "",
+        badgeColor: `0.063rem solid ${theme.colors.boxborder[200]}`,
         buttonColor: theme.colors.primary[500],
         buttonScale: "primary",
         buttonColor50: theme.colors.primary[50],
@@ -55,7 +59,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
 };
 const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
     const theme = useCustomTheme();
-    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, iconInk, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
     const variantStyles = plan.buttonVariant === "outline"
         ? {}
         : {
@@ -63,12 +67,12 @@ const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCyc
             color: onButtonColor,
             _hover: { bg: buttonColor },
         };
-    return (_jsx(GridItem, { children: _jsx(Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" }, children: isLoading ? (
+    return (_jsx(GridItem, { children: _jsx(Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "xl", p: 8, position: "relative", transition: transitionFor(["transform", "box-shadow"], "base"), transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "lg" }, sx: reducedMotionSx(), children: isLoading ? (
             // 🔹 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: "md" }), _jsx(VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => (_jsx(Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
+            _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: buttonColor, mx: "auto", mb: 4, children: plan.icon }), _jsx(Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (_jsxs(Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], 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: "1.5rem", 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.gray[600], children: plan.billing }), _jsx(Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && (_jsx(Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), _jsx(Text, { color: theme.colors.gray[600], 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.green[500], mr: 2 }), _jsx(Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
+                                        : 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))) })] })) }) }));
 };
 export default PaymentCard;

package/dist/esm/Components/Checkbox/Checkbox.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox as ChakraCheckbox, Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
-import HelperText from "../Common/HelperText.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 — pass isInvalid (not just error) for the invalid state to register. */
-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, ...aria }) {
+/** 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 }) {
+    void variant;
     const theme = useCustomTheme();
-    const controlSize = size === "sm" ? "1rem"
-        : size === "md" ? "1.25rem"
-            : size === "lg" ? "1.5rem"
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const controlSize = size === "sm" ? "0.875rem"
+        : size === "md" ? "1rem"
+            : size === "lg" ? "1.25rem"
                 : size; // pass-through if already a CSS value
     const clampStyles = labelClampLines
         ? {
@@ -22,8 +24,8 @@ export default function CheckBox({ label, labelFontSize, showLabelTooltip, label
             ...labelSx,
         }
         : { ...labelSx };
-    return (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, 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, { 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.8125rem", 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.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+                }, 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 })] }));
 }

package/dist/esm/Components/Checkbox/Checkbox.styles.js

@@ -1,68 +1,73 @@
-import { AA_NON_TEXT, liftToContrast, resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { fieldHoverBorder } from "../Common/fieldStyles.js";
+// One fill rule for every colour scheme, via resolveFilledSurface — was a flat [600].
 export const Checkbox = {
     baseStyle: ({ theme, colorScheme = "primary" }) => {
         var _a;
         const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
-        // Both `_checked._hover` and `_hover._checked` paths get the same lifted value.
-        const hoverChecked = resolveHoverTint(palette[600], palette[600]);
-        const checkedIcon = onFilled(palette[600], theme.colors.white, theme.colors.black);
-        const hoverCheckedIcon = onFilled(hoverChecked, theme.colors.white, theme.colors.black);
-        const focusRing = liftToContrast(palette[300], theme.colors.backgroundColor.main, AA_NON_TEXT);
+        const filled = resolveFilledSurface(palette, theme.colors);
+        // filledSurface's own hoverFill can collapse on a near-monochrome scale (zinc); step from
+        // the resolved fill with resolveHoverTint instead, which guarantees a perceptible move.
+        const hoverFill = resolveHoverTint(filled.fill, filled.fill);
+        const hoverColor = onFilled(hoverFill, theme.colors.white, theme.colors.black);
+        const activeFill = resolveHoverTint(hoverFill, hoverFill);
         return {
             control: {
-                width: "1.25rem",
-                height: "1.25rem",
-                borderWidth: "1.6px",
+                borderWidth: "1px",
                 borderRadius: "base",
-                // Without a resting colour Chakra falls back to its own gray.500.
-                borderColor: theme.colors.boxborder[500],
+                borderColor: fieldHoverBorder(theme.colors),
                 transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
-                _disabled: {
-                    bg: theme.colors.background[50],
-                    borderColor: theme.colors.boxborder[500],
-                    cursor: "not-allowed",
+                _invalid: {
+                    borderColor: theme.colors.semanticText.error,
                 },
                 _indeterminate: {
-                    bg: theme.colors.background[50],
-                    borderColor: palette[500],
-                    svg: {
-                        color: palette[500],
-                    },
+                    bg: filled.fill,
+                    borderColor: filled.fill,
+                    svg: { color: filled.color },
                 },
                 _checked: {
-                    bg: palette[600],
-                    borderColor: palette[600],
+                    bg: filled.fill,
+                    borderColor: filled.fill,
                     _hover: {
-                        bg: hoverChecked,
-                        borderColor: hoverChecked,
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                 },
                 _hover: {
                     bg: theme.colors.background[100],
-                    borderColor: palette[400],
+                    borderColor: filled.fill,
                     _checked: {
-                        bg: hoverChecked,
-                        borderColor: hoverChecked,
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                     _indeterminate: {
-                        bg: "none",
-                        borderColor: palette[600],
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                 },
-                _focus: {
-                    boxShadow: `0 0 0 2px ${focusRing}`,
-                    borderColor: palette[500],
-                },
+                _focusVisible: focusVisibleRing(theme.colors),
                 _active: {
-                    bg: palette[600],
-                    borderColor: palette[600],
+                    bg: activeFill,
+                    borderColor: activeFill,
+                },
+                // Last so it wins over _checked/_indeterminate at equal specificity.
+                _disabled: {
+                    bg: theme.colors.background[100],
+                    borderColor: theme.colors.boxborder[500],
+                    cursor: "not-allowed",
+                    opacity: 1,
                 },
             },
             icon: {
-                color: checkedIcon,
+                color: filled.color,
                 _hover: {
-                    color: hoverCheckedIcon,
+                    color: hoverColor,
+                },
+                _disabled: {
+                    color: theme.colors.textMuted,
                 },
             },
         };

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
-/** Inline error row for Input/PinInputs; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
+/** Inline error row for Input; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
 const ErrorComponent = ({ error, errorClassName, }) => {
     const { colors } = useCustomTheme();
     const errorText = colors.semanticText.error;

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, Text, } from "@chakra-ui/react";
-import { Info } from "lucide-react";
+import { Flex, Text } from "@chakra-ui/react";
+import { CircleAlert } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-// `id` lets a field point `aria-describedby` here; `role="alert"` announces once, on render.
-// Always pass `errorMessage` when `error` is true — omitted, this renders the literal word "Error", and every caller hides `helperText` while `error` is true.
+import { fieldMessageStyles } from "./fieldMessageStyles.js";
+// `id` lets a field point `aria-describedby` here; `role="alert"` announces once.
 const ErrorMessage = ({ errorMessage, id }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Flex, { id: id, align: "center", color: colors.semanticText.error, fontSize: "0.875rem", role: "alert", children: [_jsx(Info, { width: "0.875rem" }), _jsx(Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+    return (_jsxs(Flex, { id: id, role: "alert", align: "flex-start", gap: "0.25rem", ...fieldMessageStyles(colors), color: colors.semanticText.error, children: [_jsx(Flex, { as: "span", h: "1.125rem", align: "center", flexShrink: 0, "aria-hidden": true, children: _jsx(CircleAlert, { size: 12 }) }), _jsx(Text, { as: "span", children: errorMessage })] }));
 };
 export default ErrorMessage;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ErrorMessage from "./ErrorMessage.js";
+import HelperText from "./HelperText.js";
+import { fieldMessageVisibility } from "./fieldMessageStyles.js";
+/** The single message row under a field: error when `error`, else helper, else nothing. */
+const FieldMessage = ({ error, errorMessage, helperText, helperId, errorId }) => {
+    const { showError, showHelper } = fieldMessageVisibility({ error, errorMessage, helperText });
+    if (showError && errorMessage)
+        return _jsx(ErrorMessage, { id: errorId, errorMessage: errorMessage });
+    if (showHelper && helperText)
+        return _jsx(HelperText, { id: helperId, helperText: helperText });
+    return null;
+};
+export default FieldMessage;