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

package/dist/Components/SelectSearch/SelectSearch.js

@@ -17,12 +17,15 @@ const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
 const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const optionRowInk_1 = require("../Select/optionRowInk");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const lucide_react_1 = require("lucide-react");
+const activationKey_1 = require("../Common/activationKey");
+const useOutsideMouseDown_1 = require("../../Hooks/useOutsideMouseDown");
 const ROW_TRANSITION = (0, motion_1.transitionFor)(["background-color"]);
 const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, size, isMultipleSelect, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -38,17 +41,12 @@ const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOp
                 const isActive = index === activeIndex;
                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
                         optionRefs.current[index] = el;
-                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => handleOptionClick(option), onKeyDown: (e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            handleOptionClick(option);
-                        }
-                    }, display: "flex", alignItems: "center", gap: spec.gap, children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: spec.avatarSize, name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: spec.descriptionFontSize, color: (0, optionRowInk_1.optionRowDescriptionInk)(theme.colors), children: option.email }))] }), isSingleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => handleOptionClick(option), onKeyDown: (0, activationKey_1.onActivationKey)(() => handleOptionClick(option)), display: "flex", alignItems: "center", gap: spec.gap, children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: spec.avatarSize, name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "full" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: spec.descriptionFontSize, color: (0, optionRowInk_1.optionRowDescriptionInk)(theme.colors), children: option.email }))] }), isSingleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
             }) }));
     }
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));
 };
-/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+/** Prefer `Select` (`native={false}`): onOptionSelect→onChange, inputOnchange→onSearchChange, the footer row→footerAction. */
 function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText = "loading", boxStyle, placeholder = "Select Option", searchQuery = null, isInformation = false, informationMessage, rightIcon, rightElementStyle, isMultipleSelect = false, isRequired = false, onOptionMultiSelect, error = false, isProfile = false, isBottomIcon = false, errorMessage, helperText, size = controlSizes_1.DEFAULT_CONTROL_SIZE, BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
@@ -66,19 +64,17 @@ function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnc
     const listboxId = (0, react_1.useId)();
     // NOTE: roving-tabindex nav (same shape as Table/filters/CompactSelect) — real DOM focus, no aria-activedescendant needed.
     const optionRefs = (0, react_1.useRef)([]);
+    const footerRef = (0, react_1.useRef)(null);
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
     const pendingFocusFirstOption = (0, react_1.useRef)(false);
     const skipNextInputFocusOpen = (0, react_1.useRef)(false);
