pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/Components/Button/Button.d.ts

@@ -1,5 +1,4 @@
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Button>;
 export default _default;
-//# sourceMappingURL=Button.d.ts.map

package/dist/Components/Button/Button.js

@@ -3,7 +3,7 @@ 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");
-function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, }) {
-    return ((0, jsx_runtime_1.jsx)(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
+function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }) {
+    return ((0, jsx_runtime_1.jsx)(react_2.Button, { ...aria, type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
 }
 exports.default = (0, react_1.memo)(Button);

package/dist/Components/Button/Button.styles.d.ts

@@ -1,3 +1,2 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const Button: ComponentStyleConfig;
-//# sourceMappingURL=Button.styles.d.ts.map

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

@@ -16,9 +16,8 @@ const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnCanvas
  * `[50]`.
  */
 const onCanvasHoverBg = (theme, colorScheme, step) => {
-    var _a, _b;
     const scale = theme.colors[colorScheme];
-    return (_b = (_a = scale.opacity) === null || _a === void 0 ? void 0 : _a[step]) !== null && _b !== void 0 ? _b : scale[50];
+    return "opacity" in scale ? scale.opacity[step] : scale[50];
 };
 /**
  * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
@@ -38,7 +37,7 @@ const darkerFill = (theme, colorScheme, step) => {
 const labelFor = (theme, fill) => (0, accentText_1.onFilled)(fill, theme.colors.white, theme.colors.black);
 exports.Button = {
     baseStyle: () => ({
-        borderRadius: "0.5rem",
+        borderRadius: "lg",
         fontWeight: 500,
         fontSize: "1rem",
         transition: "all 0.2s",
@@ -139,15 +138,10 @@ exports.Button = {
                 bg: "transparent",
             },
         }),
-        // Theme-based two-tone gradient: each theme defines its own `gradient`
-        // {from,to} pair (see palettes); falls back to the primary scale. Ignores
-        // colorScheme. Hover/active shift brightness so it works for any pair.
+        // Theme-based two-tone gradient: each theme defines its own `gradient` {from,to} pair.
+        // Ignores colorScheme; hover/active shift brightness so it works for any pair.
         gradient: ({ theme }) => {
-            var _a;
-            const g = (_a = theme.colors.gradient) !== null && _a !== void 0 ? _a : {
-                from: theme.colors.primary[400],
-                to: theme.colors.primary[700],
-            };
+            const g = theme.colors.gradient;
             const bg = `linear-gradient(135deg, ${g.from} 0%, ${g.to} 100%)`;
             return {
                 bgImage: bg,

package/dist/Components/Button/ButtonProps.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave"> & {
+export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
     label?: string;
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs" | "xl";
@@ -10,4 +10,3 @@ export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "righ
     children?: React.ReactNode;
     opacity?: number;
 };
-//# sourceMappingURL=ButtonProps.d.ts.map

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -33,4 +33,3 @@ export type ButtonGroupIconProps = {
     leftIconLoading?: boolean;
     RightIconLoading?: boolean;
 };
-//# sourceMappingURL=ButtonGoupIconProps.d.ts.map

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts

@@ -2,4 +2,3 @@ import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider, leftIconLoading, RightIconLoading, }: ButtonGroupIconProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ButtonGroupIcon.d.ts.map

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -6,10 +6,11 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const color_1 = require("../../Theme/tokens/builders/color");
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {
-    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
     const textRef = (0, react_1.useRef)(null);
@@ -23,10 +24,12 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
         };
         // Use setTimeout to ensure DOM is fully rendered
         const timeoutId = setTimeout(checkTruncation, 0);
-        window.addEventListener("resize", checkTruncation);
+        const onResize = (0, rafThrottle_1.rafThrottle)(checkTruncation);
+        window.addEventListener("resize", onResize);
         return () => {
             clearTimeout(timeoutId);
-            window.removeEventListener("resize", checkTruncation);
+            onResize.cancel();
+            window.removeEventListener("resize", onResize);
         };
     }, [buttonText]);
     const handleRightIconClick = () => {
@@ -46,38 +49,37 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
     // keep the segments transparent (so it doesn't restart per button/icon), with a
     // translucent-white hover overlay for per-segment feedback.
     const isGradient = variant === "gradient";
-    const gradientStops = (_a = theme.colors.gradient) !== null && _a !== void 0 ? _a : {
-        from: theme.colors.primary[400],
-        to: theme.colors.primary[700],
-    };
+    const gradientStops = theme.colors.gradient;
     const gradientBg = `linear-gradient(135deg, ${gradientStops.from} 0%, ${gradientStops.to} 100%)`;
     const gradientInk = (0, accentText_1.onGradient)(gradientStops.from, gradientStops.to, theme.colors.white, theme.colors.black);
+    const whiteRgb = (0, color_1.hexToRgb)(theme.colors.white);
+    const whiteOverlay = (alpha) => `rgba(${whiteRgb.r}, ${whiteRgb.g}, ${whiteRgb.b}, ${alpha})`;
     const gradientItemSx = isGradient
         ? {
             color: gradientInk,
             bg: "transparent",
             bgImage: "none",
             boxShadow: "none",
-            _hover: { bg: "whiteAlpha.200", boxShadow: "none" },
-            _active: { bg: "whiteAlpha.300" },
+            _hover: { bg: whiteOverlay(0.08), boxShadow: "none" },
+            _active: { bg: whiteOverlay(0.16) },
         }
         : undefined;
     return ((0, jsx_runtime_1.jsxs)(react_2.ButtonGroup, { size: size, isAttached: true, variant: isGradient ? "solid" : variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle, sx: isGradient
-            ? { bgImage: gradientBg, color: gradientInk, borderRadius: "0.5rem", overflow: "hidden" }
-            : undefined, children: [leftIcon && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: "whiteAlpha.400", maxW: "200px", sx: gradientItemSx, children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? ((0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { zIndex: 99 }, children: (0, jsx_runtime_1.jsx)(react_2.MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, 
+            ? { bgImage: gradientBg, color: gradientInk, borderRadius: "lg", overflow: "hidden" }
+            : undefined, children: [leftIcon && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? ((0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { zIndex: 99 }, children: (0, jsx_runtime_1.jsx)(react_2.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.
-                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
+                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: theme.colors.boxborder[500], borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
                                     display: "flex",
                                     alignItems: "center",
                                     gap: "0.5rem",
                                     mx: "0.375rem",
                                     px: "0.625rem",
                                     py: "0.5rem",
-                                    borderRadius: "7px",
+                                    borderRadius: "lg",
                                     fontSize: "13px",
                                     fontWeight: 500,
                                     color: theme.colors.gray[700],
@@ -86,9 +88,9 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                     ...(divider
                                         ? {
                                             mx: 0,
-                                            borderRadius: 0,
+                                            borderRadius: "none",
                                             borderBottom: "1px solid",
-                                            borderColor: "blackAlpha.100",
+                                            borderColor: theme.colors.boxborder[300],
                                         }
                                         : {}),
                                     _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },

package/dist/Components/Buttons/Buttons.d.ts

@@ -1,4 +1,3 @@
 import { ButtonsProps } from './ButtonsProps';
 declare const Buttons: ({ onClick, label, className, disabled }: ButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export default Buttons;
-//# sourceMappingURL=Buttons.d.ts.map

package/dist/Components/Buttons/ButtonsProps.d.ts

@@ -4,4 +4,3 @@ export type ButtonsProps = {
     className?: string;
     disabled?: boolean;
 };
-//# sourceMappingURL=ButtonsProps.d.ts.map

package/dist/Components/Card/Card.d.ts

@@ -1,3 +1,2 @@
 import { CardProps } from "./CardProps";
 export default function Card({ key, maxW, align, variant, direction, justify, children, size, color, overflow, sx, }: CardProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Card.d.ts.map

package/dist/Components/Card/CardProps.d.ts

@@ -11,4 +11,3 @@ export type CardProps = Pick<ChakraCardProps, "direction" | "maxW" | "align" | "
     dividersize?: string;
     dividervariant?: "solid" | "dashed";
 };
-//# sourceMappingURL=CardProps.d.ts.map

package/dist/Components/Card/PaymentCard/PaymentCard.d.ts

@@ -1,4 +1,3 @@
 import { PaymentCardProps } from "./PaymentCardProps";
 declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, isRenewal, }: PaymentCardProps) => import("react/jsx-runtime").JSX.Element;
 export default PaymentCard;
-//# sourceMappingURL=PaymentCard.d.ts.map

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -25,4 +25,3 @@ export type Plan = {
     buttonLoadingText?: string;
     priceDescription?: string;
 };
-//# sourceMappingURL=PaymentCardProps.d.ts.map

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

@@ -1,3 +1,2 @@
 import { CheckboxProps } from "./CheckboxProps";
-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, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Checkbox.d.ts.map
+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, ...aria }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Checkbox/Checkbox.js

@@ -10,7 +10,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-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, }) {
+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 }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const controlSize = size === "sm" ? "1rem"
         : size === "md" ? "1.25rem"
@@ -27,7 +27,7 @@ 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, { 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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { ...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: {
                     ...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.8125rem", 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.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));

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

@@ -1,3 +1,2 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const Checkbox: ComponentStyleConfig;
-//# sourceMappingURL=Checkbox.styles.d.ts.map

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

@@ -1,16 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 exports.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 = (0, outlineRung_1.resolveHoverTint)(palette[600], palette[600]);
         return {
             control: {
                 width: "1.25rem",
                 height: "1.25rem",
                 borderWidth: "1.6px",
-                borderRadius: "0.25rem",
+                borderRadius: "base",
                 transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
                 _disabled: {
                     bg: theme.colors.background[50],
@@ -27,13 +34,17 @@ exports.Checkbox = {
                 _checked: {
                     bg: palette[600],
                     borderColor: palette[600],
+                    _hover: {
+                        bg: hoverChecked,
+                        borderColor: hoverChecked,
+                    },
                 },
                 _hover: {
                     bg: theme.colors.background[100],
                     borderColor: palette[400],
                     _checked: {
-                        bg: palette[600],
-                        borderColor: palette[600],
+                        bg: hoverChecked,
+                        borderColor: hoverChecked,
                     },
                     _indeterminate: {
                         bg: "none",

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

@@ -1,5 +1,5 @@
 import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
-export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick"> & {
+export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick" | "aria-label" | "aria-labelledby" | "aria-describedby" | "id"> & {
     label?: string;
     labelFontSize?: string;
     showLabelTooltip?: boolean;
@@ -14,4 +14,3 @@ export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "s
     helperText?: string;
     labelSx?: React.CSSProperties;
 };
-//# sourceMappingURL=CheckboxProps.d.ts.map

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

@@ -3,4 +3,3 @@ declare const ErrorComponent: ({ error, errorClassName, }: {
     errorClassName?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ErrorComponent;
-//# sourceMappingURL=ErrorComponent.d.ts.map

package/dist/Components/Common/ErrorComponent.js

@@ -2,16 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const ErrorComponent = ({ error, errorClassName, }) => {
-    var _a, _b, _c, _d;
-    const theme = (0, react_2.useTheme)();
-    // [500] alone fails AA on the page canvas in every brand — step to a darker rung instead.
-    const errorFill = (0, accentText_1.accentTextOnCanvas)((_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) !== null && _b !== void 0 ? _b : theme.colors.red, (_d = (_c = theme.colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : "#ffffff");
-    // errorFill is tuned for text-on-page-canvas, not for carrying a white mark on top of itself —
-    // pick the mark ink structurally (onFilled) instead of assuming white always clears AA on it.
-    const markInk = (0, accentText_1.onFilled)(errorFill, theme.colors.white, theme.colors.black);
+    const { colors } = (0, useCustomTheme_1.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 = (0, accentText_1.onFilled)(errorFill, colors.white, colors.black);
     return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), (0, jsx_runtime_1.jsx)("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), (0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: error })] }));
 };
 exports.default = ErrorComponent;

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

@@ -1,5 +1,5 @@
-declare const ErrorMessage: ({ errorMessage }: {
+declare const ErrorMessage: ({ errorMessage, id }: {
     errorMessage?: string;
+    id?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ErrorMessage;
-//# sourceMappingURL=ErrorMessage.d.ts.map

package/dist/Components/Common/ErrorMessage.js

@@ -4,14 +4,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const ErrorMessage = ({ errorMessage }) => {
-    var _a, _b;
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // red[500] alone fails AA on the page canvas (~3.4:1 vs the ~4.5 bar) in every brand — step
-    // to a darker rung of the same scale instead of hardcoding one, since a manual retune of a
-    // vivid-alert red collides with its own darker rungs before it clears AA (see red/error
-    // scale comments in each brand's palette.light.ts).
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff"), fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+// `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.
+const ErrorMessage = ({ errorMessage, id }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, align: "center", color: colors.semanticText.error, fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
 };
 exports.default = ErrorMessage;

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

@@ -1,4 +1,4 @@
-export declare const TextLabel: ({ label, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
+export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
     label: string;
     id?: string;
     isInformation?: boolean;
@@ -10,4 +10,3 @@ export declare const TextLabel: ({ label, isRequired, isInformation, information
     clampLines?: number;
     inline?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=FormLabel.d.ts.map

package/dist/Components/Common/FormLabel.js

@@ -7,11 +7,9 @@ exports.TextLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-const TextLabel = ({ label, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
-    var _a, _b, _c;
+const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const clampStyles = clampLines ? {
         display: "-webkit-box",
@@ -21,6 +19,19 @@ const TextLabel = ({ label, isRequired = false, isInformation = false, informati
         textOverflow: "ellipsis",
         whiteSpace: "normal",
     } : {};
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", 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", children: (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: (0, accentText_1.accentTextOnCanvas)((_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error, (_c = (_b = theme.colors.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff"), 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 wrapperStyles = {
+        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",
+    };
+    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 }) }))] }));
+    // 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.
+    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 }));
 };
 exports.TextLabel = TextLabel;

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

@@ -3,4 +3,3 @@ type Props = {
 };
 declare const FormattedDescription: ({ content }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default FormattedDescription;
-//# sourceMappingURL=FormattedDescription.d.ts.map

package/dist/Components/Common/FormattedDescription.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const InlineText = ({ text }) => {
     const nodes = [];
     let i = 0;
@@ -41,6 +42,7 @@ const InlineText = ({ text }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nodes });
 };
 const FormattedDescription = ({ content }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (!content)
         return null;
     const lines = content.split(/\r?\n/);
@@ -53,7 +55,7 @@ const FormattedDescription = ({ content }) => {
                 const weight = level === 1 ? "bold" : level === 2 ? "semibold" : "medium";
                 return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: size, fontWeight: weight, mt: idx === 0 ? 0 : 2, textAlign: "left", children: (0, jsx_runtime_1.jsx)(InlineText, { text: text }) }, `h-${idx}`));
             }
-            return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: "gray.700", mt: idx === 0 ? 0 : 2, textAlign: "justify", children: (0, jsx_runtime_1.jsx)(InlineText, { text: line }) }, `p-${idx}`));
+            return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.text[500], mt: idx === 0 ? 0 : 2, textAlign: "justify", children: (0, jsx_runtime_1.jsx)(InlineText, { text: line }) }, `p-${idx}`));
         }) }));
 };
 exports.default = FormattedDescription;

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

@@ -1,5 +1,5 @@
-declare const HelperText: ({ helperText }: {
+declare const HelperText: ({ helperText, id }: {
     helperText: string;
+    id?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default HelperText;
-//# sourceMappingURL=HelperText.d.ts.map

package/dist/Components/Common/HelperText.js

@@ -3,8 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const HelperText = ({ helperText }) => {
+const HelperText = ({ helperText, id }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.FormHelperText, { mt: 1, fontSize: 14, color: theme.colors.gray[500], children: helperText }));
+    const field = (0, react_1.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] };
+    // 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.FormHelperText, { ...idProp, ...style, children: helperText }));
 };
 exports.default = HelperText;

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

@@ -1,7 +1,8 @@
-declare const Label: ({ label, labelClassName, isRequired, }: {
+declare const Label: ({ label, htmlFor, labelClassName, isRequired, }: {
     label: string;
+    /** id of the control being labelled. Omit rather than guess — `label` text is not an id. */
+    htmlFor?: string;
     labelClassName?: string;
     isRequired?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Label;
-//# sourceMappingURL=Label.d.ts.map

package/dist/Components/Common/Label.js

@@ -2,14 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-const react_2 = require("@chakra-ui/react");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const Label = ({ label, labelClassName, isRequired, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const theme = (0, react_2.useTheme)();
-    const headerColor = (_b = (_a = theme.colors.header) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[500];
-    // [500] alone fails AA on the page canvas in every brand — step to a darker rung instead.
-    const errorColor = (0, accentText_1.accentTextOnCanvas)((_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error, (_f = (_e = theme.colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : "#ffffff");
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: label, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: headerColor, children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: errorColor, ml: 1, children: "*" }))] }));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: colors.header[500], children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: colors.semanticText.error, ml: 1, children: "*" }))] }));
 };
 exports.default = Label;

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

