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

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

@@ -38,7 +38,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",

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,6 +6,7 @@ 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 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, }) {
@@ -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 = () => {
@@ -63,21 +66,21 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
         }
         : 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" }
+            ? { 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: "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, 
                             // 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: "blackAlpha.100", 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,7 +89,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                     ...(divider
                                         ? {
                                             mx: 0,
-                                            borderRadius: 0,
+                                            borderRadius: "none",
                                             borderBottom: "1px solid",
                                             borderColor: "blackAlpha.100",
                                         }

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

@@ -8,7 +8,7 @@ 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");
+    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 : accentText_1.DEFAULT_CANVAS);
     // 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);

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

@@ -5,13 +5,15 @@ 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 }) => {
+// `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 }) => {
     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" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, 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 : accentText_1.DEFAULT_CANVAS), 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

@@ -10,7 +10,7 @@ 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, }) => {
+const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const clampStyles = clampLines ? {
@@ -21,6 +21,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: (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 : accentText_1.DEFAULT_CANVAS), 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/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

@@ -4,12 +4,12 @@ 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, }) => {
+const Label = ({ label, htmlFor, 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 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 : accentText_1.DEFAULT_CANVAS);
+    return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: htmlFor, 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: "*" }))] }));
 };
 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";
 /**

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

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

@@ -10,4 +10,3 @@ export interface ContactFormProps {
     buttonColorScheme?: "primary" | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "secondary" | "tertiary" | undefined;
     buttonSx?: SystemStyleObject;
 }
-//# sourceMappingURL=ContactFormProps.d.ts.map

package/dist/Components/CopyButton/CopyButton.d.ts

@@ -20,4 +20,3 @@ export interface CopyButtonProps {
 }
 declare const CopyButton: React.FC<CopyButtonProps>;
 export default CopyButton;
-//# sourceMappingURL=CopyButton.d.ts.map

package/dist/Components/CopyButton/CopyButton.js

@@ -35,10 +35,10 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     const accent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.backgroundColor.main);
     const success = theme.colors.semantic.success[500];
     if (variant === "menu-item") {
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "6px", transition: "background 0.15s ease", _hover: { bg: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: success }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: accent }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent, children: copied ? copiedLabel : label })] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: success }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: accent }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent, children: copied ? copiedLabel : label })] }));
     }
     if (variant === "button") {
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "8px", border: "1px solid", 
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
             // boxborder[800], not raw gray[200]: this renders as a real `<button>` (as="button"),
             // so its border is a control boundary — WCAG 1.4.11 needs >=3.0 against any named
             // surface up to `muted` (lightest); gray[200] fails there in dark mode.

package/dist/Components/CustomModulesTable/CustomModulesTable.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { CustomModulesTableProps } from "./CustomModulesTableProps";
 declare const CustomModulesTable: React.FC<CustomModulesTableProps>;
 export default CustomModulesTable;
-//# sourceMappingURL=CustomModulesTable.d.ts.map

package/dist/Components/CustomModulesTable/CustomModulesTable.js

@@ -29,16 +29,16 @@ const DEFAULT_LABELS = {
     deleteConfirmPrefix: "Are you sure you want to delete",
 };
 const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, isDeleting = false, onUpdateModule, onDeleteModule, labels: labelOverrides, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [editTarget, setEditTarget] = (0, react_1.useState)(null);
     const [deleteTarget, setDeleteTarget] = (0, react_1.useState)(null);
-    const border = (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : "#E2E8F0";
-    const surface = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FFFFFF";
-    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
-    const heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
-    const headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
+    const border = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200];
+    const surface = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _f === void 0 ? void 0 : _f.light;
+    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[500];
+    const heading = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[800]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[800];
+    const headBg = (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : (_q = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _q === void 0 ? void 0 : _q.tableHeader;
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
@@ -47,10 +47,10 @@ const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, is
         borderColor: border,
         py: 3,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => {
                         var _a, _b;
                         return ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md", startColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[100], endColor: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[400] }, idx));
-                    }) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_o = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _o !== void 0 ? _o : "", isLoading: isUpdating, onSubmit: async (name) => {
+                    }) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_r = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _r !== void 0 ? _r : "", isLoading: isUpdating, onSubmit: async (name) => {
                     if (editTarget) {
                         await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
                             moduleId: editTarget.module_id,

package/dist/Components/CustomModulesTable/CustomModulesTableProps.d.ts

@@ -52,4 +52,3 @@ export interface DeleteModuleModalProps {
     onConfirm: () => void;
     labels: Required<Pick<CustomModulesTableLabels, "confirmDeletion" | "deleteConfirmPrefix" | "cancel" | "delete">>;
 }
-//# sourceMappingURL=CustomModulesTableProps.d.ts.map

package/dist/Components/CustomModulesTable/DeleteModuleModal.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { DeleteModuleModalProps } from "./CustomModulesTableProps";
 declare const DeleteModuleModal: React.FC<DeleteModuleModalProps>;
 export default DeleteModuleModal;
-//# sourceMappingURL=DeleteModuleModal.d.ts.map

package/dist/Components/CustomModulesTable/DeleteModuleModal.js

@@ -9,8 +9,8 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_j = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#FEF2F2", color: (_p = (_m = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _k === void 0 ? void 0 : _k.error) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[500]) !== null && _p !== void 0 ? _p : "#EF4444", children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[600], fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 600, color: (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[800], children: moduleName }), "?"] }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50], color: (_l = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[500], children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { color: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[600], fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 600, color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[800], children: moduleName }), "?"] }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
 };
 exports.default = DeleteModuleModal;

package/dist/Components/CustomModulesTable/EditModuleModal.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { EditModuleModalProps } from "./CustomModulesTableProps";
 declare const EditModuleModal: React.FC<EditModuleModalProps>;
 export default EditModuleModal;
-//# sourceMappingURL=EditModuleModal.d.ts.map

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -16,6 +16,10 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, borderColor: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[200], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
+                                // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
+                                // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
+                                // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
+                                borderColor: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _e === void 0 ? void 0 : _e[800]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[400], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 exports.default = EditModuleModal;