-    const closeAndFocusInput = () => {
+    const closeAndFocusInput = (0, react_1.useCallback)(() => {
         var _a;
         setIsOpen(false);
-        skipNextInputFocusOpen.current = true;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const focusOption = (0, react_1.useCallback)((next) => {
-        var _a;
-        setActiveIndex(next);
-        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        if (document.activeElement !== inputRef.current) {
+            skipNextInputFocusOpen.current = true;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }, []);
     const filteredOptions = (0, react_1.useMemo)(() => {
         return options.filter((option) => {
@@ -91,6 +87,20 @@ function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnc
                 optionLabel.toLowerCase().includes(searchValue.toLowerCase()));
         });
     }, [options, inputValue, isMultipleSelect, selectedOptions]);
+    const rowCount = isOptionLoading ? 0 : filteredOptions.length;
+    const hasOptionRows = rowCount > 0 || isBottomIcon;
+    const footerStop = isBottomIcon ? rowCount : -1;
+    const stopCount = rowCount + (isBottomIcon ? 1 : 0);
+    // NOTE: inset — the popup panel clips overflow, so an outer ring would be cut off.
+    const footerFocusRing = {
+        outline: "2px solid transparent",
+        boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(theme.colors),
+    };
+    const focusOption = (0, react_1.useCallback)((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = (next === footerStop ? footerRef.current : optionRefs.current[next])) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [footerStop]);
     const handleOptionClick = (0, react_1.useCallback)((option) => {
         if (isMultipleSelect) {
             setSelectedOptions((prev) => {
@@ -110,30 +120,34 @@ function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnc
         }
         else {
             setInputValue(option.label);
-            setIsOpen(false);
+            closeAndFocusInput();
             if (onOptionSelect) {
                 onOptionSelect(option);
             }
         }
-    }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect]);
+    }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect, closeAndFocusInput]);
     const isOptionSelected = (0, react_1.useCallback)((option) => selectedOptions.some((selected) => selected.id === option.id), [selectedOptions]);
     (0, react_1.useEffect)(() => setActiveIndex(0), [inputValue, isOpen]);
     (0, react_1.useEffect)(() => {
-        var _a;
         if (isOpen && pendingFocusFirstOption.current) {
             pendingFocusFirstOption.current = false;
             // Refs are already attached by the time this effect runs (React
             // commits before running effects), so this can focus synchronously.
-            (_a = optionRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            focusOption(0);
         }
-    }, [isOpen]);
+    }, [isOpen, focusOption]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (isOpen && isBottomIcon && dropdownRef.current && footerRef.current) {
+            dropdownRef.current.style.scrollPaddingBottom = `${footerRef.current.offsetHeight}px`;
+        }
+    }, [isOpen, isBottomIcon, BottomText]);
     const handleListKeyDown = (e) => {
-        if (filteredOptions.length === 0)
+        if (stopCount === 0)
             return;
         if (e.key === "ArrowDown" || e.key === "ArrowUp") {
             e.preventDefault();
             const step = e.key === "ArrowDown" ? 1 : -1;
-            focusOption((activeIndex + step + filteredOptions.length) % filteredOptions.length);
+            focusOption((activeIndex + step + stopCount) % stopCount);
         }
         else if (e.key === "Home") {
             e.preventDefault();
@@ -141,7 +155,7 @@ function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnc
         }
         else if (e.key === "End") {
             e.preventDefault();
-            focusOption(filteredOptions.length - 1);
+            focusOption(stopCount - 1);
         }
         else if (e.key === "Escape") {
             e.preventDefault();
@@ -177,7 +191,7 @@ function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnc
                 pendingFocusFirstOption.current = true;
                 openDropdown();
             }
-            else if (filteredOptions.length > 0) {
+            else if (stopCount > 0) {
                 focusOption(0);
             }
         }
@@ -208,26 +222,22 @@ function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnc
         if (!isOpen)
             return;
         updateDropdownPosition();
-        const handleClickOutside = (event) => {
-            if (inputRef.current &&
-                dropdownRef.current &&
-                !inputRef.current.contains(event.target) &&
-                !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
     }, [isOpen]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "3.125rem", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: size, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, variant: "outline", value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
+    (0, useOutsideMouseDown_1.useOutsideMouseDown)([inputRef, dropdownRef], () => {
+        if (inputRef.current && dropdownRef.current)
+            setIsOpen(false);
+    }, { enabled: isOpen });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, onBlur: (e) => {
+                    if (e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget)) {
+                        setIsOpen(false);
+                    }
+                }, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "3.125rem", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: size, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, variant: "outline", value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
                                     if (skipNextInputFocusOpen.current) {
                                         skipNextInputFocusOpen.current = false;
                                         return;
                                     }
                                     openDropdown();
-                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), ...(0, fieldStyles_1.controlSizeStyles)(size), ...(0, motion_2.reducedMotionSx)() }, style: inputStyle }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), zIndex: 1, borderTop: `1px solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", color: BottomTextColor
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), ...(0, fieldStyles_1.controlSizeStyles)(size), ...(0, motion_2.reducedMotionSx)() }, style: inputStyle }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, id: listboxId, role: hasOptionRows ? "listbox" : undefined, "aria-label": hasOptionRows ? (label !== null && label !== void 0 ? label : placeholder) : undefined, tabIndex: -1, _focus: { outline: "none" }, onKeyDown: handleListKeyDown, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "hr", role: "presentation", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors) }), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: footerRef, role: "option", "aria-selected": false, tabIndex: activeIndex === footerStop ? 0 : -1, w: "100%", textAlign: "left", position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, onFocus: () => setActiveIndex(footerStop), _focusVisible: footerFocusRing, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), zIndex: 1, borderTop: `1px solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: "sm", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
 }

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -1,5 +1,5 @@
 import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
