pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.62

package/dist/esm/Components/TagInput/TagInput.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from "react";
+import { Box, Flex, Input, VisuallyHidden, useMergeRefs } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { fieldFocusRing, fieldHoverBorder, getFieldStateStyles } from "../Common/fieldStyles.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { getSearchSelectSizeStyles } from "../SearchSelect/searchSelectSize.js";
+import Tag from "../Tag/Tag.js";
+import { addTags, hasSeparator, splitEntries } from "./tagEntries.js";
+const TagInput = forwardRef(function TagInput({ value, onChange, validate, maxTags, allowDuplicates = false, addOnBlur = false, id, name, label, "aria-label": ariaLabel, placeholder, isRequired = false, isInformation, informationMessage, isDisabled = false, isReadOnly = false, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
+    const theme = useCustomTheme();
+    const s = getSearchSelectSizeStyles(size);
+    const inputRef = useRef(null);
+    const mergedRef = useMergeRefs(inputRef, ref);
+    const [draft, setDraft] = useState("");
+    const [rejection, setRejection] = useState(null);
+    const [announcement, setAnnouncement] = useState("");
+    const isInvalid = Boolean(error || rejection);
+    const shownError = rejection !== null && rejection !== void 0 ? rejection : errorMessage;
+    const ids = useFieldIds(id, { error: isInvalid, errorMessage: shownError, helperText });
+    const locked = isDisabled || isReadOnly;
+    const commit = (text) => {
+        const result = addTags(value, splitEntries(text), { validate, maxTags, allowDuplicates });
+        if (result.added.length) {
+            onChange(result.tags);
+            setAnnouncement(`Added ${result.added.join(", ")}`);
+        }
+        setRejection(result.message);
+        setDraft(result.rejected.join(", "));
+    };
+    const removeAt = (index) => {
+        const removed = value[index];
+        onChange(value.filter((_, i) => i !== index));
+        setAnnouncement(`Removed ${removed}`);
+        setRejection(null);
+    };
+    const onKeyDown = (event) => {
+        if (locked)
+            return;
+        if (event.key === "Enter" || event.key === ",") {
+            if (event.key === "Enter" && !draft.trim())
+                return;
+            event.preventDefault();
+            commit(draft);
+        }
+        else if (event.key === "Backspace" && draft === "" && value.length > 0) {
+            removeAt(value.length - 1);
+        }
+    };
+    const onPaste = (event) => {
+        const pasted = event.clipboardData.getData("text");
+        if (locked || !hasSeparator(pasted))
+            return;
+        event.preventDefault();
+        const { selectionStart, selectionEnd } = event.currentTarget;
+        commit(`${draft.slice(0, selectionStart !== null && selectionStart !== void 0 ? selectionStart : draft.length)}${pasted}${draft.slice(selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : draft.length)}`);
+    };
+    const onInput = (event) => {
+        setDraft(event.target.value);
+        setRejection(null);
+    };
+    const onBlur = () => {
+        if (addOnBlur && !locked && draft.trim())
+            commit(draft);
+    };
+    const focusFromBox = (event) => {
+        var _a;
+        if (event.target !== event.currentTarget || isDisabled)
+            return;
+        event.preventDefault();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (_jsxs(Box, { width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, onMouseDown: focusFromBox, sx: {
+                    ...getFieldStateStyles(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...reducedMotionSx(),
+                }, _hover: isDisabled || isInvalid ? undefined : { borderColor: fieldHoverBorder(theme.colors) }, _focusWithin: {
+                    borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
+                    boxShadow: fieldFocusRing(theme),
+                }, children: [value.map((tag, index) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: tag, isDisabled: isDisabled, icon: locked ? undefined : X, onIconClick: locked
+                            ? undefined
+                            : () => {
+                                var _a;
+                                removeAt(index);
+                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            } }, `${index}:${tag}`))), _jsx(Input, { ref: mergedRef, type: "text", value: draft, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: isInvalid, ...ids.controlProps, "aria-label": label ? undefined : ariaLabel, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: 400, color: theme.colors.text[900], flex: "1", minW: 0, _placeholder: { color: placeholderInk(theme.colors), opacity: 1 }, style: { backgroundColor: "transparent" }, onChange: onInput, onKeyDown: onKeyDown, onPaste: onPaste, onBlur: onBlur, placeholder: value.length === 0 ? placeholder : "" })] }), name && value.map((tag, index) => _jsx("input", { type: "hidden", name: name, value: tag }, `${index}:${tag}`)), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: announcement }), _jsx(FieldMessage, { error: isInvalid, errorMessage: shownError, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+TagInput.displayName = "TagInput";
+export default TagInput;

package/dist/esm/Components/TagInput/TagInputProps.js

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

package/dist/esm/Components/TagInput/tagEntries.js

@@ -0,0 +1,39 @@
+const SEPARATORS = /[,\r\n]/;
+export const hasSeparator = (text) => SEPARATORS.test(text);
+export const splitEntries = (text) => text
+    .split(SEPARATORS)
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+const fold = (tag) => tag.toLocaleLowerCase();
+const rejection = (entry, tags, seen, rules) => {
+    const { validate, maxTags, allowDuplicates = false } = rules;
+    if (maxTags !== undefined && tags.length >= maxTags)
+        return `You can add up to ${maxTags} ${maxTags === 1 ? "tag" : "tags"}.`;
+    if (!allowDuplicates && seen.has(fold(entry)))
+        return `"${entry}" is already added.`;
+    const verdict = validate === null || validate === void 0 ? void 0 : validate(entry, tags);
+    if (verdict === false)
+        return `"${entry}" is not valid.`;
+    if (typeof verdict === "string" && verdict)
+        return verdict;
+    return null;
+};
+export const addTags = (current, entries, rules) => {
+    const tags = [...current];
+    const seen = new Set(tags.map(fold));
+    const added = [];
+    const rejected = [];
+    let message = null;
+    for (const entry of entries) {
+        const reason = rejection(entry, tags, seen, rules);
+        if (reason) {
+            rejected.push(entry);
+            message = message !== null && message !== void 0 ? message : reason;
+            continue;
+        }
+        tags.push(entry);
+        seen.add(fold(entry));
+        added.push(entry);
+    }
+    return { tags, added, rejected, message };
+};

package/dist/esm/Components/TimePicker/TimePicker.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { Box, FormControl, HStack, Select } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { fieldControlStyles } from "../Common/fieldStyles.js";
+import { HOURS_12, HOURS_24, atTime, displayHour, isTwelveHour, meridiemOf, minuteOptions, pad2, toHour24, } from "./timeParts.js";
+const EMPTY = "";
+const TimePicker = forwardRef(function TimePicker({ value, date, onChange, use24Hour, dateFormat, minuteStep, baseDate, isDisabled, disabled: legacyDisabled, id, name, label, "aria-label": ariaLabel, isRequired = false, isInformation, informationMessage, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
+    var _a;
+    const theme = useCustomTheme();
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const current = value !== undefined ? value : date !== null && date !== void 0 ? date : null;
+    const twelveHour = isTwelveHour(use24Hour, dateFormat);
+    const minutes = useMemo(() => minuteOptions(minuteStep, current ? current.getMinutes() : null), [minuteStep, current]);
+    const disabled = (_a = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled) !== null && _a !== void 0 ? _a : false;
+    const selectSx = useMemo(() => fieldControlStyles(theme.colors), [theme.colors]);
+    const hour24 = current ? current.getHours() : null;
+    const commit = (nextHour24, nextMinute) => { var _a; return onChange(atTime((_a = current !== null && current !== void 0 ? current : baseDate) !== null && _a !== void 0 ? _a : new Date(), nextHour24, nextMinute)); };
+    const onHour = (event) => {
+        const picked = Number(event.target.value);
+        const next = twelveHour ? toHour24(picked, hour24 === null ? "AM" : meridiemOf(hour24)) : picked;
+        commit(next, current ? current.getMinutes() : 0);
+    };
+    const onMinute = (event) => commit(hour24 !== null && hour24 !== void 0 ? hour24 : 0, Number(event.target.value));
+    const onMeridiem = (event) => {
+        const meridiem = event.target.value === "PM" ? "PM" : "AM";
+        commit(toHour24(hour24 === null ? 12 : displayHour(hour24, true), meridiem), current ? current.getMinutes() : 0);
+    };
+    const shared = {
+        flex: "1",
+        minW: 0,
+        size,
+        isDisabled: disabled,
+        sx: selectSx,
+        "aria-describedby": ids.describedBy,
+    };
+    const placeholder = current ? null : (_jsx("option", { value: EMPTY, disabled: true, children: "--" }));
+    return (_jsxs(FormControl, { isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, "aria-labelledby": label ? ids.labelId : undefined, "aria-label": label ? undefined : ariaLabel, children: [label && (_jsx(Box, { id: ids.labelId, children: _jsx(TextLabel, { label: label, id: `${ids.inputId}-hour`, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }) })), _jsxs(HStack, { spacing: 1.5, w: "100%", children: [_jsxs(Select, { ...shared, ref: ref, id: `${ids.inputId}-hour`, "aria-label": "Hour", value: hour24 === null ? EMPTY : displayHour(hour24, twelveHour), onChange: onHour, children: [placeholder, (twelveHour ? HOURS_12 : HOURS_24).map((hour) => (_jsx("option", { value: hour, children: pad2(hour) }, hour)))] }), _jsxs(Select, { ...shared, id: `${ids.inputId}-minute`, "aria-label": "Minute", value: current ? current.getMinutes() : EMPTY, onChange: onMinute, children: [placeholder, minutes.map((minute) => (_jsx("option", { value: minute, children: pad2(minute) }, minute)))] }), twelveHour && (_jsxs(Select, { ...shared, id: `${ids.inputId}-meridiem`, "aria-label": "AM or PM", value: hour24 === null ? EMPTY : meridiemOf(hour24), onChange: onMeridiem, children: [placeholder, _jsx("option", { value: "AM", children: "AM" }), _jsx("option", { value: "PM", children: "PM" })] }))] }), name && _jsx("input", { type: "hidden", name: name, value: current ? `${pad2(current.getHours())}:${pad2(current.getMinutes())}` : EMPTY }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+TimePicker.displayName = "TimePicker";
+export default TimePicker;

package/dist/esm/Components/TimePicker/TimePickerProps.js

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

package/dist/esm/Components/TimePicker/timeParts.js

@@ -0,0 +1,26 @@
+export const HOURS_12 = Array.from({ length: 12 }, (_, i) => i + 1);
+export const HOURS_24 = Array.from({ length: 24 }, (_, i) => i);
+const TWELVE_HOUR_FORMAT = /h.*a/i;
+export const pad2 = (value) => String(value).padStart(2, "0");
+export const isTwelveHour = (use24Hour, dateFormat) => {
+    if (use24Hour !== undefined)
+        return !use24Hour;
+    if (dateFormat !== undefined)
+        return TWELVE_HOUR_FORMAT.test(dateFormat);
+    return true;
+};
+export const minuteOptions = (step, current) => {
+    const size = Math.min(60, Math.max(1, Math.floor(step !== null && step !== void 0 ? step : 1) || 1));
+    const minutes = [];
+    for (let minute = 0; minute < 60; minute += size)
+        minutes.push(minute);
+    if (current !== null && !minutes.includes(current)) {
+        minutes.push(current);
+        minutes.sort((a, b) => a - b);
+    }
+    return minutes;
+};
+export const displayHour = (hour24, twelveHour) => twelveHour ? hour24 % 12 || 12 : hour24;
+export const meridiemOf = (hour24) => (hour24 >= 12 ? "PM" : "AM");
+export const toHour24 = (hour12, meridiem) => (hour12 % 12) + (meridiem === "PM" ? 12 : 0);
+export const atTime = (day, hour24, minute) => new Date(day.getFullYear(), day.getMonth(), day.getDate(), hour24, minute, 0, 0);

package/dist/esm/Components/Timeline/Timeline.js

@@ -6,6 +6,8 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { toWords } from "../../Utils/functions.js";
@@ -153,7 +155,7 @@ const NoteItem = React.memo(function NoteItem({ note, event, index, colors, acti
     if (isEditing) {
         return (_jsx(Box, { children: _jsx(NoteTextArea, { isEditable: true, value: (_a = note.note) !== null && _a !== void 0 ? _a : "", title: (_b = note.title) !== null && _b !== void 0 ? _b : "", saveButtonLoading: editNoteLoading, handleSubmit: (n, t, f) => onEditNote === null || onEditNote === void 0 ? void 0 : onEditNote(note.log_note_id, n, t, f, event, index), handleCancel: () => setActiveEditNoteId(null) }) }));
     }
-    return (_jsxs(Box, { position: "relative", zIndex: 1, bg: colors.gray[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [_jsxs(Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.primary, colors.gray[50]), display: "inline-flex", children: _jsx(StickyNote, { size: 12 }) }), note.title && (_jsx(Text, { fontSize: "0.6875rem", fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && (_jsx(Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: reducedMotionSx(), children: isDeleting ? (_jsx(Spinner, { size: "xs", color: colors.textMuted })) : (_jsxs(_Fragment, { children: [onEditNote && (_jsx(Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: _jsx(Box, { as: "button", type: "button", "aria-label": "Edit note", sx: focusVisibleStyles(colors), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
+    return (_jsxs(Box, { position: "relative", zIndex: 1, bg: colors.gray[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [_jsxs(Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.primary, colors.gray[50]), display: "inline-flex", children: _jsx(StickyNote, { size: 12 }) }), note.title && (_jsx(Text, { fontSize: fontSizes["xs-minus"], fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && (_jsx(Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: reducedMotionSx(), children: isDeleting ? (_jsx(Spinner, { size: "xs", color: colors.textMuted })) : (_jsxs(_Fragment, { children: [onEditNote && (_jsx(Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: _jsx(Box, { as: "button", type: "button", "aria-label": "Edit note", sx: focusVisibleStyles(colors), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
                                             bg: colors.primary[50],
                                             color: accentTextOnCanvas(colors.primary, colors.primary[50]),
                                         }, onClick: (e) => {
@@ -165,7 +167,7 @@ const NoteItem = React.memo(function NoteItem({ note, event, index, colors, acti
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             onDeleteNote === null || onDeleteNote === void 0 ? void 0 : onDeleteNote(note.log_note_id, event, index);
-                                        }, children: _jsx(Trash2, { size: 12 }) }) }))] })) }))] }), note.note && (_jsx(Text, { fontSize: "0.6875rem", color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && (_jsx(Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => (_jsxs(Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: colors.primary[50], color: accentTextOnCanvas(colors.primary, colors.primary[50]), fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: colors.primary[100] }, children: [_jsx(Paperclip, { size: 10 }), _jsx(Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && (_jsxs(Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
+                                        }, children: _jsx(Trash2, { size: 12 }) }) }))] })) }))] }), note.note && (_jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && (_jsx(Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => (_jsxs(Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: colors.primary[50], color: accentTextOnCanvas(colors.primary, colors.primary[50]), fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: colors.primary[100] }, children: [_jsx(Paperclip, { size: 10 }), _jsx(Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && (_jsxs(Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
 });
 // The colored event card (shared by both the desktop "tree" and mobile rail).
 // `accent` decides which edge carries the colored bar (pointing toward the spine).
@@ -175,7 +177,7 @@ const EventCard = React.memo(function EventCard({ event, index, accent, colors,
     const changes = useMemo(() => parseChanges(event.changes), [event.changes]);
     const clickable = typeof onEventClick === "function";
     const actor = formatName(event.action_by);
-    return (_jsxs(Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [_jsxs(Box, { position: "relative", zIndex: 1, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, ...(clickable && {
+    return (_jsxs(Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [_jsxs(Box, { position: "relative", zIndex: 1, bg: colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, ...(clickable && {
                     transition: CARD_TRANSITION,
                     _hover: {
                         borderColor: scale[300],
@@ -183,12 +185,12 @@ const EventCard = React.memo(function EventCard({ event, index, accent, colors,
                         transform: "translateY(-0.063rem)",
                     },
                     sx: reducedMotionSx({ transform: "none" }),
-                }), children: [clickable && (_jsx(Box, { as: "button", type: "button", "aria-label": `View details${event.action_from ? ` for ${event.action_from}` : ""}`, onClick: () => onEventClick(event, index), position: "absolute", inset: 0, w: "100%", h: "100%", p: 0, m: 0, bg: "transparent", border: "none", borderRadius: "inherit", cursor: "pointer", zIndex: 0, sx: focusVisibleStyles(colors) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Text, { fontSize: "0.8125rem", fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: accentTextOnCanvas(scale, scale[50]), bg: scale[50], border: `0.063rem solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), _jsx(Text, { fontSize: "0.6875rem", color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), event.description != null && (_jsx(Box, { mt: 1.5, fontSize: "0.75rem", color: colors.text[700], children: event.description })), changes.length > 0 && (_jsx(Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => (_jsxs(Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [_jsx(Text, { fontWeight: 600, color: colors.text[700], children: toWords(c.field) }), c.from !== null && c.from !== undefined && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.gray, colors.gray[50]), bg: colors.gray[50], borderRadius: "full", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), _jsx(Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: _jsx(ArrowRight, { size: 11 }) })] })), _jsx(Box, { as: "span", color: accentTextOnCanvas(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "full", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`))) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Tooltip, { label: actor, placement: "top", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", minW: "1.5rem", borderRadius: "full", bg: colors.primary.opacity[16], color: accentTextOnCanvas(colors.primary, colors.background[50]), fontSize: MIN_TEXT, fontWeight: 700, children: initials(actor) }) }), _jsxs(Text, { fontSize: "0.6875rem", color: colors.textMuted, children: ["by", " ", _jsx(Box, { as: "span", color: colors.text[700], fontWeight: 500, children: actor })] })] }), showAddNote && (_jsx(Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
+                }), children: [clickable && (_jsx(Box, { as: "button", type: "button", "aria-label": `View details${event.action_from ? ` for ${event.action_from}` : ""}`, onClick: () => onEventClick(event, index), position: "absolute", inset: 0, w: "100%", h: "100%", p: 0, m: 0, bg: "transparent", border: "none", borderRadius: "inherit", cursor: "pointer", zIndex: 0, sx: focusVisibleStyles(colors) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Text, { fontSize: fontSizes["xs-plus"], fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), _jsx(Box, { as: "span", fontSize: fontSizes["xs-minus"], fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: accentTextOnCanvas(scale, scale[50]), bg: scale[50], border: `${BORDER_WIDTHS.hairline} solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), _jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), event.description != null && (_jsx(Box, { mt: 1.5, fontSize: fontSizes.xs, color: colors.text[700], children: event.description })), changes.length > 0 && (_jsx(Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => (_jsxs(Flex, { align: "center", gap: 1.5, fontSize: fontSizes["xs-minus"], lineHeight: "1.4", flexWrap: "wrap", children: [_jsx(Text, { fontWeight: 600, color: colors.text[700], children: toWords(c.field) }), c.from !== null && c.from !== undefined && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.gray, colors.gray[50]), bg: colors.gray[50], borderRadius: "full", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), _jsx(Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: _jsx(ArrowRight, { size: 11 }) })] })), _jsx(Box, { as: "span", color: accentTextOnCanvas(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "full", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`))) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Tooltip, { label: actor, placement: "top", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", minW: "1.5rem", borderRadius: "full", bg: colors.primary.opacity[16], color: accentTextOnCanvas(colors.primary, colors.background[50]), fontSize: MIN_TEXT, fontWeight: 700, children: initials(actor) }) }), _jsxs(Text, { fontSize: fontSizes["xs-minus"], color: colors.textMuted, children: ["by", " ", _jsx(Box, { as: "span", color: colors.text[700], fontWeight: 500, children: actor })] })] }), showAddNote && (_jsx(Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     setActiveNoteEventIndex(isActiveNote ? null : index);
-                                }, position: "relative", zIndex: 1, opacity: isActiveNote ? 1 : 0, transition: REVEAL_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 600, color: accentTextOnCanvas(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
+                                }, position: "relative", zIndex: 1, opacity: isActiveNote ? 1 : 0, transition: REVEAL_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, px: 2, py: 1, borderRadius: "md", fontSize: fontSizes.xs, fontWeight: 600, color: accentTextOnCanvas(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
                                     bg: colors.primary[50],
-                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && (_jsx(Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `0.063rem solid ${colors.boxborder[200]}`, children: event.notes.map((note, noteIndex) => {
+                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && (_jsx(Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, children: event.notes.map((note, noteIndex) => {
                             var _a;
                             return (_jsx(NoteItem, { note: note, event: event, index: index, colors: colors, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEditNote: onEditNote, onDeleteNote: onDeleteNote }, (_a = note.log_note_id) !== null && _a !== void 0 ? _a : noteIndex));
                         }) }))] }), isActiveNote && (_jsx(Box, { mt: 2, children: _jsx(NoteTextArea, { saveButtonLoading: addNoteLoading, handleSubmit: (note, title, files) => {
@@ -223,13 +225,13 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     }, [editNoteLoading]);
     const groupedEvents = useMemo(() => groupEventsByDate(timelineEvents !== null && timelineEvents !== void 0 ? timelineEvents : []), [timelineEvents]);
     if (!timelineEvents || timelineEvents.length === 0) {
-        return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: colors.textMuted, children: [_jsx(Box, { boxSize: "2.75rem", borderRadius: "full", bg: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: accentTextOnCanvas(colors.gray, colors.gray[100]), children: _jsx(Volleyball, { size: 20 }) }), _jsx(Text, { fontSize: "0.875rem", fontWeight: 500, children: emptyText })] }));
+        return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: colors.textMuted, children: [_jsx(Box, { boxSize: "2.75rem", borderRadius: "full", bg: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: accentTextOnCanvas(colors.gray, colors.gray[100]), children: _jsx(Volleyball, { size: 20 }) }), _jsx(Text, { fontSize: fontSizes.sm, fontWeight: 500, children: emptyText })] }));
     }
     // -------------------------------------------------------------------------
     // Mobile: single left rail (alternating doesn't read well on narrow widths)
     // -------------------------------------------------------------------------
     if (isMobile) {
-        return (_jsx(Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => (_jsxs(Box, { mb: 2, children: [_jsxs(Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [_jsx(Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: accentTextOnCanvas(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), _jsx(Box, { flex: "1", h: "0.063rem", bg: colors.boxborder[200] })] }), _jsxs(Box, { position: "relative", children: [_jsx(Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: liftToContrast(colors.gray[300], colors.backgroundColor.main, AA_NON_TEXT), transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+        return (_jsx(Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => (_jsxs(Box, { mb: 2, children: [_jsxs(Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [_jsx(Text, { fontSize: fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: accentTextOnCanvas(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), _jsx(Box, { flex: "1", h: "0.063rem", bg: colors.boxborder[200] })] }), _jsxs(Box, { position: "relative", children: [_jsx(Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: liftToContrast(colors.gray[300], colors.backgroundColor.main, AA_NON_TEXT), transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
                                 var _a;
                                 const scale = getEventScale(colors, event.title);
                                 return (_jsxs(Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale[50], color: accentTextOnCanvas(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[200]}`, zIndex: 1, children: getIcon(event, 14) }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(EventCard, { event: event, index: globalIndex, accent: "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
@@ -238,7 +240,7 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     // -------------------------------------------------------------------------
     // Desktop: center spine with cards alternating left / right (the "tree")
     // -------------------------------------------------------------------------
-    return (_jsxs(Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [_jsx(Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: liftToContrast(colors.gray[300], colors.backgroundColor.main, AA_NON_TEXT), transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => (_jsxs(Box, { mb: 2, children: [_jsx(Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: _jsx(Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, boxShadow: "xs", borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+    return (_jsxs(Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [_jsx(Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: liftToContrast(colors.gray[300], colors.backgroundColor.main, AA_NON_TEXT), transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => (_jsxs(Box, { mb: 2, children: [_jsx(Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: _jsx(Text, { fontSize: fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, boxShadow: "xs", borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
                         var _a;
                         const isLeft = index % 2 === 0;
                         const scale = getEventScale(colors, event.title);

package/dist/esm/Components/Toaster/Toaster.js

@@ -33,7 +33,8 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         , { 
             // The single live-region root: an explicit aria-live here, on the card's own
             // root, keeps errors from being announced a second time by a duplicate wrapper.
-            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
+            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
+                isolation: "isolate",
                 transition: transitionFor(["box-shadow"]),
                 _hover: { boxShadow: "lg" },
                 ...reducedMotionSx(),

package/dist/esm/Components/Toggle/TableToggle.js

@@ -7,6 +7,7 @@ import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.
 import ToolTip from "../ToolTip/ToolTip.js";
 import { useSlidingPill } from "../SegmentedControl/useSlidingPill.js";
 import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 const MODES = ["grid", "list"];
 const TRACK_HEIGHT = BUTTON_SIZES.sm.height;
 const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
@@ -29,7 +30,7 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
             bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600],
             p: isUnderlineSlide ? "0" : "0.125rem",
             borderRadius: isUnderlineSlide ? "none" : "lg",
-            borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined,
+            borderBottom: isUnderlineSlide ? `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}` : undefined,
             height: TRACK_HEIGHT,
             gap: isUnderlineSlide ? "0" : "0.125rem",
             width: "6.3rem",
@@ -73,9 +74,9 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
             transition: "color 0.2s ease-in-out",
         }),
     };
-    return (_jsxs(Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), _jsx(ToolTip, { label: "Grid View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
+    return (_jsxs(Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: `-${BORDER_WIDTHS.hairline}`, left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), _jsx(ToolTip, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
                         refs.current[0] = node;
-                    }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: _jsx(Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), _jsx(ToolTip, { label: "List View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
+                    }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: _jsx(Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), _jsx(ToolTip, { label: "List View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
                         refs.current[1] = node;
                     }, "aria-label": "List View", "aria-pressed": value === "list", icon: _jsx(Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
 };

package/dist/esm/Components/ToggleSwitch/ToggleSwitch.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { forwardRef, useState } from "react";
 import { Box, Flex } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
@@ -21,8 +21,8 @@ const toggleOnEnter = (event) => {
     event.preventDefault();
     event.currentTarget.click();
 };
-/** The library's on/off switch: a native checkbox with role="switch", label, helper and error row. */
-export default function ToggleSwitch({ isChecked, defaultChecked = false, onChange, isDisabled = false, isReadOnly = false, size = "md", colorScheme = "primary", id, label, fieldLabel, isInformation, informationMessage, labelPosition = "end", helperText, error = false, errorMessage, isRequired = false, name, value, onFocus, onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, m, mt, mb, ml, mr, mx, my, }) {
+/** On/off switch: a native checkbox with role="switch", label, helper and error row; `ref` is that `<input>`. */
+const ToggleSwitch = forwardRef(function ToggleSwitch({ isChecked, defaultChecked = false, onChange, isDisabled = false, isReadOnly = false, size = "md", colorScheme = "primary", id, label, fieldLabel, isInformation, informationMessage, labelPosition = "end", helperText, error = false, errorMessage, isRequired = false, name, value, onFocus, onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, m, mt, mb, ml, mr, mx, my, }, ref) {
     const { colors } = useCustomTheme();
     const dims = SIZES[size];
     const ids = useFieldIds(id, { error, errorMessage, helperText });
@@ -40,8 +40,10 @@ export default function ToggleSwitch({ isChecked, defaultChecked = false, onChan
             setInternalChecked(next);
         onChange === null || onChange === void 0 ? void 0 : onChange(next, event);
     };
-    const track = (_jsxs(Box, { position: "relative", display: "inline-flex", flexShrink: 0, w: dims.w, h: dims.h, sx: { "input:focus-visible + span": focusVisibleRing(colors) }, children: [_jsx(Box, { as: "input", type: "checkbox", role: "switch", ...ids.controlProps, "aria-describedby": describedBy, "aria-checked": checked, "aria-readonly": isReadOnly ? true : undefined, "aria-label": ariaLabel, name: name, value: value, checked: checked, disabled: isDisabled, onChange: handleChange, onKeyDown: toggleOnEnter, onFocus: onFocus, onBlur: onBlur, position: "absolute", inset: 0, w: "100%", h: "100%", m: 0, opacity: 0, zIndex: 1, cursor: isDisabled || isReadOnly ? "not-allowed" : "pointer" }), _jsx(Box, { as: "span", "aria-hidden": "true", position: "relative", display: "inline-flex", alignItems: "center", w: "100%", h: "100%", borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: error ? colors.semanticText.error : checked ? filled.fill : colors.boxborder[500], bg: checked ? filled.fill : offTrack, transition: motion, sx: reducedMotionSx(), children: _jsx(Box, { as: "span", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: checked ? filled.color : colors.white, boxShadow: "sm", transition: transitionFor(["transform"], "base"), transform: checked ? `translateX(${dims.travel})` : "translateX(0)", sx: reducedMotionSx() }) })] }));
+    const track = (_jsxs(Box, { position: "relative", display: "inline-flex", flexShrink: 0, w: dims.w, h: dims.h, sx: { "input:focus-visible + span": focusVisibleRing(colors) }, children: [_jsx(Box, { ref: ref, as: "input", type: "checkbox", role: "switch", ...ids.controlProps, "aria-describedby": describedBy, "aria-checked": checked, "aria-readonly": isReadOnly ? true : undefined, "aria-label": ariaLabel, name: name, value: value, checked: checked, disabled: isDisabled, onChange: handleChange, onKeyDown: toggleOnEnter, onFocus: onFocus, onBlur: onBlur, position: "absolute", inset: 0, w: "100%", h: "100%", m: 0, opacity: 0, zIndex: 1, cursor: isDisabled || isReadOnly ? "not-allowed" : "pointer" }), _jsx(Box, { as: "span", "aria-hidden": "true", position: "relative", display: "inline-flex", alignItems: "center", w: "100%", h: "100%", borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: error ? colors.semanticText.error : checked ? filled.fill : colors.boxborder[500], bg: checked ? filled.fill : offTrack, transition: motion, sx: reducedMotionSx(), children: _jsx(Box, { as: "span", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: checked ? filled.color : colors.white, boxShadow: "sm", transition: transitionFor(["transform"], "base"), transform: checked ? `translateX(${dims.travel})` : "translateX(0)", sx: reducedMotionSx() }) })] }));
     const labelNode = label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired && !fieldLabel, inline: true }));
     const fieldLabelNode = fieldLabel && (_jsx(TextLabel, { label: fieldLabel, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }));
     return (_jsxs(Box, { display: "inline-flex", flexDirection: "column", opacity: isDisabled ? 0.5 : 1, m: m, mt: mt, mb: mb, ml: ml, mr: mr, mx: mx, my: my, children: [fieldLabelNode, _jsxs(Flex, { align: "center", gap: 2, children: [labelPosition === "start" && labelNode, track, labelPosition === "end" && labelNode] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
-}
+});
+ToggleSwitch.displayName = "ToggleSwitch";
+export default ToggleSwitch;

package/dist/esm/Components/ToolTip/ToolTip.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useMemo } from "react";
-import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { Tooltip as ChakraTooltip, chakra } from "@chakra-ui/react";
 import { useIsTruncated } from "../../Hooks/useIsTruncated.js";
 import { mergeRefs } from "../../Utils/mergeRefs.js";
 const TOOLTIP_OPEN_DELAY_MS = 300;
@@ -12,20 +12,98 @@ const withViewportPadding = (modifiers) => {
         return modifiers;
     return [...caller, { name: "preventOverflow", options: { padding: VIEWPORT_PADDING } }];
 };
+// NOTE: Chakra clones this instead of the real trigger, so the trigger never remounts on arming.
+const TriggerBridge = forwardRef(function TriggerBridge({ target, onSync, ...handlers }, ref) {
+    useImperativeHandle(ref, () => target.current, [target]);
+    useLayoutEffect(() => onSync(handlers));
+    useLayoutEffect(() => () => onSync(null), [onSync]);
+    return null;
+});
+const getElementRef = (element) => element.ref;
 /** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
 export default function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize, bg, color, isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = TOOLTIP_OPEN_DELAY_MS, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
     // NOTE: hook always runs (Rules of Hooks) but is inert unless overflowOnly is set — no cost for ordinary tooltips.
-    const { ref, isTruncated } = useIsTruncated(label, overflowOnly && isValidElement(children));
+    const { ref: truncationRef, isTruncated } = useIsTruncated(label, overflowOnly && isValidElement(children));
     const safeModifiers = useMemo(() => withViewportPadding(modifiers), [modifiers]);
+    const [armed, setArmed] = useState(() => Boolean(isOpen || defaultIsOpen));
+    if (isOpen && !armed)
+        setArmed(true);
+    const triggerRef = useRef(null);
+    const bridge = useRef(null);
+    const pendingArm = useRef(null);
+    const [describedBy, setDescribedBy] = useState();
+    const syncBridge = useCallback((handlers) => {
+        var _a, _b;
+        bridge.current = handlers;
+        setDescribedBy(handlers === null || handlers === void 0 ? void 0 : handlers["aria-describedby"]);
+        const pending = pendingArm.current;
+        if (!handlers || !pending)
+            return;
+        pendingArm.current = null;
+        if (pending.kind === "pointer")
+            (_a = handlers.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(handlers, pending.event);
+        else
+            (_b = handlers.onFocus) === null || _b === void 0 ? void 0 : _b.call(handlers, pending.event);
+    }, []);
     let content = children;
-    let effectiveDisabled = isDisabled;
+    let effectiveDisabled = Boolean(isDisabled);
     if (overflowOnly && isValidElement(children)) {
-        const child = children;
-        const childRef = child.ref;
-        content = cloneElement(child, {
-            ref: mergeRefs(ref, childRef),
+        content = cloneElement(children, {
+            ref: mergeRefs(truncationRef, getElementRef(children)),
         });
-        effectiveDisabled = Boolean(isDisabled) || !isTruncated;
+        effectiveDisabled = effectiveDisabled || !isTruncated;
     }
-    return (_jsx(ChakraTooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: safeModifiers, closeOnPointerDown: closeOnPointerDown, style: styles, children: content }));
+    if (!label)
+        return _jsxs(_Fragment, { children: [content, null] });
+    const child = (isValidElement(content) ? (content) : (_jsx(chakra.span, { display: "inline-block", tabIndex: 0, children: content })));
+    const own = child.props;
+    const arm = (event) => {
+        if (effectiveDisabled)
+            return;
+        pendingArm.current = event;
+        setArmed(true);
+    };
+    const trigger = cloneElement(child, {
+        ref: mergeRefs(triggerRef, getElementRef(child)),
+        "aria-describedby": describedBy,
+        onPointerEnter: (e) => {
+            var _a, _b, _c;
+            (_a = own.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (e.defaultPrevented)
+                return;
+            if (bridge.current)
+                (_c = (_b = bridge.current).onPointerEnter) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+            else if (e.pointerType !== "touch")
+                arm({ kind: "pointer", event: e });
+        },
+        onFocus: (e) => {
+            var _a, _b, _c;
+            (_a = own.onFocus) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (e.defaultPrevented)
+                return;
+            if (bridge.current)
+                (_c = (_b = bridge.current).onFocus) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+            else
+                arm({ kind: "focus", event: e });
+        },
+        onBlur: (e) => {
+            var _a, _b, _c;
+            (_a = own.onBlur) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (!e.defaultPrevented)
+                (_c = (_b = bridge.current) === null || _b === void 0 ? void 0 : _b.onBlur) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        },
+        onClick: (e) => {
+            var _a, _b, _c;
+            (_a = own.onClick) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (!e.defaultPrevented)
+                (_c = (_b = bridge.current) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        },
+        onPointerDown: (e) => {
+            var _a, _b, _c;
+            (_a = own.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (!e.defaultPrevented)
+                (_c = (_b = bridge.current) === null || _b === void 0 ? void 0 : _b.onPointerDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        },
+    });
+    return (_jsxs(_Fragment, { children: [trigger, armed && (_jsx(ChakraTooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: safeModifiers, closeOnPointerDown: closeOnPointerDown, style: styles, children: _jsx(TriggerBridge, { target: triggerRef, onSync: syncBridge }) }))] }));
 }

package/dist/esm/Components/UpgradeButton/UpgradeButton.js

@@ -6,6 +6,7 @@ import { resolveGradient } from "../../Theme/tokens/builders/gradientInk.js";
 import { contrastRatio } from "../../Theme/tokens/builders/color.js";
 import { AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { neutralTokens } from "../../Theme/tokens/brands/neutrals.js";
 /** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
 const ACCENT_GOLD = neutralTokens.yellow[400];
@@ -44,7 +45,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
     const g = `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`;
     const gReversed = `linear-gradient(135deg, ${resolved.to} 0%, ${resolved.from} 100%)`;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _hover: blocked
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: 700, textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _hover: blocked
             ? undefined
             : {
                 transform: "translateY(-2px)",
@@ -66,7 +67,8 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
                     transition: "left 0.7s ease",
                     pointerEvents: "none",
                 },
+                ...reducedMotionSx({ "&::before": { transition: "none" } }),
             }
-            : focusVisibleStyles(c), children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+            : { ...focusVisibleStyles(c), ...reducedMotionSx() }, children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: 700, color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 export default UpgradeButton;

package/dist/esm/Components/UserDetails/UserDetails.js

@@ -7,6 +7,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import PersonChip from "../PersonChip/PersonChip.js";
 import AddUserModal from "./AddUserModal.js";
@@ -76,7 +77,12 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                         background: isSelected
                                             ? rowBackgrounds.selectedActive
                                             : rowBackgrounds.active,
-                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), children: [isSelected && (_jsx(Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), _jsx(PersonChip, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
+                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", role: "button", tabIndex: 0, "aria-current": isSelected ? true : undefined, _focusVisible: focusVisibleRing(colors), onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), onKeyDown: (e) => {
+                                        if (e.key !== "Enter" && e.key !== " ")
+                                            return;
+                                        e.preventDefault();
+                                        onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user);
+                                    }, children: [isSelected && (_jsx(Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), _jsx(PersonChip, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
                             }) })) })] }), _jsxs(Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [_jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && (_jsx(Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: _jsx(UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), _jsx(Box, { flex: 1, overflowY: "auto", tabIndex: 0, role: "region", "aria-label": selectedUser ? labels.userDetails : labels.selectTeamMember, children: isUsersLoading ? (_jsxs(VStack, { spacing: 4, p: 4, align: "stretch", children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(SkeletonCircle, { size: "16" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "18px", width: "50%", mb: 2 }), _jsx(Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => (_jsxs(Box, { w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "30%", mb: 2 }), _jsx(Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [_jsxs(Flex, { alignItems: "center", gap: 4, children: [_jsxs(Box, { position: "relative", children: [_jsx(Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto }), selectedUser.isCurrent && (_jsx(Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "xs", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), _jsxs(Box, { children: [_jsx(Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), _jsx(Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), _jsxs(HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && (_jsx(Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "xs", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
                                             !selectedUser.isSuperAdmin && (_jsxs(HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: _jsx(Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&
                                                         (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId)), children: labels.resendInvitation })), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: _jsx(Shield, { size: 13 }), onClick: () => {