pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.66

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

@@ -1,9 +1,7 @@
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
+import type { DataAttributes } from "../Common/dataAttributes";
 type LayoutProps = Pick<ChakraButtonProps, "as" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "p" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "w" | "minW" | "maxW" | "h" | "minH" | "maxH" | "boxSize" | "flex" | "flexShrink" | "flexGrow" | "alignSelf" | "justifyContent" | "cursor" | "fontWeight" | "fontSize" | "textAlign" | "whiteSpace" | "_hover" | "_active" | "_focus" | "_focusVisible" | "_disabled" | "isActive" | "onKeyDown" | "onFocus" | "onBlur" | "onPointerDown" | "tabIndex" | "form" | "name" | "value" | "autoFocus" | "role">;
-type DataAttributes = {
-    [key: `data-${string}`]: string | number | boolean | undefined;
-};
-/** Themed Chakra Button (default size "sm"); loading shows a spinner and keeps the width — for a plain unthemed <button>, see the separate Buttons component. */
+/** Themed Chakra Button (default size "sm"); loading shows a spinner and keeps the width. */
 export type ButtonProps = LayoutProps & DataAttributes & Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
     /** Button text; ignored when `children` is passed. No label or children plus an icon = icon-only. */
     label?: string;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -8,6 +8,8 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const color_1 = require("../../Theme/tokens/builders/color");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 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, }) {
@@ -76,7 +78,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                     fontSize: "xs-plus",
                                     fontWeight: 500,
                                     color: theme.colors.text[700],
-                                    transition: "background 0.12s",
+                                    transition: BACKGROUND_TRANSITION,
                                     "& svg": { width: "16px", height: "16px" },
                                     ...(divider
                                         ? {

package/dist/Components/CalendarGrid/CalendarGrid.js

@@ -9,10 +9,12 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const VisuallyHidden_1 = __importDefault(require("../VisuallyHidden/VisuallyHidden"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const calendarMath_1 = require("./calendarMath");
+const activationKey_1 = require("../Common/activationKey");
 const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
 const DEFAULT_LABELS = {
     today: "Today",
@@ -118,7 +120,7 @@ const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventC
                 onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(next);
             return;
         }
-        if ((e.key === "Enter" || e.key === " ") && onDateChange) {
+        if ((0, activationKey_1.isActivationKey)(e) && onDateChange) {
             e.preventDefault();
             onDateChange(cellDate);
         }
@@ -161,9 +163,9 @@ const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventC
                     cellRefs.current.set(key, el);
                 else
                     cellRefs.current.delete(key);
-            }, "data-date": key, "aria-label": label, "aria-current": isToday ? "date" : undefined, tabIndex: active ? 0 : -1, onFocus: () => setFocusedKey(key), onKeyDown: (e) => handleCellKeyDown(e, day), position: "relative", minH: MIN_CELL_HEIGHT[view], p: 1, bg: surface, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, outline: "none", _focusVisible: {
+            }, "data-date": key, "aria-current": isToday ? "date" : undefined, tabIndex: active ? 0 : -1, onFocus: () => setFocusedKey(key), onKeyDown: (e) => handleCellKeyDown(e, day), position: "relative", minH: MIN_CELL_HEIGHT[view], p: 1, bg: surface, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, outline: "none", _focusVisible: {
                 boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors),
-            }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "xs-plus", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), body] }, key));
+            }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "xs-plus", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { position: "absolute", children: label }), body] }, key));
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", wrap: "wrap", gap: 2, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [onDateChange ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: text.today, size: "sm", variant: "outline", onClick: () => onDateChange((0, calendarMath_1.startOfDay)(new Date())) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.previous, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, -1)) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.next, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, 1)) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title })] }), onViewChange ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "group", "aria-label": text[view], gap: 1, children: VIEWS.map((v) => ((0, jsx_runtime_1.jsx)(Button_1.default, { label: text[v], size: "sm", variant: v === view ? "solid" : "outline", "aria-pressed": v === view, onClick: () => onViewChange(v) }, v))) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "grid", "aria-label": title, "aria-busy": isLoading || undefined, "data-view": view, minW: view === "day" ? undefined : "42rem", borderTop: "1px solid", borderLeft: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Grid, { role: "row", templateColumns: template, children: headerDays.map((i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "columnheader", "aria-label": weekdayLong[i], px: 2, py: 1, fontSize: "xs", fontWeight: 600, color: colors.textMuted, bg: colors.backgroundColor.main, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, children: weekdayShort[i] }, i))) }), weeks.map((week, weekIndex) => {
                             const layout = (0, calendarMath_1.layoutWeek)(week, shownEvents, maxLanes);