-/** Prefer `Select` with `native={false}` for new work — not a drop-in: its combobox is the text input itself. See select-absorption-spec.md. */
+/** Prefer `Select` with `native={false}` for new work — not a drop-in: its combobox is the text input itself. See COMPONENT-GOTCHAS.md ("Which select component"). */
 export type SelectSearchProps = {
     options: selectOptions[];
     /** @deprecated Never read — the search input always renders. */
@@ -51,7 +51,7 @@ export type SelectSearchProps = {
     helperText?: string;
     /** Height on the field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
-    /** Shows a sticky "Add New"-style footer row in the popup; required for all Bottom* props. */
+    /** Shows a sticky "Add New"-style footer row, the listbox's last option; required for all Bottom* props. */
     isBottomIcon?: boolean | undefined;
     /** Footer icon element; omit for a plus icon — `true` renders no icon at all. */
     BottomIcon?: boolean | undefined | JSX.Element;
@@ -61,7 +61,7 @@ export type SelectSearchProps = {
     BottomText?: string | number;
     /** Despite the CSSProperties type, pass a plain color string (e.g. "red") — used directly as one, not spread as styles. */
     BottomTextColor?: React.CSSProperties;
-    /** Fires on footer row click; the popup stays open. */
+    /** Fires when the footer row is clicked or activated with Enter or Space; the popup stays open. */
     handleBottomClick?: () => void;
 };
 /** Option shape for SelectSearch; `email`/`profileUrl` back `isProfile` rows, `color` backs `isColorOptions` rows. */

package/dist/Components/SelectV2/SelectV2.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { chipTriggerSizeStyles } from "../Common/chipTriggerSize";
 import type { SelectV2Props } from "./SelectV2Props";
 export { chipTriggerSizeStyles };
-/** @deprecated Use `Select` with `native={false}`. See MERGE-NOTES-select-deprecation.md. */
+/** @deprecated Use `Select` with `native={false}`; every prop is forwarded to it unchanged. */
 declare const SelectV2: React.ForwardRefExoticComponent<SelectV2Props & React.RefAttributes<HTMLDivElement>>;
 /** @deprecated Use `Select` with `native={false}`. */
 export default SelectV2;

package/dist/Components/SelectV2/SelectV2.js

@@ -9,7 +9,7 @@ const react_1 = require("react");
 const Select_1 = __importDefault(require("../Select/Select"));
 const chipTriggerSize_1 = require("../Common/chipTriggerSize");
 Object.defineProperty(exports, "chipTriggerSizeStyles", { enumerable: true, get: function () { return chipTriggerSize_1.chipTriggerSizeStyles; } });
-/** @deprecated Use `Select` with `native={false}`. See MERGE-NOTES-select-deprecation.md. */
+/** @deprecated Use `Select` with `native={false}`; every prop is forwarded to it unchanged. */
 const SelectV2 = (0, react_1.forwardRef)(function SelectV2(props, ref) {
     return (0, jsx_runtime_1.jsx)(Select_1.default, { ...props, native: false, ref: ref });
 });

package/dist/Components/SelectV2/SelectV2Props.d.ts

@@ -70,7 +70,7 @@ type SelectV2CommonProps = {
     onSearchChange?: (query: string) => void;
 };
 /** Single-select arm of `SelectV2Props`; `isMulti` false/absent discriminates it from the multi variant. */
-/** @deprecated Use `SelectSingleProps` from `Select`/`SelectProps` (`native={false}`). See MERGE-NOTES-select-deprecation.md. */
+/** @deprecated Use `SelectSingleProps` (`native={false}`). */
 export type SelectV2SingleProps = SelectV2CommonProps & {
     isMulti?: false;
     /** Selected option `id`; compared as strings, so `1` matches `"1"`. */
@@ -79,7 +79,7 @@ export type SelectV2SingleProps = SelectV2CommonProps & {
     onChange: (selectedOption: OptionProp | undefined) => void;
 };
 /** Multi-select arm of `SelectV2Props`; `isMulti: true` discriminates it and makes `value` an array. */
-/** @deprecated Use `SelectMultiProps` from `Select`/`SelectProps` (`native={false}`). See MERGE-NOTES-select-deprecation.md. */
+/** @deprecated Use `SelectMultiProps` (`native={false}`). */
 export type SelectV2MultiProps = SelectV2CommonProps & {
     isMulti: true;
     /** Selected option ids; ids with no matching option are dropped from the display. */
@@ -92,6 +92,6 @@ export type SelectV2MultiProps = SelectV2CommonProps & {
     maxVisibleChips?: number;
 };
 /** Props for `SelectV2`; a discriminated union on `isMulti` between the single and multi variants. */
-/** @deprecated Use `Select` from `pixelize-design-library` with `native={false}`. See MERGE-NOTES-select-deprecation.md for the prop mapping. */
+/** @deprecated Use `SelectProps` with `native={false}`; `SelectV2` forwards every prop to `Select` unchanged. */
 export type SelectV2Props = SelectV2SingleProps | SelectV2MultiProps;
 export {};

package/dist/Components/SideBar/SecondaryBar.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const states_1 = require("../../Theme/tokens/primitives/states");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
@@ -44,7 +45,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
     const blocked = isItemBlocked(item);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", py: 2, mb: "2px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", py: 2, mb: "2px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? states_1.DISABLED_OPACITY : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
                         bg: blocked
                             ? "transparent"
                             : isActive
@@ -62,7 +63,7 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
     const blocked = isItemBlocked(item);
-    const row = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", px: 2, py: "7px", mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, overflow: "hidden", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+    const row = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", px: 2, py: "7px", mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, overflow: "hidden", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? states_1.DISABLED_OPACITY : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
             bg: blocked ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
         }, onClick: (e) => {
             e.preventDefault();

package/dist/Components/SideBar/components/MenuItemBox.js

@@ -44,6 +44,7 @@ const MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
 const menuDisabled_1 = require("../menuDisabled");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const states_1 = require("../../../Theme/tokens/primitives/states");
 const sidebarAccentColors_1 = require("../sidebarAccentColors");
 const tone_1 = require("../../../Theme/tokens/builders/tone");
 const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
@@ -129,7 +130,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                 backgroundColor: isAnyActive ? "whiteAlpha.400" : "whiteAlpha.200",
             },
         cursor: isBlocked ? "not-allowed" : "pointer",
-        opacity: isBlocked ? 0.6 : 1,
+        opacity: isBlocked ? states_1.DISABLED_OPACITY : 1,
         transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION,
         sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors),
     };
@@ -178,7 +179,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                     : isSubActive
                                         ? "whiteAlpha.400"
                                         : "whiteAlpha.200",
-                            }, opacity: isSubBlocked ? 0.6 : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
+                            }, opacity: isSubBlocked ? states_1.DISABLED_OPACITY : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
                                 if (sub.url && (0, exports.isBrowserNavigationGesture)(e))
                                     return;
                                 e.preventDefault();

