pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

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

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

@@ -0,0 +1,17 @@
+import React from "react";
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// NOTE: matches by element type through nested Fragments, so `<>{cond && <Footer />}</>` is not dropped.
+export const findSlot = (children, slot) => {
+    for (const child of React.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === React.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};

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

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

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

@@ -0,0 +1,3 @@
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../Theme/chakra/focusRing.styles.js";
+// NOTE: for chrome painted on a fixed dark surface, where the palette's focusRing pair is tuned for the page canvas instead.
+export const surfaceFocusRing = (surface, ring) => `0 0 0 ${FOCUS_HALO_WIDTH}px ${surface}, 0 0 0 ${FOCUS_RING_WIDTH}px ${ring}`;

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Box, Flex, HStack, VStack, Text, } from "@chakra-ui/react";
+import { AlertTriangle } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+/** Cancel/Confirm modal for destructive prompts; focus starts on Cancel and Confirm never closes the dialog itself. */
+const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, entityName, entityKind, dependents, consequence, alternative, isConfirmDisabled: isConfirmHeld = false, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
+    const { colors } = useCustomTheme();
+    const cancelRef = useRef(null);
+    const [typedText, setTypedText] = useState("");
+    const requiresTypedConfirmation = confirmationText !== undefined;
+    const isAlternativeLoading = (alternative === null || alternative === void 0 ? void 0 : alternative.isLoading) === true;
+    const isConfirmDisabled = isConfirmLoading ||
+        isAlternativeLoading ||
+        isConfirmHeld ||
+        (requiresTypedConfirmation && typedText !== confirmationText);
+    const swatch = resolveSoftTone(colors, tone === "destructive" ? colors.semantic.error : colors.primary, colors.surfaceRaised);
+    const isEntityPrompt = entityName !== undefined;
+    const resolvedTitle = title !== null && title !== void 0 ? title : `Delete ${entityKind ? `${entityKind} ` : ""}"${entityName}"?`;
+    const dependentFacts = dependents ? dependents.filter(Boolean) : [];
+    const resolvedConsequence = consequence !== null && consequence !== void 0 ? consequence : (isEntityPrompt ? "This cannot be undone." : undefined);
+    const hasFacts = dependentFacts.length > 0 || resolvedConsequence !== undefined || (alternative === null || alternative === void 0 ? void 0 : alternative.description) !== undefined;
+    const actions = (_jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [_jsx(Button, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && (isConfirmLoading || isAlternativeLoading) }), alternative && (_jsx(Button, { label: alternative.label, onClick: alternative.onSelect, colorScheme: "primary", size: "sm", isLoading: alternative.isLoading, loadingText: alternative.label, isDisabled: isConfirmLoading })), _jsx(Button, { label: confirmLabel, onClick: onConfirm, variant: alternative ? "outline" : undefined, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
+    const facts = hasFacts && (_jsxs(VStack, { spacing: 3, align: "stretch", mt: bodyLayout === "flush" && children ? 3 : 0, mb: bodyLayout === "flush" ? 4 : 0, children: [dependentFacts.length > 0 && (_jsx(Text, { fontSize: "sm", fontWeight: 500, children: dependentFacts.join(" · ") })), resolvedConsequence !== undefined && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, children: resolvedConsequence })), (alternative === null || alternative === void 0 ? void 0 : alternative.description) !== undefined && (_jsx(Box, { fontSize: "sm", p: 3, borderRadius: "md", border: "1px solid", borderColor: raisedRule(colors), children: alternative.description }))] }));
+    const body = requiresTypedConfirmation ? (_jsxs(_Fragment, { children: [children, facts, _jsx(TextInput, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (_jsxs(_Fragment, { children: [children, facts] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg !== null && iconBg !== void 0 ? iconBg : swatch.bg, color: iconColor !== null && iconColor !== void 0 ? iconColor : swatch.fg, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: resolvedTitle })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
+};
+export default ConfirmDialog;

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

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

package/dist/esm/Components/ContactForm/ContactForm.js

@@ -6,7 +6,8 @@ import { CircleCheck, CircleX } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import InputTextArea from "../InputTextArea/InputTextArea.js";
 import Button from "../Button/Button.js";
-const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
+/** Self-contained enquiry form — validates, calls onSubmit or POSTs to apiKey, and renders its own success/error alert. */
+const ContactForm = ({ apiKey, onSubmit, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
     const { colors } = useCustomTheme();
     const [formData, setFormData] = useState({
         firstName: "",
@@ -51,7 +52,7 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
             return;
         if (!validate())
             return;
-        if (!apiKey) {
+        if (!onSubmit && !apiKey) {
             setResponse({
                 title: "API key missing",
                 isSuccess: false,
@@ -72,17 +73,21 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
         };
         try {
             setIsLoading(true);
-            const response = await fetch(apiKey, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify(payload),
-            });
-            const result = await response.json();
-            if (!response.ok)
-                throw new Error(result.message || "Submission failed");
-            // onSubmit(formData);
+            if (onSubmit) {
+                await onSubmit(payload);
+            }
+            else if (apiKey) {
+                const response = await fetch(apiKey, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(payload),
+                });
+                const result = await response.json();
+                if (!response.ok)
+                    throw new Error(result.message || "Submission failed");
+            }
             setFormData({
                 firstName: "",
                 lastName: "",
@@ -106,6 +111,6 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
             setIsLoading(false);
         }
     };
-    return (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "2xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? (_jsxs(Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: "bold", variant: "solid", mb: 1, children: [(response === null || response === void 0 ? void 0 : response.isSuccess) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: (e) => handleChange("firstName", e.target.value), error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: (e) => handleChange("phone", e.target.value), isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsxs(FormControl, { children: [_jsx(Text, { fontSize: "sm", mb: 1, children: "Enquiry" }), _jsx(Box, { children: _jsx(InputTextArea, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }) })] }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
+    return (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? (_jsxs(Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: 700, variant: "solid", mb: 1, children: [(response === null || response === void 0 ? void 0 : response.isSuccess) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: (e) => handleChange("firstName", e.target.value), error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: (e) => handleChange("phone", e.target.value), isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsx(InputTextArea, { label: "Enquiry", placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
 };
 export default ContactForm;

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -1,11 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
+import { Box, Flex, IconButton, Text, VisuallyHidden } from "@chakra-ui/react";
 import { Check, Copy } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
-const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
+import { onActivationKey } from "../Common/activationKey.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
+/** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
+const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, onCopyError, }) => {
     const theme = useCustomTheme();
     const [copied, setCopied] = useState(false);
     const timer = useRef();
@@ -20,22 +27,24 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
             timer.current = setTimeout(() => setCopied(false), feedbackDuration);
         }
         catch {
-            /* clipboard unavailable — silently ignore */
+            onCopyError === null || onCopyError === void 0 ? void 0 : onCopyError(value);
         }
     };
-    // primary[500] is tuned for a white label on a filled button, not for reading as ink on the
-    // canvas — it fails AA here in 5 of 7 brands in dark mode. accentTextOnCanvas steps to the
-    // nearest rung that clears AA against the canvas this button actually sits on.
+    // NOTE: primary[500] fails AA as canvas ink in 5/7 brands (dark) — accentTextOnCanvas steps to a clearing rung.
     const accent = accentTextOnCanvas(theme.colors.primary, theme.colors.backgroundColor.main);
     const success = theme.colors.semanticText.success;
+    const rowBackgrounds = listRowBackgrounds(theme.colors);
+    const announcement = (_jsx(VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: copied ? copiedLabel : "" }));
     if (variant === "menu-item") {
-        return (_jsxs(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 ? _jsx(Check, { size: iconSize, color: success }) : _jsx(Copy, { size: iconSize, color: accent }), _jsx(Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent, children: copied ? copiedLabel : label })] }));
+        const hoverAccent = accentTextOnCanvas(theme.colors.primary, rowBackgrounds.active);
+        const hoverSuccess = liftToContrast(theme.colors.semantic.success[500], rowBackgrounds.active, AA_NORMAL_TEXT);
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { role: "button", tabIndex: 0, align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: BACKGROUND_TRANSITION, _hover: { bg: rowBackgrounds.active }, _focusVisible: focusVisibleRing(theme.colors), onClick: handleCopy, onKeyDown: onActivationKey(handleCopy), children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
     }
     if (variant === "button") {
-        return (_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
-            // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
-            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
+                    // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
+                    borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.text[700], fontSize: "sm", fontWeight: 500, transition: transitionFor(["border-color", "color"]), _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }), announcement] }));
     }
-    return (_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.gray[500], _hover: { color: accent, bg: theme.colors.primary[50] }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }), announcement] }));
 };
 export default CopyButton;

package/dist/esm/Components/CouponField/CouponField.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { BadgeCheck, ChevronDown, Ticket } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+const DEFAULT_LABELS = {
+    prompt: "Have a coupon?",
+    inputLabel: "Coupon code",
+    placeholder: "Enter code",
+    apply: "Apply",
+    remove: "Remove",
+    suggestionsTitle: "Available offers",
+    applied: (code) => `${code} applied`,
+    saved: (amount) => `You saved ${amount}`,
+    applySuggestion: (code) => `Apply ${code}`,
+};
+const normalise = (raw) => raw.replace(/\s+/g, "").toUpperCase();
+/** Coupon entry that stays out of the way: a quiet prompt row, a field with tap-to-apply offers, then an applied state with the saving. */
+const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply, onRemove, suggestions, value, defaultValue = "", onValueChange, expanded, defaultExpanded = false, onExpandedChange, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const hoverFill = tonalHover(colors);
+    const uid = useId();
+    const panelId = `${uid}-panel`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const [innerText, setInnerText] = useState(defaultValue);
+    const [innerOpen, setInnerOpen] = useState(defaultExpanded);
+    const text = value !== null && value !== void 0 ? value : innerText;
+    const applying = status === "applying";
+    const open = (expanded !== null && expanded !== void 0 ? expanded : innerOpen) || applying || status === "error";
+    const setText = (next) => {
+        if (value === undefined)
+            setInnerText(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    };
+    const setOpen = (next) => {
+        if (expanded === undefined)
+            setInnerOpen(next);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+    };
+    const submit = (code) => {
+        const clean = normalise(code);
+        if (!clean || applying)
+            return;
+        onApply === null || onApply === void 0 ? void 0 : onApply(clean);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Enter" && event.target.tagName === "INPUT") {
+            event.preventDefault();
+            submit(text);
+        }
+    };
+    const success = resolveSoftTone(colors, toneScale(colors, "success"), colors.background[100]);
+    if (status === "applied" && appliedCode) {
+        return (_jsxs(Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "2xl", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [_jsx(Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: _jsx(BadgeCheck, { size: 16, "aria-hidden": true }) }), _jsxs(Box, { flex: 1, minW: 0, role: "status", children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], noOfLines: 1, children: copy.applied(appliedCode) }), savedAmount !== undefined && savedAmount > 0 && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: NUMERIC_TEXT, children: copy.saved(formatPrice(savedAmount, { currency, locale })) }))] }), _jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
+    }
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [_jsxs(Box, { as: "button", type: "button", "aria-expanded": open, "aria-controls": panelId, disabled: applying || status === "error", onClick: () => setOpen(!open), display: "flex", alignItems: "center", gap: 3, w: "100%", minH: "3rem", px: 4, borderRadius: "2xl", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Ticket, { size: 18, "aria-hidden": true }), _jsx(Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), _jsx(Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: transitionFor(["transform"]), sx: reducedMotionSx({ transform: open ? "rotate(180deg)" : "none" }), children: _jsx(ChevronDown, { size: 16 }) })] }), _jsxs(Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [_jsxs(Flex, { gap: 2, align: "flex-start", children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(TextInput, { size: "lg", variant: "filled", "aria-label": copy.inputLabel, placeholder: copy.placeholder, value: text, onChange: (event) => setText(normalise(event.target.value)), error: status === "error", errorMessage: status === "error" ? error : undefined, isDisabled: applying, autoComplete: "off", autoCapitalize: "characters", spellCheck: false }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && (_jsxs(Box, { mt: 4, children: [_jsx(Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), _jsx(Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => (_jsx(Box, { as: "li", children: _jsxs(Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
+                                            setText(s.code);
+                                            submit(s.code);
+                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "xl", bg: colors.background[100], textAlign: "left", transition: transitionFor(["background-color"]), _hover: { bg: hoverFill }, _disabled: { cursor: "not-allowed", opacity: DISABLED_OPACITY }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Text, { as: "span", flexShrink: 0, px: 2, py: 1, borderRadius: "lg", bg: colors.background[200], fontSize: "xs", fontWeight: 700, letterSpacing: "0.04em", color: colors.header[900], children: s.code }), _jsxs(Box, { as: "span", flex: 1, minW: 0, children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), _jsx(Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), _jsx(VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
+};
+export default CouponField;

package/dist/esm/Components/CouponField/CouponFieldProps.js

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

package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js

@@ -3,10 +3,13 @@ import { useMemo, useState } from "react";
 import { Box, Flex, Heading, HStack, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
 import { Boxes, Pencil, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
 import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import EditModuleModal from "./EditModuleModal.js";
 import DeleteModuleModal from "./DeleteModuleModal.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const DEFAULT_LABELS = {
     title: "Custom Modules",
     moduleName: "Module Name",
@@ -23,26 +26,28 @@ const DEFAULT_LABELS = {
     confirmDeletion: "Confirm Deletion",
     deleteConfirmPrefix: "Are you sure you want to delete",
 };
+/** Card with a two-column module list (name, owner) and per-row Edit and Delete dialogs; loading shows skeleton bars, empty shows an empty state. */
 const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, isDeleting = false, onUpdateModule, onDeleteModule, labels: labelOverrides, }) => {
     var _a;
     const { colors } = useCustomTheme();
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [editTarget, setEditTarget] = useState(null);
     const [deleteTarget, setDeleteTarget] = useState(null);
-    const border = colors.boxborder[200];
+    const edge = colors.boxborder[200];
     const surface = colors.background[50];
+    const rule = cardRule(colors);
     const muted = colors.textMuted;
     const heading = colors.text[800];
-    const headBg = colors.backgroundColor.tableHeader;
+    const headBg = bandOn(colors.backgroundColor.tableHeader, surface);
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: rule,
         py: 3,
     };
-    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
+    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: BACKGROUND_TRANSITION, children: [_jsx(Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: rule, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: rule, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
                     if (editTarget) {
                         await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
                             moduleId: editTarget.module_id,

package/dist/esm/Components/CustomModulesTable/DeleteModuleModal.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
-import { AlertTriangle, Trash2 } from "lucide-react";
+import { Text } from "@chakra-ui/react";
+import { Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-import Button from "../Button/Button.js";
+import ConfirmDialog from "../ConfirmDialog/ConfirmDialog.js";
+/** Confirmation dialog for deleting a module; used by CustomModulesTable. */
 const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: colors.semantic.error[50], color: accentTextOnCanvas(colors.semantic.error, colors.semantic.error[50]), children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", _jsx(Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+    return (_jsx(ConfirmDialog, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: colors.semantic.error[50], iconColor: accentTextOnCanvas(colors.semantic.error, colors.semantic.error[50]), cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: _jsx(Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: _jsxs(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", _jsx(Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }) }));
 };
 export default DeleteModuleModal;

package/dist/esm/Components/CustomModulesTable/EditModuleModal.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, Input, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Button from "../Button/Button.js";
+/** Dialog with one text field to rename a module; used by CustomModulesTable. */
 const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
     const { colors } = useCustomTheme();
     const [name, setName] = useState(initialName);
@@ -10,10 +12,8 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(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].
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
+                                // NOTE: [200] is the decorative divider rung — a real control's outline needs 1.4.11's 3:1, from [800].
                                 borderColor: colors.boxborder[500], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 export default EditModuleModal;