package/dist/Components/CalendarGrid/CalendarGridProps.d.ts

@@ -27,7 +27,7 @@ export type CalendarGridLabels = {
     more: (count: number) => string;
     /** Accessible name of the "more" button, e.g. "3 more events on Tuesday, 14 October 2026". */
     moreLabel: (count: number, date: string) => string;
-    /** Appended to a day cell's accessible name, e.g. "3 events". */
+    /** Follows the date in a day cell's accessible name, e.g. "3 events"; the cell's own content comes after it. */
     eventCount: (count: number) => string;
 };
 /** Props for the month/week/day event grid; fully controlled through `view` and `date`. */

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

@@ -1,4 +1,5 @@
 import { CardPadding } from "./CardProps";
+/** Themed card; `header` and `footer` render outside the body, `padding` sets density. */
 declare const Card: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").CardProps, "color" | "colorScheme" | "direction" | "padding" | "size" | "justify" | "children" | "variant" | "align"> & {
     dividercolor?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
     dividersize?: string;

package/dist/Components/Card/Card.js

@@ -12,6 +12,7 @@ const PADDING_VALUES = {
     md: "1rem 1.25rem",
     lg: "1.25rem 1.5rem",
 };
+/** Themed card; `header` and `footer` render outside the body, `padding` sets density. */
 const Card = (0, react_1.forwardRef)(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, padding, ...rest }, ref) {
     const cardProps = { ...rest };
     delete cardProps.dividercolor;

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

@@ -6,6 +6,8 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const fieldStyles_1 = require("../Common/fieldStyles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_BORDER_COLOR_BOX_SHADOW_TRANSITION = (0, motion_1.transitionFor)(["background", "border-color", "box-shadow"]);
 // One fill rule for every colour scheme, via resolveFilledSurface — was a flat [600].
 exports.Checkbox = {
     baseStyle: ({ theme, colorScheme = "primary" }) => {
@@ -22,7 +24,7 @@ exports.Checkbox = {
                 borderWidth: "1px",
                 borderRadius: "base",
                 borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors),
-                transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
+                transition: BACKGROUND_BORDER_COLOR_BOX_SHADOW_TRANSITION,
                 _invalid: {
                     borderColor: theme.colors.semanticText.error,
                 },

package/dist/Components/CheckoutKit/selectable.d.ts

@@ -7,18 +7,20 @@ type GroupState = {
     select: (value: string) => void;
 };
 export declare const useSelectableGroup: () => GroupState | null;
+/** Single-select radio group; controlled via `value`, uncontrolled via `defaultValue`. */
 export type SelectableGroupProps = {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     gap?: number;
+    columns?: number;
     children: ReactNode;
     "aria-label"?: string;
     "aria-labelledby"?: string;
     "data-testid"?: string;
 };
 /** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
-export declare const SelectableGroup: ({ value, defaultValue, onValueChange, gap, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }: SelectableGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectableGroup: ({ value, defaultValue, onValueChange, gap, columns, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }: SelectableGroupProps) => import("react/jsx-runtime").JSX.Element;
 /** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
 export declare const selectableSurface: (colors: PaletteProps, { selected, disabled, interactive, ringed }: {
     selected: boolean;

package/dist/Components/CheckoutKit/selectable.js

@@ -6,10 +6,13 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const states_1 = require("../../Theme/tokens/primitives/states");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const tonalHover_1 = require("./tonalHover");
+const activationKey_1 = require("../Common/activationKey");
 const GroupContext = (0, react_1.createContext)(null);
 const useSelectableGroup = () => (0, react_1.useContext)(GroupContext);
 exports.useSelectableGroup = useSelectableGroup;
@@ -17,15 +20,15 @@ const firstEnabledValue = (children) => {
     for (const child of react_1.Children.toArray(children)) {
         if (!(0, react_1.isValidElement)(child))
             continue;
-        const { value, disabled } = child.props;
-        if (typeof value === "string" && !disabled)
+        const { value, disabled, isDisabled } = child.props;
+        if (typeof value === "string" && !disabled && !isDisabled)
             return value;
     }
     return undefined;
 };
 const STEP = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
 /** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
-const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }) => {
+const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, columns = 1, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }) => {
     const [inner, setInner] = (0, react_1.useState)(defaultValue);
     const current = value !== null && value !== void 0 ? value : inner;
     const state = (0, react_1.useMemo)(() => ({
@@ -55,7 +58,7 @@ const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, children
         if (next !== null)
             state.select(next);
     };
-    return ((0, jsx_runtime_1.jsx)(GroupContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: "column", gap: gap, onKeyDown: onKeyDown, "data-testid": testId, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(GroupContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: "column", gap: gap, ...(columns > 1 ? { display: "grid", gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : {}), onKeyDown: onKeyDown, "data-testid": testId, children: children }) }));
 };
 exports.SelectableGroup = SelectableGroup;
 /** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
@@ -63,9 +66,9 @@ const selectableSurface = (colors, { selected, disabled, interactive, ringed })
     bg: colors.background[100],
     borderRadius: "2xl",
     boxShadow: selected ? `inset 0 0 0 2px ${colors.header[900]}` : "none",
-    opacity: disabled ? 0.6 : 1,
+    opacity: disabled ? states_1.DISABLED_OPACITY : 1,
     transition: (0, motion_1.transitionFor)(["background-color", "box-shadow"]),
-    _hover: interactive && !selected && !disabled ? { bg: colors.background[200] } : undefined,
+    _hover: interactive && !selected && !disabled ? { bg: (0, tonalHover_1.tonalHover)(colors) } : undefined,
     sx: { ...(ringed ? (0, focusRing_styles_1.focusVisibleRing)(colors) : {}), ...(0, motion_2.reducedMotionSx)() },
 });
 exports.selectableSurface = selectableSurface;
@@ -100,7 +103,7 @@ const useSelectable = ({ value, selected, disabled, onSelect, }) => {
         onKeyDown: (event) => {
             if (event.target !== event.currentTarget)
                 return;
-            if (event.key === " " || event.key === "Enter") {
+            if ((0, activationKey_1.isActivationKey)(event)) {
                 event.preventDefault();
                 choose();
             }

package/dist/Components/CheckoutKit/tonalHover.d.ts

@@ -0,0 +1,2 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const tonalHover: (colors: PaletteProps, rest?: string, fill?: string) => string;

package/dist/Components/CheckoutKit/tonalHover.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tonalHover = void 0;
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const tonalHover = (colors, rest = colors.background[100], fill = colors.background[200]) => (0, planeStep_1.bandOn)(fill, rest);
+exports.tonalHover = tonalHover;

package/dist/Components/ChoiceCard/ChoiceCard.d.ts

@@ -1,3 +1,3 @@
 import type { ChoiceCardProps } from "./ChoiceCardProps";
-declare const ChoiceCard: ({ value, label, description, icon, disabled, "data-testid": testId }: ChoiceCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const ChoiceCard: ({ value, label, description, icon, disabled: disabledProp, isDisabled, "data-testid": testId }: ChoiceCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ChoiceCard;

package/dist/Components/ChoiceCard/ChoiceCard.js

@@ -5,7 +5,8 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const selectable_1 = require("../CheckoutKit/selectable");
-const ChoiceCard = ({ value, label, description, icon, disabled = false, "data-testid": testId }) => {
+const ChoiceCard = ({ value, label, description, icon, disabled: disabledProp = false, isDisabled = false, "data-testid": testId }) => {
+    const disabled = disabledProp || isDisabled;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const uid = (0, react_1.useId)();
     const labelId = `${uid}-label`;

package/dist/Components/ChoiceCard/ChoiceCardProps.d.ts

@@ -11,6 +11,8 @@ export interface ChoiceCardProps {
     icon?: ReactNode;
     /** Dims the card and skips it for clicks, arrow keys and the tab stop. */
     disabled?: boolean;
+    /** Alias of `disabled` for the library's `is*` prop convention; either one disables the card. */
+    isDisabled?: boolean;
     "data-testid"?: string;
 }
 /** Radiogroup of `ChoiceCard`s: one tab stop; arrows, Home and End move focus and selection together. */
@@ -19,6 +21,10 @@ export interface ChoiceCardGroupProps {
     /** Seeds an uncontrolled selection; ignored once `value` is passed. */
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /** Cards per row; `1` (default) stacks them in a column, more lays them out in an equal-width grid. */
+    columns?: number;
+    /** Space between cards in theme space units (`3` = 0.75rem). */
+    gap?: number;
     /** Direct `ChoiceCard` children; a wrapper component hides their `value` from the tab stop. */
     children: ReactNode;
     /** Name the group with this or `aria-labelledby`. */

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

@@ -1,4 +1,5 @@
 import { type FieldMessageState } from "./fieldMessageStyles";
+/** Error and helper text state plus the ids that wire it to the control. */
 export type FieldMessageProps = FieldMessageState & {
     /** From `useFieldIds` — must match the control's `aria-describedby`. */
     helperId?: string;

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

@@ -7,7 +7,7 @@ export declare const fieldLabelStyles: (colors: PaletteProps) => {
     lineHeight: string;
     mb: string;
 };
-/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
+/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>`. */
 export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
     label: string;
     /** Omit only when this sits inside another element's own `<label>` (e.g. Checkbox) — otherwise the visible text has no accessible association. */

package/dist/Components/Common/FormLabel.js

@@ -9,16 +9,17 @@ const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 /** The one field-label look (13px / 500 / `text[700]`); `Label` and `TextLabel` both read it. */
 const fieldLabelStyles = (colors) => ({
     color: colors.text[700],
     fontWeight: 500,
-    fontSize: "0.8125rem",
+    fontSize: typography_1.fontSizes["xs-plus"],
     lineHeight: "1.2",
     mb: "0.375rem",
 });
 exports.fieldLabelStyles = fieldLabelStyles;
-/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
+/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>`. */
 const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const clampStyles = clampLines ? {
@@ -37,7 +38,7 @@ const TextLabel = ({ label, id, isRequired = false, isInformation = false, infor
         mb: inline ? 0 : base.mb,
         fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : base.fontSize,
     };
-    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: "xs", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label })), isRequired && ((0, jsx_runtime_1.jsx)("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "xs", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    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: "xs", 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", { "aria-hidden": "true", style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "xs", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
     // NOTE: real <label> only with a control id — Checkbox/Radio render this inline inside their own <label>.
     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 }));
 };

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

@@ -1,8 +1,8 @@
+/** `id` is optional; omitted, a FormControl wires its own aria-describedby. */
 type HelperTextProps = {
     helperText: string;
     id?: string;
 };
-/** `id` is optional — pass one to own aria-describedby; omitted, a FormControl wires its own. */
-/** Renders `helperText` unconditionally; prefer `FieldMessage`, which swaps it for the error. */
+/** Always renders `helperText`; prefer `FieldMessage`, which swaps it for the error. */
 declare const HelperText: ({ helperText, id }: HelperTextProps) => import("react/jsx-runtime").JSX.Element;
 export default HelperText;

package/dist/Components/Common/HelperText.js

@@ -8,8 +8,7 @@ const UnregisteredHelperText = ({ helperText, id, style }) => {
     const styles = (0, react_1.useFormControlStyles)();
     return ((0, jsx_runtime_1.jsx)(react_1.chakra.div, { id: id, ...style, __css: styles.helperText, className: "chakra-form__helper-text", children: helperText }));
 };
-/** `id` is optional — pass one to own aria-describedby; omitted, a FormControl wires its own. */
-/** Renders `helperText` unconditionally; prefer `FieldMessage`, which swaps it for the error. */
+/** Always renders `helperText`; prefer `FieldMessage`, which swaps it for the error. */
 const HelperText = ({ helperText, id }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const field = (0, react_1.useFormControlContext)();

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

@@ -0,0 +1,5 @@
+import type { KeyboardEvent } from "react";
+export declare const isActivationKey: (event: {
+    key: string;
+}) => boolean;
+export declare const onActivationKey: <E extends KeyboardEvent>(activate: (event: E) => void) => (event: E) => void;

package/dist/Components/Common/activationKey.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onActivationKey = exports.isActivationKey = void 0;
+const isActivationKey = (event) => event.key === "Enter" || event.key === " ";
+exports.isActivationKey = isActivationKey;
+const onActivationKey = (activate) => (event) => {
+    if (!(0, exports.isActivationKey)(event))
+        return;
+    event.preventDefault();
+    activate(event);
+};
+exports.onActivationKey = onActivationKey;

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

@@ -0,0 +1,4 @@
+/** Any `data-*` attribute; lets a closed prop type accept test and analytics hooks. */
+export type DataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};

package/dist/Components/Common/fieldMessageStyles.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fieldMessageVisibility = exports.fieldMessageStyles = exports.FIELD_MESSAGE_GAP = void 0;
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 exports.FIELD_MESSAGE_GAP = "0.25rem";
 /** Shared type for helper and error text, so switching between them never shifts the row. */
 const fieldMessageStyles = (colors) => ({
     mt: exports.FIELD_MESSAGE_GAP,
-    fontSize: "0.75rem",
+    fontSize: typography_1.fontSizes.xs,
     lineHeight: "1.125rem",
     color: colors.textMuted,
 });

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

@@ -0,0 +1,2 @@
+import React, { type ReactElement } from "react";
+export declare const findSlot: <P>(children: React.ReactNode, slot: React.FC<P>) => ReactElement<P> | undefined;

package/dist/Components/Common/findSlot.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findSlot = void 0;
+const react_1 = __importDefault(require("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.
+const findSlot = (children, slot) => {
+    for (const child of react_1.default.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === react_1.default.Fragment) {
+            const nested = (0, exports.findSlot)(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};
+exports.findSlot = findSlot;

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

@@ -0,0 +1 @@
+export declare const surfaceFocusRing: (surface: string, ring: string) => string;

package/dist/Components/Common/surfaceFocusRing.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.surfaceFocusRing = void 0;
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+// NOTE: for chrome painted on a fixed dark surface, where the palette's focusRing pair is tuned for the page canvas instead.
+const surfaceFocusRing = (surface, ring) => `0 0 0 ${focusRing_styles_1.FOCUS_HALO_WIDTH}px ${surface}, 0 0 0 ${focusRing_styles_1.FOCUS_RING_WIDTH}px ${ring}`;
+exports.surfaceFocusRing = surfaceFocusRing;

package/dist/Components/ConfirmDialog/ConfirmDialog.js

@@ -9,16 +9,28 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const tone_1 = require("../../Theme/tokens/builders/tone");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
-const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
+const 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 } = (0, useCustomTheme_1.useCustomTheme)();
     const cancelRef = (0, react_1.useRef)(null);
     const [typedText, setTypedText] = (0, react_1.useState)("");
     const requiresTypedConfirmation = confirmationText !== undefined;
-    const isConfirmDisabled = isConfirmLoading || (requiresTypedConfirmation && typedText !== confirmationText);
-    const actions = ((0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && isConfirmLoading }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: confirmLabel, onClick: onConfirm, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
-    const body = requiresTypedConfirmation ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (children);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 6, children: bodyLayout === "stack" ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [body, actions] })) })] })] }));
+    const isAlternativeLoading = (alternative === null || alternative === void 0 ? void 0 : alternative.isLoading) === true;
+    const isConfirmDisabled = isConfirmLoading ||
+        isAlternativeLoading ||
+        isConfirmHeld ||
+        (requiresTypedConfirmation && typedText !== confirmationText);
+    const swatch = (0, tone_1.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 = ((0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && (isConfirmLoading || isAlternativeLoading) }), alternative && ((0, jsx_runtime_1.jsx)(Button_1.default, { label: alternative.label, onClick: alternative.onSelect, colorScheme: "primary", size: "sm", isLoading: alternative.isLoading, loadingText: alternative.label, isDisabled: isConfirmLoading })), (0, jsx_runtime_1.jsx)(Button_1.default, { label: confirmLabel, onClick: onConfirm, variant: alternative ? "outline" : undefined, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
+    const facts = hasFacts && ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 3, align: "stretch", mt: bodyLayout === "flush" && children ? 3 : 0, mb: bodyLayout === "flush" ? 4 : 0, children: [dependentFacts.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, children: dependentFacts.join(" · ") })), resolvedConsequence !== undefined && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", color: colors.textMuted, children: resolvedConsequence })), (alternative === null || alternative === void 0 ? void 0 : alternative.description) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", p: 3, borderRadius: "md", border: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), children: alternative.description }))] }));
+    const body = requiresTypedConfirmation ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, facts, (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, facts] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.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 : (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "1.05rem", fontWeight: 600, children: resolvedTitle })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 6, children: bodyLayout === "stack" ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [body, actions] })) })] })] }));
 };
 exports.default = ConfirmDialog;