@@ -1,5 +1,5 @@
 import { CustomThemeProps } from "../../Theme/themeProps";
-export declare const FIELD_RADIUS = "0.5rem";
+export declare const FIELD_RADIUS = "lg";
 export declare const FIELD_BORDER_WIDTH = "0.063rem";
 export declare const FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
 type FieldState = {
@@ -21,4 +21,3 @@ export declare const getFieldStateStyles: (theme: CustomThemeProps, { error, foc
 /** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
 export declare const fieldFocusRing: (theme: CustomThemeProps, error?: boolean) => string;
 export {};
-//# sourceMappingURL=fieldStyles.d.ts.map

package/dist/Components/Common/fieldStyles.js

@@ -4,7 +4,7 @@
 // `Input` config exactly instead of each re-deriving border/focus/bg values.
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fieldFocusRing = exports.getFieldStateStyles = exports.FIELD_TRANSITION = exports.FIELD_BORDER_WIDTH = exports.FIELD_RADIUS = void 0;
-exports.FIELD_RADIUS = "0.5rem";
+exports.FIELD_RADIUS = "lg";
 exports.FIELD_BORDER_WIDTH = "0.063rem";
 exports.FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
 /**
@@ -12,16 +12,15 @@ exports.FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
  * (e.g. SearchSelect, SingleDatePicker). Returns Chakra style props.
  */
 const getFieldStateStyles = (theme, { error = false, focused = false } = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     // [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 = (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    const idleBorder = theme.colors.boxborder[800];
     const primary = theme.colors.primary[500];
-    const errorColor = (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500];
-    const ringPrimary = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary;
-    const ringError = (_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.error;
+    const errorColor = theme.colors.semanticText.error;
+    const ringPrimary = theme.colors.boxShadow.primary;
+    const ringError = theme.colors.boxShadow.error;
     return {
-        bg: (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[50],
+        bg: theme.colors.gray[50],
         borderRadius: exports.FIELD_RADIUS,
         border: `${exports.FIELD_BORDER_WIDTH} solid`,
         borderColor: error ? errorColor : focused ? primary : idleBorder,
@@ -35,5 +34,5 @@ const getFieldStateStyles = (theme, { error = false, focused = false } = {}) =>
 };
 exports.getFieldStateStyles = getFieldStateStyles;
 /** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
-const fieldFocusRing = (theme, error = false) => { var _a, _b; return `0 0 0 0.125rem ${error ? (_a = theme.colors.boxShadow) === null || _a === void 0 ? void 0 : _a.error : (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary}`; };
+const fieldFocusRing = (theme, error = false) => `0 0 0 0.125rem ${error ? theme.colors.boxShadow.error : theme.colors.boxShadow.primary}`;
 exports.fieldFocusRing = fieldFocusRing;

package/dist/Components/ContactForm/ContactForm.d.ts

@@ -1,4 +1,3 @@
 import { ContactFormProps } from "./ContactFormProps";
 declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, buttonColorScheme, buttonSx, }: ContactFormProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactForm;
-//# sourceMappingURL=ContactForm.d.ts.map