package/dist/Components/SideBar/components/MenuItems.js

@@ -148,7 +148,7 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
                 lastGroup = menu.group;
                 groupCount += 1;
             }
-            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [showGroup && !isFirstGroup && ((0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: overlay ? "3px" : "5px" })), showGroup && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), (0, jsx_runtime_1.jsx)(MenuItemBox_1.default, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle, overlay: overlay })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [showGroup && !isFirstGroup && ((0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: overlay ? "3px" : "5px" })), showGroup && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), (0, jsx_runtime_1.jsx)(MenuItemBox_1.default, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle, overlay: overlay })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
         }) }));
 };
 exports.default = (0, react_1.memo)(MenuItems);

package/dist/Components/SideBar/components/OtherApps.js

@@ -18,11 +18,11 @@ const OtherApps = ({ toggle, otherApps }) => {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", color: theme.colors.sidebar.mutedIcon, fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
     };
     // Grid cell: icon on top, truncated label below (label hidden when collapsed).
-    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
     const flyoutBody = (app) => {
         var _a;
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: toggle ? "6px" : 2, px: "6px", flexShrink: 0, children: [!toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", fontWeight: 600, color: theme.colors.sidebar.mutedLabel, letterSpacing: "0.1em", textTransform: "uppercase", px: 2, pt: "2px", pb: "5px", children: "Switch app" })), (0, jsx_runtime_1.jsx)(react_1.Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }) }), (0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: zIndices_1.default.popover, color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: flyoutBody(app) }) }) })] }, app.name)) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: toggle ? "6px" : 2, px: "6px", flexShrink: 0, children: [!toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", fontWeight: 600, color: theme.colors.sidebar.mutedLabel, letterSpacing: "0.1em", textTransform: "uppercase", px: 2, pt: "2px", pb: "5px", children: "Switch app" })), (0, jsx_runtime_1.jsx)(react_1.Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }) }), (0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: zIndices_1.default.popover, color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: flyoutBody(app) }) }) })] }, app.name)) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
 };
 exports.default = OtherApps;

package/dist/Components/SideBar/components/PinnedSection.js

@@ -96,6 +96,6 @@ const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = ex
             backgroundColor: LADDER.hover,
             color: theme.colors.white,
         }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: showAll ? lucide_react_1.ChevronUp : lucide_react_1.ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && (0, jsx_runtime_1.jsx)("span", { children: disclosureLabel })] }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: headingId, as: "h2", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", listStyleType: "none", children: toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: overlay ? "6px" : "8px", mb: overlay ? "3px" : "5px" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: headingId, as: "h2", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", listStyleType: "none", children: toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: overlay ? "6px" : "8px", mb: overlay ? "3px" : "5px" })] }));
 };
 exports.default = PinnedSection;

package/dist/Components/SideBar/sidebarScale.d.ts

@@ -9,7 +9,7 @@ export declare const SIDEBAR_ROW: {
 };
 /** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */
 export declare const SIDEBAR_CHROME: {
-    readonly titleFontSize: "12.5px";
-    readonly labelFontSize: "11.5px";
+    readonly titleFontSize: string;
+    readonly labelFontSize: string;
     readonly metaFontSize: "10px";
 };

package/dist/Components/SideBar/sidebarScale.js

@@ -13,7 +13,7 @@ exports.SIDEBAR_ROW = {
 };
 /** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */
 exports.SIDEBAR_CHROME = {
-    titleFontSize: "12.5px",
-    labelFontSize: "11.5px",
+    titleFontSize: typography_1.fontSizes["xs-plus"],
+    labelFontSize: typography_1.fontSizes["xs-minus"],
     metaFontSize: "10px",
 };

package/dist/Components/SignInActivityTable/SignInActivityTable.js