package/dist/Components/ConfirmDialog/ConfirmDialogProps.d.ts

@@ -1,19 +1,39 @@
 import type { ReactElement, ReactNode } from "react";
-/** Reusable Cancel/Confirm modal for delete/deactivate-style prompts — the shared shape behind the library's confirm modals. */
-export interface ConfirmDialogProps {
+/** The reversible route offered beside Cancel and the destructive Confirm. */
+export interface ConfirmDialogAlternative {
+    /** Button text, e.g. "Deactivate instead". */
+    label: string;
+    /** What choosing it keeps, shown in a hint box above the buttons. */
+    description?: ReactNode;
+    onSelect: () => void;
+    /** Spinner on the alternative; Cancel and Confirm are disabled meanwhile. */
+    isLoading?: boolean;
+}
+interface ConfirmDialogBaseProps {
     isOpen: boolean;
     onClose: () => void;
     /** Fires on Confirm click; does not close the dialog — call onClose yourself. */
     onConfirm: () => void;
-    title: string;
-    /** Body content rendered above the action row (a Text, a description + quote block, ...). */
-    children: ReactNode;
+    /** Body content rendered above the action row (a Text, a description + quote block, ...). Optional when `entityName` builds the body. */
+    children?: ReactNode;
     /** Rendered inside the header swatch. Defaults to a warning triangle. */
     icon?: ReactNode;
-    /** Header swatch background; callers resolve their own tone (soft tint vs solid scale). */
-    iconBg: string;
-    /** Header swatch icon/text color, paired with `iconBg`. */
-    iconColor: string;
+    /** Header swatch background; derived from `tone` (a soft tint) when omitted. */
+    iconBg?: string;
+    /** Header swatch icon/text color; derived from `tone` when omitted, so pass it together with `iconBg`. */
+    iconColor?: string;
+    /** The exact record being destroyed, e.g. "Sabbatical". Switches on the consequence-first body and builds the default title. */
+    entityName?: string;
+    /** What kind of record, e.g. "leave type"; the default title reads Delete leave type "Sabbatical"? */
+    entityKind?: string;
+    /** Dependents already counted by the caller ("4 people hold a balance"), joined with " · " on one line. */
+    dependents?: string[];
+    /** What survives and what stays broken. With `entityName` it defaults to "This cannot be undone."; otherwise it renders only when passed. */
+    consequence?: ReactNode;
+    /** A calmer reversible choice, drawn as the solid button while Confirm turns outline. Focus still opens on Cancel. */
+    alternative?: ConfirmDialogAlternative;
+    /** Holds Confirm disabled until a precondition in `children` (an acknowledgement checkbox) is met. */
+    isConfirmDisabled?: boolean;
     /** "destructive" fills Confirm red; "neutral" leaves it primary. Defaults to "destructive". */
     tone?: "destructive" | "neutral";
     /** Defaults to "Cancel". */
@@ -36,10 +56,18 @@ export interface ConfirmDialogProps {
     bodySpacing?: number;
     /** Extra top padding on the action row. Defaults to 0. */
     actionsPt?: number;
-    /** Pins initial focus to Cancel via Chakra's `initialFocusRef`. Defaults to true. */
+    /** Pins initial focus to Cancel (never the destructive button) via Chakra's `initialFocusRef`. Defaults to true. */
     focusCancelOnOpen?: boolean;
     /** Defaults to true. */
     isCentered?: boolean;
     closeOnEsc?: boolean;
     closeOnOverlayClick?: boolean;
 }
+/** Reusable Cancel/Confirm modal for delete/deactivate-style prompts; pass `title`, or `entityName` to get a title and a consequence body. */
+export type ConfirmDialogProps = ConfirmDialogBaseProps & ({
+    title: string;
+} | {
+    title?: string;
+    entityName: string;
+});
+export {};

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

@@ -1,4 +1,5 @@
 import React from "react";
+/** Copies `value` to the clipboard and briefly confirms with `copiedLabel`. */
 export interface CopyButtonProps {
     /** Text to write to the clipboard. */
     value: string;

package/dist/Components/CopyButton/CopyButton.js

@@ -14,6 +14,8 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const primitives_1 = require("../../Theme/tokens/primitives");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const activationKey_1 = require("../Common/activationKey");
+const BACKGROUND_TRANSITION = (0, primitives_1.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 = (0, useCustomTheme_1.useCustomTheme)();
@@ -41,12 +43,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     if (variant === "menu-item") {
         const hoverAccent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, rowBackgrounds.active);
         const hoverSuccess = (0, outlineRung_1.liftToContrast)(theme.colors.semantic.success[500], rowBackgrounds.active, accentText_1.AA_NORMAL_TEXT);
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "button", tabIndex: 0, align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: rowBackgrounds.active }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: handleCopy, onKeyDown: (e) => {
-                        if (e.key !== "Enter" && e.key !== " ")
-                            return;
-                        e.preventDefault();
-                        handleCopy(e);
-                    }, children: [copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: hoverSuccess })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: hoverAccent })), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.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: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: handleCopy, onKeyDown: (0, activationKey_1.onActivationKey)(handleCopy), children: [copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: hoverSuccess })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: hoverAccent })), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
     }
     if (variant === "button") {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid",