pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.51

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

@@ -2,64 +2,77 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Box, Badge, Flex, GridItem, Heading, Icon, Text, VStack, Skeleton, SkeletonText, } from "@chakra-ui/react";
 import { Check } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { onFilled } from "../../../Theme/tokens/builders/accentText.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) => ({
-        ...styles,
-        onButtonColor: onFilled(styles.buttonColor, theme.colors.white, theme.colors.black),
-    });
+    const withOnButtonColor = (styles) => {
+        const scale = theme.colors[styles.buttonScale];
+        const solid = resolveFilledSurface(scale, theme.colors);
+        return {
+            ...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],
+            colorScheme: "green",
         });
     }
     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],
+            colorScheme: "primary",
         });
     }
     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],
+            colorScheme: "primary",
         });
     }
     return withOnButtonColor({
         badgeText: "",
-        badgeColor: "",
+        badgeColor: `0.063rem solid ${theme.colors.boxborder[200]}`,
         buttonColor: theme.colors.primary[500],
+        buttonScale: "primary",
         buttonColor50: theme.colors.primary[50],
+        colorScheme: "primary",
     });
 };
 const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
     const theme = useCustomTheme();
-    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor } = 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"
-        ? {
-            borderColor: buttonColor,
-            color: buttonColor,
-            _hover: { bg: buttonColor50 },
-        }
+        ? {}
         : {
             bg: buttonColor,
             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, 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,14 +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";
-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
         ? {
@@ -21,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.gray[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,64 +1,74 @@
+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;
-        // A browser probe found the checked checkbox's hover repeating its own resting `[600]` fill.
-        // Chakra's stock control also carries a checked-hover at `_checked._hover` (this override
-        // nests the other way, `_hover._checked`) — two different key paths landing on the same
-        // selector, so whichever one the cascade picks must still differ from resting. Setting both
-        // paths to the same lifted value removes that ambiguity outright.
-        const hoverChecked = resolveHoverTint(palette[600], palette[600]);
+        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",
+                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 ${palette[300]}`,
-                    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: theme.colors.background[50],
+                color: filled.color,
+                _hover: {
+                    color: hoverColor,
+                },
+                _disabled: {
+                    color: theme.colors.textMuted,
+                },
             },
         };
     },

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

@@ -1,12 +1,14 @@
 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 { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+/** 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 errorFill = colors.semanticText.error;
-    // errorFill is ink, not a fill tuned to carry a mark — pick the mark's ink structurally.
-    const markInk = onFilled(errorFill, colors.white, colors.black);
-    return (_jsxs(HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), _jsx("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), _jsx("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), _jsx(Text, { as: "span", children: error })] }));
+    const errorText = colors.semanticText.error;
+    const errorSolid = resolveFilledSurface(colors.semantic.error, colors);
+    const errorFill = errorSolid.fill;
+    const markInk = errorSolid.color;
+    return (_jsxs(HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorText, className: errorClassName, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), _jsx("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), _jsx("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), _jsx(Text, { as: "span", children: error })] }));
 };
 export default ErrorComponent;

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 so the message is part of the control's
-// description on every focus. `role="alert"` alone announces once, when it first renders.
+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;

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

@@ -3,6 +3,15 @@ import { Box, Icon } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { InfoIcon } from "lucide-react";
 import ToolTip from "../ToolTip/ToolTip.js";
+/** The one field-label look (13px / 500 / `text[700]`); `Label` and `TextLabel` both read it. */
+export const fieldLabelStyles = (colors) => ({
+    color: colors.text[700],
+    fontWeight: 500,
+    fontSize: "0.8125rem",
+    lineHeight: "1.2",
+    mb: "0.375rem",
+});
+/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
 export const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     const theme = useCustomTheme();
     const clampStyles = clampLines ? {
@@ -13,18 +22,15 @@ export const TextLabel = ({ label, id, isRequired = false, isInformation = false
         textOverflow: "ellipsis",
         whiteSpace: "normal",
     } : {};
+    const base = fieldLabelStyles(theme.colors);
     const wrapperStyles = {
+        ...base,
         display: inline ? "inline-flex" : "block",
         alignItems: inline ? "center" : undefined,
-        mb: inline ? 0 : "0.375rem",
-        color: theme.colors.text[700],
-        fontWeight: 500,
-        fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem",
-        lineHeight: "1.2",
+        mb: inline ? 0 : base.mb,
+        fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : base.fontSize,
     };
     const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
-    // A real <label> only when there is a control id to point at. Without one it would name
-    // nothing, and TextLabel also renders `inline` inside controls that are themselves a <label>
-    // (Checkbox/Radio) — nesting labels there would be invalid markup.
+    // NOTE: real <label> only with a control id — Checkbox/Radio render this inline inside their own <label>.
     return id ? (_jsx(Box, { as: "label", htmlFor: id, ...wrapperStyles, children: content })) : (_jsx(Box, { as: "span", ...wrapperStyles, children: content }));
 };

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

@@ -39,6 +39,7 @@ const InlineText = ({ text }) => {
     }
     return _jsx(_Fragment, { children: nodes });
 };
+/** Not a full Markdown renderer — lists, links and code blocks render as literal text; returns null (no wrapper) when `content` is falsy. */
 const FormattedDescription = ({ content }) => {
     const { colors } = useCustomTheme();
     if (!content)

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

@@ -1,12 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormHelperText, Text, useFormControlContext } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { fieldMessageStyles } from "./fieldMessageStyles.js";
+/** `id` is optional — pass one to control aria-describedby yourself; omitted, Chakra auto-generates one only inside a FormControl ancestor. */
+/** Renders `helperText` unconditionally; prefer `FieldMessage`, which swaps it for the error. */
 const HelperText = ({ helperText, id }) => {
     const theme = useCustomTheme();
     const field = useFormControlContext();
     // An explicit id={undefined} overwrites the id FormHelperText generates for aria-describedby.
     const idProp = id ? { id } : {};
-    const style = { mt: 1, fontSize: 14, color: theme.colors.gray[500] };
+    const style = fieldMessageStyles(theme.colors);
     // FormHelperText throws without a FormControl ancestor; Checkbox, MultiSelect and
     // SearchSelect render this outside one.
     if (!field) {

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormLabel, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { fieldLabelStyles } from "./FormLabel.js";
+/** Always renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. Same look as `TextLabel`. */
 const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: colors.header[500], children: [label, isRequired && (_jsx(Text, { as: "span", color: colors.semanticText.error, ml: 1, children: "*" }))] }));
+    return (_jsxs(FormLabel, { htmlFor: htmlFor, className: labelClassName, me: 0, ...fieldLabelStyles(colors), children: [label, isRequired && (_jsx(Text, { as: "span", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }));
 };
 export default Label;

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

@@ -0,0 +1,11 @@
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+const CHIP_TAG_HEIGHT_PX = { xs: 20, sm: 24 };
+const CONTROL_BORDER_PX = 2;
+const controlHeightPx = (size) => parseFloat(CONTROL_SIZES[size].height) * 16;
+const chipRowPaddingY = (size, chipSize) => `${(controlHeightPx(size) - CHIP_TAG_HEIGHT_PX[chipSize] - CONTROL_BORDER_PX) / 2 / 16}rem`;
+/** Sizes a select trigger so a chip row lands on the same height as a plain one. */
+export const chipTriggerSizeStyles = (size, hasChips, chipSize = "sm") => {
+    const spec = CONTROL_SIZES[size];
+    const base = { minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
+    return hasChips ? { ...base, py: chipRowPaddingY(size, chipSize) } : { ...base, h: spec.height };
+};

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

@@ -0,0 +1,13 @@
+export const FIELD_MESSAGE_GAP = "0.25rem";
+/** Shared type for helper and error text, so switching between them never shifts the row. */
+export const fieldMessageStyles = (colors) => ({
+    mt: FIELD_MESSAGE_GAP,
+    fontSize: "0.75rem",
+    lineHeight: "1.125rem",
+    color: colors.textMuted,
+});
+/** One rule for every field: the error replaces the helper, never both. */
+export const fieldMessageVisibility = ({ error = false, errorMessage, helperText, }) => ({
+    showError: error && Boolean(errorMessage),
+    showHelper: !error && Boolean(helperText),
+});

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

@@ -1,33 +1,70 @@
-// Shared field-box visual standard, so the custom-styled form components
-// (SearchSelect, MultiSelect, SelectSearch, date pickers, …) match the theme
-// `Input` config exactly instead of each re-deriving border/focus/bg values.
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { fieldFocusVisible, focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
 export const FIELD_RADIUS = "lg";
-export const FIELD_BORDER_WIDTH = "0.063rem";
-export const FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
-/**
- * State-based field styles for components that track `focused`/`error` in JS
- * (e.g. SearchSelect, SingleDatePicker). Returns Chakra style props.
- */
-export const getFieldStateStyles = (theme, { error = false, focused = false } = {}) => {
-    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
-    // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-    const idleBorder = theme.colors.boxborder[500];
-    const primary = theme.colors.primary[500];
-    const errorColor = theme.colors.semanticText.error;
-    const ringPrimary = theme.colors.boxShadow.primary;
-    const ringError = theme.colors.boxShadow.error;
+export const FIELD_BORDER_WIDTH = "1px";
+export const FIELD_TRANSITION = transitionFor(["border-color", "box-shadow", "background-color"]);
+/** Chakra `h`/`fontSize`/`px` for a control of this size — fields, selects and buttons share it. */
+export const controlSizeStyles = (size) => {
+    const spec = CONTROL_SIZES[size];
+    return { h: spec.height, minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
+};
+/** Resting border one step firmer, used on hover only. */
+export const fieldHoverBorder = (colors) => liftToContrast(colors.boxborder[500], colors.background[50], AA_NON_TEXT);
+/** Resting box (surface, border, radius) shared by every field, native or composite. */
+export const fieldBoxStyles = (colors) => ({
+    bg: colors.background[50],
+    borderWidth: FIELD_BORDER_WIDTH,
+    borderStyle: "solid",
+    borderColor: colors.boxborder[500],
+    borderRadius: FIELD_RADIUS,
+    transition: FIELD_TRANSITION,
+});
+/** Value text: 400 weight, no tracking. */
+export const fieldTextStyles = (colors) => ({
+    color: colors.text[900],
+    fontWeight: 400,
+    letterSpacing: "normal",
+});
+const disabledStyles = (colors) => ({
+    bg: colors.background[100],
+    color: colors.textMuted,
+    borderColor: colors.boxborder[500],
+    opacity: 1,
+    cursor: "not-allowed",
+});
+/** Full pseudo-state block for a native input/textarea/select (or a Chakra `field` part). */
+export const fieldControlStyles = (colors) => {
+    const disabled = disabledStyles(colors);
     return {
-        bg: theme.colors.gray[50],
-        borderRadius: FIELD_RADIUS,
-        border: `${FIELD_BORDER_WIDTH} solid`,
-        borderColor: error ? errorColor : focused ? primary : idleBorder,
-        boxShadow: error
-            ? `0 0 0 0.125rem ${ringError}`
-            : focused
-                ? `0 0 0 0.125rem ${ringPrimary}`
-                : "none",
-        transition: FIELD_TRANSITION,
+        ...fieldBoxStyles(colors),
+        ...fieldTextStyles(colors),
+        _placeholder: { color: placeholderInk(colors), opacity: 1 },
+        _hover: { borderColor: fieldHoverBorder(colors) },
+        _focusVisible: { borderColor: colors.primary[500], ...fieldFocusVisible(colors) },
+        _invalid: {
+            borderColor: colors.semanticText.error,
+            _hover: { borderColor: colors.semanticText.error },
+        },
+        _readOnly: { _hover: { borderColor: colors.boxborder[500] } },
+        _disabled: { ...disabled, _hover: { borderColor: disabled.borderColor } },
     };
 };
-/** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
-export const fieldFocusRing = (theme, error = false) => `0 0 0 0.125rem ${error ? theme.colors.boxShadow.error : theme.colors.boxShadow.primary}`;
+/** Box-only styles for composite fields that track state in JS (SelectV2, SearchSelect, date pickers). */
+export const getFieldStateStyles = (theme, { error = false, focused = false, disabled = false } = {}) => {
+    const { colors } = theme;
+    const borderColor = error
+        ? colors.semanticText.error
+        : focused
+            ? colors.primary[500]
+            : colors.boxborder[500];
+    const box = { ...fieldBoxStyles(colors), borderColor, boxShadow: focused ? focusGlowShadow(colors) : "none" };
+    if (!disabled)
+        return box;
+    const { bg, borderColor: disabledBorder, cursor } = disabledStyles(colors);
+    return { ...box, bg, borderColor: disabledBorder, cursor };
+};
+/** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
+export const fieldFocusRing = (theme) => focusGlowShadow(theme.colors);

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

@@ -0,0 +1,12 @@
+/** Centres a caller-supplied icon in a fixed box and pins its svg to that size, whatever size the caller gave it. */
+export const iconBoxSx = (px) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 0,
+    flexShrink: 0,
+    "& > svg, & > * svg, & svg": {
+        width: `${px}px !important`,
+        height: `${px}px !important`,
+    },
+});

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

@@ -0,0 +1,23 @@
+import { useId } from "react";
+import { fieldMessageVisibility } from "./fieldMessageStyles.js";
+/** Stable ids for a field and its message row; `describedBy` points at whichever message is shown. */
+export const useFieldIds = (id, state = {}) => {
+    const generated = useId();
+    const inputId = id !== null && id !== void 0 ? id : `field-${generated.replace(/:/g, "")}`;
+    const helperId = `${inputId}-helper`;
+    const errorId = `${inputId}-error`;
+    const { showError, showHelper } = fieldMessageVisibility(state);
+    const describedBy = showError ? errorId : showHelper ? helperId : undefined;
+    return {
+        inputId,
+        labelId: `${inputId}-label`,
+        helperId,
+        errorId,
+        describedBy,
+        controlProps: {
+            id: inputId,
+            "aria-invalid": state.error ? true : undefined,
+            "aria-describedby": describedBy,
+        },
+    };
+};

package/dist/esm/Components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, VStack, Text, } from "@chakra-ui/react";
+import { AlertTriangle } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
+    const { colors } = useCustomTheme();
+    const cancelRef = useRef(null);
+    const [typedText, setTypedText] = useState("");
+    const requiresTypedConfirmation = confirmationText !== undefined;
+    const isConfirmDisabled = isConfirmLoading || (requiresTypedConfirmation && typedText !== confirmationText);
+    const actions = (_jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [_jsx(Button, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && isConfirmLoading }), _jsx(Button, { label: confirmLabel, onClick: onConfirm, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
+    const body = requiresTypedConfirmation ? (_jsxs(_Fragment, { children: [children, _jsx(TextInput, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (children);
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
+};
+export default ConfirmDialog;

package/dist/esm/Components/ConfirmDialog/ConfirmDialogProps.js

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