@@ -9,7 +9,11 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const useScrollableRegion_1 = require("../../Hooks/useScrollableRegion");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const scrollRegionRing_1 = require("./scrollRegionRing");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const DEFAULT_LABELS = {
     title: "Recent Sign-in Devices",
     browser: "Browser",
@@ -19,6 +23,8 @@ const DEFAULT_LABELS = {
 };
 const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const titleId = (0, react_1.useId)();
+    const { ref: scrollRef, props: scrollProps } = (0, useScrollableRegion_1.useScrollableRegion)({ labelledBy: titleId });
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const edge = colors.boxborder[200];
     const surface = colors.background[50];
@@ -26,7 +32,6 @@ const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverride
     const muted = colors.textMuted;
     const heading = colors.header[500];
     const headBg = (0, planeStep_1.bandOn)(colors.backgroundColor.tableHeader, surface);
-    const shadow = colors.boxShadow.default;
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
@@ -35,6 +40,6 @@ const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverride
         borderColor: rule,
         py: 3,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: `0 1px 2px ${shadow}`, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.browser }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.device }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.recentActivity })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: devices.map((device, index) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: device.device }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: (0, jsx_runtime_1.jsx)(react_2.Text, { children: device.activity }) })] }, index))) })] })) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { id: titleId, size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: scrollRef, ...scrollProps, overflowX: "auto", sx: { _focusVisible: (0, scrollRegionRing_1.scrollRegionFocusRing)(colors, headBg) }, children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.browser }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.device }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.recentActivity })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: devices.map((device, index) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: BACKGROUND_TRANSITION, children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: device.device }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: (0, jsx_runtime_1.jsx)(react_2.Text, { children: device.activity }) })] }, index))) })] })) })] }));
 };
 exports.default = SignInActivityTable;

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -12,7 +12,7 @@ export type SignInDevice = {
  * key has a sensible English default so the component works standalone.
  */
 export type SignInActivityLabels = {
-    /** Card heading; defaults to "Recent Sign-in Devices". */
+    /** Card heading, also the accessible name of the scroll area while it overflows; defaults to "Recent Sign-in Devices". */
     title?: string;
     browser?: string;
     device?: string;

package/dist/Components/SignInActivityTable/scrollRegionRing.d.ts

@@ -0,0 +1,10 @@
+import type { FocusRingTokens } from "../../Theme/tokens/types";
+type WithFocusRing = {
+    focusRing: FocusRingTokens;
+};
+export declare const scrollRegionRingColor: (colors: WithFocusRing, band: string) => string;
+export declare const scrollRegionFocusRing: (colors: WithFocusRing, band: string) => {
+    outline: string;
+    outlineOffset: string;
+};
+export {};

package/dist/Components/SignInActivityTable/scrollRegionRing.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollRegionFocusRing = exports.scrollRegionRingColor = void 0;
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const BAND = focusRing_styles_1.FOCUS_RING_WIDTH - focusRing_styles_1.FOCUS_HALO_WIDTH;
+const scrollRegionRingColor = (colors, band) => (0, outlineRung_1.liftToContrast)(colors.focusRing.ring, band, outlineRung_1.AA_NON_TEXT);
+exports.scrollRegionRingColor = scrollRegionRingColor;
+// NOTE: an outline, not a box-shadow — an inset shadow is hidden under the opaque header band.
+const scrollRegionFocusRing = (colors, band) => ({
+    outline: `${BAND}px solid ${(0, exports.scrollRegionRingColor)(colors, band)}`,
+    outlineOffset: `-${BAND}px`,
+});
+exports.scrollRegionFocusRing = scrollRegionFocusRing;

package/dist/Components/Skeletons/SkeletonProps.d.ts

@@ -1,10 +1,14 @@
 import type { HTMLAttributes } from "react";
 import { SkeletonProps as ChakraSkeleton, SkeletonTextProps } from "@chakra-ui/react";
-type SkeletonOwnProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "alignSelf" | "flexShrink" | "noOfLines" | "width"> & {
+type SkeletonOwnProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
     /** isLoaded, children, bg, color, fadeDuration only apply to type="skeleton" — circle/text accept but silently ignore them. */
     type: "skeleton" | "circle" | "text";
     /** Corner radius for type="skeleton" (theme default when unset); circle/text ignore it. */
     borderRadius?: ChakraSkeleton["borderRadius"];
+    /** @deprecated Never applied; wrap the skeleton in an element that sets it. */
+    alignSelf?: ChakraSkeleton["alignSelf"];
+    /** @deprecated Never applied; wrap the skeleton in an element that sets it. */
+    flexShrink?: ChakraSkeleton["flexShrink"];
 } & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;
 /** Closed style-prop list (no margin beyond `mt` on text); plain HTML attributes (id, className, data-*, aria-*) land on the rendered root. */
 export type SkeletonProps = SkeletonOwnProps & Omit<HTMLAttributes<HTMLDivElement>, keyof SkeletonOwnProps | "dangerouslySetInnerHTML">;

package/dist/Components/Slider/Slider.d.ts

@@ -4,6 +4,8 @@ type ImageSliderProps = {
     /** ms between slides; <= 0 disables auto-advance (no timer). Also paused while hovered or focused, and off under reduced motion. */
     interval?: number;
     isArrow?: boolean;
+    /** Adds a play/pause button (WCAG 2.2.2) while auto-advance is running; off by default. Hidden when `interval` <= 0, with one slide, or under reduced motion. */
+    showPauseControl?: boolean;
     mobileImages?: SliderImage[];
 };
 type SliderImage = {

package/dist/Components/Slider/Slider.js

@@ -10,12 +10,13 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 /** Auto-advancing image/content carousel (pauses on hover/focus, never auto-advances under reduced motion) — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
-const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
+const Slider = ({ images, interval = 5000, isArrow = false, showPauseControl = false, mobileImages, }) => {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [focused, setFocused] = (0, react_1.useState)(false);
+    const [userPaused, setUserPaused] = (0, react_1.useState)(false);
     const reducedMotion = (0, motion_2.usePrefersReducedMotion)();
     const timeoutRef = (0, react_1.useRef)(null);
     const isMobile = (_a = (0, react_2.useBreakpointValue)({ base: true, md: false })) !== null && _a !== void 0 ? _a : false;
@@ -27,14 +28,14 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
     }, [slides.length]);
     (0, react_1.useEffect)(() => {
-        if (interval > 0 && !hovered && !focused && !reducedMotion) {
+        if (interval > 0 && !hovered && !focused && !userPaused && !reducedMotion) {
             timeoutRef.current = setTimeout(nextSlide, interval);
         }
         return () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         };
-    }, [currentIndex, interval, nextSlide, hovered, focused, reducedMotion]);
+    }, [currentIndex, interval, nextSlide, hovered, focused, userPaused, reducedMotion]);
     (0, react_1.useEffect)(() => {
         if (currentIndex >= slides.length) {
             setCurrentIndex(0);
@@ -54,6 +55,6 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
                     .sort((a, b) => a.order - b.order)
                     .map((image, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.AspectRatio, { ratio: ratio, w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: isMobile && image.mobilePreviewUrl
                                 ? image.mobilePreviewUrl
-                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })] })), slides.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, bg: chipBg, px: "0.6rem", py: "0.4rem", borderRadius: "full", children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, border: "none", p: 0, bg: idx === currentIndex ? chipInk : dotInactiveInk, borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), "aria-label": `Go to slide ${idx + 1}`, "aria-current": idx === currentIndex, transition: (0, motion_1.transitionFor)(["background-color"], "base"), _focusVisible: { outline: `2px solid ${chipInk}`, outlineOffset: "2px" } }, idx))) }))] }));
+                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })] })), showPauseControl && interval > 0 && slides.length > 1 && !reducedMotion && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: userPaused ? (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 16 }), "aria-label": userPaused ? "Play slideshow" : "Pause slideshow", onClick: () => setUserPaused((paused) => !paused), position: "absolute", bottom: "1rem", right: "1rem", zIndex: 2, size: "sm", variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })), slides.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, bg: chipBg, px: "0.6rem", py: "0.4rem", borderRadius: "full", children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, border: "none", p: 0, bg: idx === currentIndex ? chipInk : dotInactiveInk, borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), "aria-label": `Go to slide ${idx + 1}`, "aria-current": idx === currentIndex, transition: (0, motion_1.transitionFor)(["background-color"], "base"), _focusVisible: { outline: `2px solid ${chipInk}`, outlineOffset: "2px" } }, idx))) }))] }));
 };
 exports.default = Slider;

package/dist/Components/StageProgress/StageItem.js

@@ -8,6 +8,7 @@ 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 focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
@@ -86,7 +87,7 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
         : undefined;
     const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
     // clip-path clips box-shadow too, so the focus ring stays on this unclipped outer button.
-    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, "aria-disabled": disabled ? true : undefined, onClick: interactive ? onClick : undefined, "data-group": "", position: "relative", flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, p: 0, border: "none", bg: "transparent", color: isOutlinePill ? palette.mutedText : color, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: LABEL_TRANSITION, sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, _hover: interactive
+    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, "aria-disabled": disabled ? true : undefined, onClick: interactive ? onClick : undefined, "data-group": "", position: "relative", flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, p: 0, border: "none", bg: "transparent", color: isOutlinePill ? palette.mutedText : color, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? states_1.DISABLED_OPACITY : 1, transition: LABEL_TRANSITION, sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, _hover: interactive
             ? {
                 color: state === "active" ? undefined : palette.onStrong,
                 filter: "brightness(0.97)",