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

package/dist/Components/Dropdown/DropDown.js

@@ -18,6 +18,8 @@ const motion_1 = require("../../Theme/tokens/primitives/motion");
 const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const activationKey_1 = require("../Common/activationKey");
+const useOutsideMouseDown_1 = require("../../Hooks/useOutsideMouseDown");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
 const SIZE_MAP = {
     xs: { btn: "xs", img: "1rem", chevron: controlSizes_1.BUTTON_SIZES.xs.iconSize, minW: "8rem", gap: 1.5, rowSize: "xs" },
@@ -110,7 +112,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
             e.preventDefault();
             onClose();
         }
-        else if (e.key === "Enter" || e.key === " ") {
+        else if ((0, activationKey_1.isActivationKey)(e)) {
             // NOTE: explicit — the trigger is a styled Flex with no native button activation to rely on.
             e.preventDefault();
             handleToggle();
@@ -157,7 +159,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         }
     };
     const handleItemKeyDown = (e, optionId, optionLabel) => {
-        if (e.key === "Enter" || e.key === " ") {
+        if ((0, activationKey_1.isActivationKey)(e)) {
             e.preventDefault();
             handleListItemClick(optionId, optionLabel);
             focusTrigger();
@@ -208,24 +210,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
             window.removeEventListener("resize", onReposition);
         };
     }, [isOpen, updateMenuPos]);
-    (0, react_1.useEffect)(() => {
-        if (!isOpen)
-            return;
-        const handleClickOutside = (event) => {
-            var _a, _b;
-            const target = event.target;
-            // Ignore clicks on the trigger or inside the (portaled) menu.
-            if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
-                return;
-            if ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
-                return;
-            onClose();
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen, onClose]);
+    (0, useOutsideMouseDown_1.useOutsideMouseDown)([dropdownRef, menuRef], () => onClose(), { enabled: isOpen });
     const setMenuRef = (node) => {
         menuRef.current = node;
         if (typeof ref === "function")
@@ -251,7 +236,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
                     focusTrigger();
                 }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: rowSpec.mx, px: rowSpec.px, py: rowSpec.py, minH: rowSpec.minH, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, display: "flex", alignItems: "center", gap: rowSpec.gap, fontSize: rowSpec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, false), transition: ROW_TRANSITION, _hover: { bg: hoverTint }, _focus: { bg: hoverTint, outline: "none" }, _focusVisible: {
                     bg: hoverTint,
-                    boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
+                    boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(theme.colors),
                 }, borderBottom: divider
                     ? `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`
                     : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...(0, motion_2.reducedMotionSx)() }, style: ItemStyle, fontWeight: 500, children: [option.image && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: rowSpec.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));

package/dist/Components/Editor/Editor.js

@@ -92,6 +92,8 @@ const Editor = react_1.default.memo(function Editor({ value, key, config, editor
         popupRoot,
         // Off by default, Jodit ships every toolbar button unreachable by keyboard.
         allowTabNavigation: true,
+        // NOTE: Jodit's default -1 keeps the editing surface out of the Tab order.
+        tabIndex: 0,
         // `config` spread as `Record<string, unknown>`: mixing a literal `popupRoot` key with a
         // spread of the raw `DeepPartial<Config>` type (Jodit's huge recursive config type) blows
         // past TS's type-instantiation depth limit (TS2589) — the cast avoids that without
@@ -127,11 +129,13 @@ const Editor = react_1.default.memo(function Editor({ value, key, config, editor
         set("role", "textbox");
         set("aria-multiline", "true");
         set("aria-labelledby", label ? ids.labelId : undefined);
+        set("aria-label", label ? undefined : text.editor);
         set("aria-describedby", describedBy);
         set("aria-invalid", invalid ? "true" : undefined);
         set("aria-required", isRequired ? "true" : undefined);
-    }, [instance, label, ids.labelId, describedBy, invalid, isRequired]);
+        set("aria-readonly", isReadOnly ? "true" : undefined);
+    }, [instance, label, text.editor, ids.labelId, describedBy, invalid, isRequired, isReadOnly]);
     const showFieldBar = hasFields || Boolean(toolbarButtons === null || toolbarButtons === void 0 ? void 0 : toolbarButtons.length);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, children: [label && ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "label", id: ids.labelId, display: "block", onClick: () => api.focus(), ...(0, FormLabel_1.fieldLabelStyles)(theme.colors), children: [label, isRequired && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" }))] })), showFieldBar && ((0, jsx_runtime_1.jsx)(EditorFieldBar_1.default, { options: options, labels: text, api: api, isDisabled: !instance || isReadOnly, showFieldMenu: hasFields, showMakeDynamic: hasFields && (showMakeDynamic !== null && showMakeDynamic !== void 0 ? showMakeDynamic : true), buttons: toolbarButtons !== null && toolbarButtons !== void 0 ? toolbarButtons : [], onMakeDynamic: () => setDynamicText(api.getSelectionText()) })), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: { ...themeVars, ...(0, editorTokenStyles_1.chipStyles)(theme.colors) }, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: popupRoot && ((0, jsx_runtime_1.jsx)(JoditEditor, { config: stableConfig, value: joditValue, ref: editorRef, editorRef: attachEditor, className: className }, key)) }) }), unknownActive ? ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { id: ids.errorId, errorMessage: text.unknownTokens(unknown.join(", ")) })) : ((0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })), hasFields && ((0, jsx_runtime_1.jsx)(MakeDynamicDialog_1.default, { selectedText: dynamicText, options: options, labels: text, countFor: api.countOccurrences, onReplace: api.replaceAll, onClose: () => setDynamicText(null) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, children: [label && ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "label", id: ids.labelId, display: "block", onClick: () => api.focus(), ...(0, FormLabel_1.fieldLabelStyles)(theme.colors), children: [label, isRequired && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" }))] })), showFieldBar && ((0, jsx_runtime_1.jsx)(EditorFieldBar_1.default, { options: options, labels: text, api: api, isDisabled: !instance || isReadOnly, showFieldMenu: hasFields, showMakeDynamic: hasFields && (showMakeDynamic !== null && showMakeDynamic !== void 0 ? showMakeDynamic : true), buttons: toolbarButtons !== null && toolbarButtons !== void 0 ? toolbarButtons : [], onMakeDynamic: () => setDynamicText(api.getSelectionText()) })), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: { ...themeVars, ...(0, editorTokenStyles_1.chipStyles)(theme.colors), ...(0, editorTokenStyles_1.frameFocusStyles)(theme.colors) }, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: popupRoot && ((0, jsx_runtime_1.jsx)(JoditEditor, { config: stableConfig, value: joditValue, ref: editorRef, editorRef: attachEditor, className: className }, key)) }) }), unknownActive ? ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { id: ids.errorId, errorMessage: text.unknownTokens(unknown.join(", ")) })) : ((0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })), hasFields && ((0, jsx_runtime_1.jsx)(MakeDynamicDialog_1.default, { selectedText: dynamicText, options: options, labels: text, countFor: api.countOccurrences, onReplace: api.replaceAll, onClose: () => setDynamicText(null) }))] }));
 });
 exports.default = Editor;

package/dist/Components/Editor/EditorProps.d.ts

@@ -10,6 +10,18 @@ export type EditorMergeField = {
     group?: string;
     /** Example value, shown on the chip's hover title. */
     sample?: string;
+    /** Record the field belongs to (e.g. `employee`); carried for a field browser, not read by `Editor`. */
+    object?: string;
+    /** What `object` is, shown beside its heading in a field browser. */
+    objectDescription?: string;
+    /** What the field holds, shown in a field browser. */
+    description?: string;
+    /** Longer illustrative value for a field browser; `sample` stays the chip title. */
+    example?: string;
+    /** Where the value comes from (e.g. a module or API), shown in a field browser. */
+    source?: string;
+    /** True when the field resolves to an image, not text. */
+    image?: boolean;
 };
 /** How a token is written in the stored HTML. */
 export type EditorTokenSyntax = {
@@ -37,6 +49,8 @@ export type EditorToolbarButton = {
 };
 /** Every visible string of the merge-field UI; omit a key to keep its English default. */
 export type EditorLabels = Partial<{
+    /** Accessible name of the editing area when no visible `label` is given. */
+    editor: string;
     insertField: string;
     noFields: string;
     makeDynamic: string;
@@ -53,7 +67,9 @@ export type EditorLabels = Partial<{
     fieldChip: (label: string) => string;
 }>;
 /** Props for the lazy-loaded Jodit wrapper; a `config.theme`/`config.popupRoot` you pass overrides this library's own dark-mode fix. */
-export type EditorProps = Pick<JoditEditorProps, "value" | "config" | "className" | "onChange" | "onBlur"> & {
+export type EditorProps = Pick<JoditEditorProps, "value" | "className" | "onChange" | "onBlur"> & {
+    /** Jodit config; set sourceEditor "area" and beautifyHTML false to avoid cdnjs calls under CSP. */
+    config?: JoditEditorProps["config"];
     /** `key` is dead (React reserves it, never reaches Jodit); `editorRef.current` stays null until the lazy chunk loads. */
     editorRef?: JoditEditorProps["ref"];
     key?: string | number;

package/dist/Components/Editor/editorLabels.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveEditorLabels = exports.DEFAULT_EDITOR_LABELS = void 0;
 exports.DEFAULT_EDITOR_LABELS = {
+    editor: "Rich text editor",
     insertField: "Insert field",
     noFields: "No fields",
     makeDynamic: "Make dynamic",

package/dist/Components/Editor/editorTokenStyles.d.ts

@@ -26,3 +26,11 @@ export declare const chipStyles: (colors: PaletteProps) => {
         borderColor: string;
     };
 };
+export declare const frameFocusStyles: (colors: PaletteProps) => {
+    ".jodit-container:not(.jodit_inline):focus-within": {
+        outline: string;
+        outlineOffset: string;
+        boxShadow: string;
+        borderColor: string;
+    };
+};

package/dist/Components/Editor/editorTokenStyles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chipStyles = exports.chipColors = void 0;
+exports.frameFocusStyles = exports.chipStyles = exports.chipColors = void 0;
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const editorTokens_1 = require("./editorTokens");
 const chipColors = (colors) => ({
     known: { bg: colors.primary.opacity[8], ink: colors.accentText },
@@ -28,3 +29,10 @@ const chipStyles = (colors) => {
     };
 };
 exports.chipStyles = chipStyles;
+const frameFocusStyles = (colors) => ({
+    ".jodit-container:not(.jodit_inline):focus-within": {
+        borderColor: colors.primary[500],
+        ...(0, focusRing_styles_1.fieldFocusVisible)(colors),
+    },
+});
+exports.frameFocusStyles = frameFocusStyles;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -1,3 +1,3 @@
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
 /** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
-export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): import("react/jsx-runtime").JSX.Element;
+export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, subtitle, labels, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -1,14 +1,21 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = VerifyEmailOtp;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const Button_1 = __importDefault(require("../../Button/Button"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 const lucide_react_1 = require("lucide-react");
 /** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
-function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
+function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, subtitle = "your new Pixel Account", labels, title, isDisabled = false, isInvalid = false, styles, }) {
+    var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: 700, mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: 600, onClick: resendMail, children: "Resend Code" })] }) })] }));
+    const codeName = title || (labels === null || labels === void 0 ? void 0 : labels.verificationCode) || "Verification code";
+    const digitName = (_a = labels === null || labels === void 0 ? void 0 : labels.digit) !== null && _a !== void 0 ? _a : ((index, total) => `digit ${index} of ${total}`);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: 700, mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, subtitle && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), subtitle] }))] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, role: "group", "aria-label": codeName, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: true, placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${codeName}, ${digitName(index + 1, pins)}`, borderRadius: "lg", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.textMuted, children: [(_b = labels === null || labels === void 0 ? void 0 : labels.didntReceive) !== null && _b !== void 0 ? _b : "Didn’t receive the code?", " ", (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "link", sx: { color: theme.colors.accentText }, fontWeight: 600, onClick: resendMail, children: (_c = labels === null || labels === void 0 ? void 0 : labels.resend) !== null && _c !== void 0 ? _c : "Resend Code" })] }) })] }));
 }

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts

@@ -1,3 +1,13 @@
+type VerifyEmailOtpLabels = {
+    /** Group and cell name used when `title` is empty. Default "Verification code". */
+    verificationCode?: string;
+    /** Accessible name suffix of one cell. Default "digit N of M". */
+    digit?: (index: number, total: number) => string;
+    /** Text before the resend button. Default "Didn’t receive the code?". */
+    didntReceive?: string;
+    /** Resend button text. Default "Resend Code". */
+    resend?: string;
+};
 /** Props for the full OTP verification card (icon, title, resend link); for a bare input in your own layout use PinInput. */
 export type VerifyEmailOtpProps = {
     resendMail: () => void;
@@ -8,9 +18,13 @@ export type VerifyEmailOtpProps = {
     /** Typed as required, but the implementation silently defaults to 5 if a caller bypasses the type and omits it. */
     pins: number;
     title: string;
-    /** A second, hardcoded line — "your new Pixel Account" — is always appended below this text; there's no prop to remove it. */
     description: string;
+    /** Second line under `description`. Defaults to "your new Pixel Account"; pass "" to drop the line. */
+    subtitle?: string;
+    /** Replaces the English UI text; any label left out keeps its default. */
+    labels?: VerifyEmailOtpLabels;
     isDisabled?: boolean;
     isInvalid?: boolean;
     styles?: React.CSSProperties;
 };
+export {};

package/dist/Components/EmptyState/EmptyStateProps.d.ts

@@ -33,3 +33,24 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "t
     /** Escape hatch for extra Chakra styles on the outer container. */
     sx?: BoxProps["sx"];
 }
+/** "Nothing matches your filters" panel; unlike a first-run empty list it names the filters and offers the undo. */
+export interface FilteredEmptyStateProps {
+    /** Defaults to "Nothing matched these filters". */
+    title?: string;
+    /** Replaces the counted default; omit it and, with `filterCount`, a counted line is shown. */
+    description?: ReactNode;
+    /** "card" renders at `sm` size with a 6rem floor so it fits inside a panel; "page" (default) owns the screen. */
+    scale?: "page" | "card";
+    /** Active filter count; drives the default description and the "Clear N filters" label. */
+    filterCount?: number;
+    /** Renders the outline Clear button; omit it and no Clear button appears. */
+    onClearFilters?: () => void;
+    /** Defaults to "Clear filters", or "Clear N filters" when `filterCount` is set. */
+    clearLabel?: string;
+    /** Renders the primary button that drops only the filter doing the narrowing. */
+    onRemoveLastFilter?: () => void;
+    /** Name that filter, e.g. `Remove "Status: Absent"`; defaults to "Remove last filter". */
+    removeLastFilterLabel?: string;
+    /** Overrides the height floor that `scale` sets. */
+    minH?: EmptyStateProps["minH"];
+}

package/dist/Components/EmptyState/FilteredEmptyState.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FilteredEmptyStateProps } from "./EmptyStateProps";
+/** Empty because filters excluded everything: announces itself (`role="status"`) and offers Clear / Remove-last. */
+declare const FilteredEmptyState: React.FC<FilteredEmptyStateProps>;
+export default FilteredEmptyState;

package/dist/Components/EmptyState/FilteredEmptyState.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const EmptyState_1 = __importDefault(require("./EmptyState"));
+const plural = (count, one, many) => (count === 1 ? one : many);
+/** Empty because filters excluded everything: announces itself (`role="status"`) and offers Clear / Remove-last. */
+const FilteredEmptyState = ({ title = "Nothing matched these filters", description, scale = "page", filterCount, onClearFilters, clearLabel, onRemoveLastFilter, removeLastFilterLabel = "Remove last filter", minH, }) => {
+    const hasCount = filterCount !== undefined && filterCount > 0;
+    const resolvedDescription = description !== null && description !== void 0 ? description : (hasCount
+        ? `${filterCount} ${plural(filterCount, "filter is", "filters are")} active. Remove or clear ${plural(filterCount, "it", "them")} to see more results.`
+        : undefined);
+    const resolvedClearLabel = clearLabel !== null && clearLabel !== void 0 ? clearLabel : (hasCount ? `Clear ${filterCount} ${plural(filterCount, "filter", "filters")}` : "Clear filters");
+    const buttonSize = scale === "card" ? "sm" : "md";
+    const actions = onRemoveLastFilter || onClearFilters ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onRemoveLastFilter && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: buttonSize, label: removeLastFilterLabel, onClick: onRemoveLastFilter })), onClearFilters && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: buttonSize, variant: "outline", colorScheme: "gray", label: resolvedClearLabel, onClick: onClearFilters }))] })) : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.SearchX, colorScheme: "gray", variant: "subtle", size: scale === "card" ? "sm" : "md", minH: minH !== null && minH !== void 0 ? minH : (scale === "card" ? "6rem" : undefined), title: title, description: resolvedDescription, action: actions }) }));
+};
+exports.default = FilteredEmptyState;

package/dist/Components/FieldSelectModal/FieldSelectModal.d.ts

@@ -5,6 +5,7 @@ export interface SelectableField {
     /** Human-readable label. */
     field_label: string;
 }
+/** Modal that lets the user pick which fields to include, confirmed via `onConfirm`. */
 export interface FieldSelectModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/Components/FilePreview/FilePreview.js

@@ -13,7 +13,11 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const color_1 = require("../../Theme/tokens/builders/color");
 const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BASE_TRANSFORM_TRANSITION = (0, motion_1.transitionFor)(["transform"], "base");
+const OPACITY_TRANSITION = (0, motion_1.transitionFor)(["opacity"]);
 const MotionContent = (0, framer_motion_1.motion)(react_2.ModalContent);
 const blackScrim = (black, opacity) => {
     const { r, g, b } = (0, color_1.hexToRgb)(black);
@@ -63,7 +67,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
     };
     const renderBody = () => {
         if (kind === "image") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: `scale(${zoom}) rotate(${rotation}deg)`, transition: "transform 0.2s ease", objectFit: "contain" }) }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: `scale(${zoom}) rotate(${rotation}deg)`, transition: BASE_TRANSFORM_TRANSITION, objectFit: "contain" }) }));
         }
         if (kind === "pdf") {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "embed", src: fileUrl, type: "application/pdf", width: "100%", height: "70vh", borderRadius: "lg" }));
@@ -73,7 +77,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
         }
         return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: downloadFill.fill, color: downloadFill.color, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { ...(0, overlay_styles_1.overlayScrimStyles)(theme.colors) }), (0, jsx_runtime_1.jsxs)(MotionContent, { bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.MotionConfig, { reducedMotion: "user", children: (0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { ...(0, overlay_styles_1.overlayScrimStyles)(theme.colors) }), (0, jsx_runtime_1.jsxs)(MotionContent, { bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }) }));
 };
 exports.FilePreview = FilePreview;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
@@ -81,7 +85,7 @@ const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px",
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const kind = fileType || inferKind(fileUrl, fileName);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })), (0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: blackScrim(theme.colors.black, 0.5), color: theme.colors.white, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-label": `Preview ${fileName || "file"}`, "data-group": true, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: onOpen, children: [kind === "image" ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", position: "absolute", inset: 0, align: "center", justify: "center", bg: blackScrim(theme.colors.black, 0.5), color: theme.colors.white, opacity: 0, transition: OPACITY_TRANSITION, _groupHover: { opacity: 1 }, _groupFocusVisible: { opacity: 1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
 };
 exports.FilePreviewTrigger = FilePreviewTrigger;
 exports.default = exports.FilePreview;

package/dist/Components/FilePreview/FilePreviewProps.d.ts

@@ -15,10 +15,11 @@ export interface FilePreviewProps {
     /** Modal size. */
     size?: "md" | "lg" | "xl" | "2xl" | "full";
 }
-/** Props for FilePreviewTrigger — a thumbnail that opens FilePreview in a modal on click. */
+/** Props for FilePreviewTrigger — a thumbnail button that opens FilePreview in a modal. */
 export interface FilePreviewTriggerProps {
     /** URL of the file. */
     fileUrl: string;
+    /** Names the button "Preview <fileName>" ("Preview file" when omitted) and drives kind detection. */
     fileName?: string;
     fileType?: FilePreviewKind;
     /** Thumbnail max width. */

package/dist/Components/FileUpload/FileUpload.js

@@ -52,6 +52,8 @@ const useFieldIds_1 = require("../Common/useFieldIds");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const activationKey_1 = require("../Common/activationKey");
+const DROP_PROMPT = "Drag and drop files here";
 const FileThumbnail = ({ file, radius, onPreview, }) => {
     const url = (0, useObjectUrl_1.useObjectUrl)(file);
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -61,12 +63,7 @@ const FileThumbnail = ({ file, radius, onPreview, }) => {
                 opacity: 1,
                 bg: "blackAlpha.500",
             },
-        }, onClick: preview, onKeyDown: (event) => {
-            if (event.key !== "Enter" && event.key !== " ")
-                return;
-            event.preventDefault();
-            preview();
-        }, children: [(0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name, style: {
+        }, onClick: preview, onKeyDown: (0, activationKey_1.onActivationKey)(() => preview()), children: [(0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name, style: {
                     width: "100%",
                     height: "100%",
                     objectFit: "cover",
@@ -83,6 +80,8 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
     const [previewTitle, setPreviewTitle] = react_1.default.useState(null);
     const [errors, setErrors] = react_1.default.useState([]);
     const border = error ? colors.semanticText.error : colors.boxborder[500];
+    const limitParts = [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""];
+    const limits = limitParts.join("").trim();
     const mappedAccept = acceptTypes.reduce((acc, ext) => {
         const mime = constants_1.mimeMap[ext];
         if (mime) {
@@ -124,10 +123,10 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired })), (0, jsx_runtime_1.jsx)(react_2.Box, { ...getRootProps({
                                     role: "button",
-                                    "aria-label": label !== null && label !== void 0 ? label : inputAriaLabel,
+                                    "aria-label": `${label !== null && label !== void 0 ? label : inputAriaLabel}, ${DROP_PROMPT} ${limits}`,
                                     "aria-describedby": ids.describedBy,
                                     "aria-disabled": isDisabled || undefined,
-                                }), border: "1px dashed", borderColor: border, borderRadius: fieldStyles_1.FIELD_RADIUS, p: compact ? 3 : 10, textAlign: "center", bg: isDisabled ? colors.background[100] : colors.background[50], color: isDisabled ? colors.textMuted : undefined, cursor: isDisabled ? "not-allowed" : "pointer", transition: fieldStyles_1.FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), position: "relative", children: (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: compact ? 4 : 6 }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 0, align: compact ? "start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 500, fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }) }), (0, jsx_runtime_1.jsx)("input", { ...getInputProps({
+                                }), border: "1px dashed", borderColor: border, borderRadius: fieldStyles_1.FIELD_RADIUS, p: compact ? 3 : 10, textAlign: "center", bg: isDisabled ? colors.background[100] : colors.background[50], color: isDisabled ? colors.textMuted : undefined, cursor: isDisabled ? "not-allowed" : "pointer", transition: fieldStyles_1.FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), position: "relative", children: (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: compact ? 4 : 6 }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 0, align: compact ? "start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 500, fontSize: compact ? "sm" : "md", color: colors.textMuted, children: DROP_PROMPT }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: limitParts })] })] }) }), (0, jsx_runtime_1.jsx)("input", { ...getInputProps({
                                     id: ids.inputId,
                                     disabled: isDisabled,
                                     "aria-label": label ? undefined : inputAriaLabel,
@@ -136,7 +135,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                                                                 setPreviewUrl(url);
                                                                 setPreviewTitle(file.name);
                                                                 onOpen();
-                                                            } })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
+                                                            } })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.Progress, { "aria-label": `Upload progress for ${file.name}`, value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);

package/dist/Components/FileUpload/FileUploadProps.d.ts

@@ -20,11 +20,11 @@ export type FileUploaderProps = {
     size?: 'sm' | 'md';
     /** Upload percent (0-100) keyed by `file.name`; a bar shows only for listed keys. */
     progress?: Record<string, number>;
-    /** Accessible name for the drop zone when there is no `label`. */
+    /** Names the drop zone when there is no `label`; its visible text is appended, so the name always holds it. */
     inputAriaLabel?: string;
     /** Id for the file input; auto-generated when omitted. */
     id?: string;
-    /** Visible label above the drop zone; also names it for screen readers. */
+    /** Visible label above the drop zone; also names it for screen readers, ahead of the zone's own text. */
     label?: string;
     /** Shows the required asterisk on `label`. */
     isRequired?: boolean;

package/dist/Components/FileUploader/FileUploader.js

@@ -10,6 +10,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const activationKey_1 = require("../Common/activationKey");
 const revokePreviews = (files) => files.forEach((f) => f.previewUrl && URL.revokeObjectURL(f.previewUrl));
 /** Self-contained widget; onFilesChange returns {id,name,size,previewUrl} metadata, never real File objects — cannot be used to upload bytes. */
 const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
@@ -19,6 +20,9 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     const [uploadedFiles, setUploadedFiles] = (0, react_1.useState)([]);
     const [isDragOver, setIsDragOver] = (0, react_1.useState)(false);
     const fileInputRef = (0, react_1.useRef)(null);
+    const filesRef = (0, react_1.useRef)(uploadedFiles);
+    filesRef.current = uploadedFiles;
+    (0, react_1.useEffect)(() => () => revokePreviews(filesRef.current), []);
     const totalSize = uploadedFiles.reduce((acc, f) => acc + f.size, 0);
     const maxTotalBytes = maxTotalSize * 1024 * 1024;
     const formatFileSize = (bytes) => {
@@ -81,11 +85,6 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "500px", mx: "auto", p: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: 500, color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: 500, children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "file-uploader-dropzone", border: "1px dashed", borderColor: isDragOver ? colors.primary[500] : colors.boxborder[500], bg: isDragOver ? colors.backgroundColor.muted : undefined, borderRadius: fieldStyles_1.FIELD_RADIUS, transition: (0, motion_1.transitionFor)(["border-color", "background-color"]), p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
                                 var _a;
                                 return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: colors.backgroundColor.muted, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: colors.textMuted, children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
-                            }) }) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "file-uploader-drop-target", p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", role: "button", tabIndex: 0, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: handleBrowseClick, onKeyDown: (e) => {
-                            if (e.key !== "Enter" && e.key !== " ")
-                                return;
-                            e.preventDefault();
-                            handleBrowseClick();
-                        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: 500, fontSize: "md", children: ["Drag and drop the files here, or", (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
+                            }) }) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "file-uploader-drop-target", p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", role: "button", tabIndex: 0, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: handleBrowseClick, onKeyDown: (0, activationKey_1.onActivationKey)(() => handleBrowseClick()), children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: 500, fontSize: "md", children: ["Drag and drop the files here, or", (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 exports.default = FileUploader;

package/dist/Components/FilterSidebar/FilterSidebar.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { FilterValues } from "../Table/filterTypes";
+import { type FilterRange } from "./RangeSection";
 export type FilterOption = {
     id: string;
     label: string;
@@ -10,34 +11,31 @@ export type FilterSection = {
     label: string;
     options?: FilterOption[];
     searchable?: boolean;
-    range?: {
-        min: number;
-        max: number;
-        step?: number;
-        values?: number[];
-        unit?: string;
-    };
+    range?: FilterRange;
     initiallyExpanded?: boolean;
     type?: "checkboxes" | "radio";
-    /** Dead — never read; radio mode is decided by `type === "radio"` or `radio` below, checkboxes is the unconditional default. */
+    /** @deprecated Dead — never read; radio mode comes from `type: "radio"` or `radio`, checkboxes is the default. */
     checkboxes?: boolean;
     radio?: boolean;
 };
 export type SelectedFilters = FilterValues;
+/** Sectioned filter list; live through `onChange`, controlled only when both `selected` and `onChange` are set. */
 export type FilterSidebarProps = {
     sidebarOptions: FilterSection[];
     /** Passing this alone (no onChange) makes every filter click silently inert — state is computed, then discarded. */
     selected?: SelectedFilters;
     onChange?: (selected: SelectedFilters) => void;
+    /** @deprecated Dead — never called; every change is already live through `onChange`. */
     onApply?: (selected: SelectedFilters) => void;
     maxVisible?: number;
     width?: string | number;
     variant?: "minimal" | "cards";
     containerHeight?: number | string;
     containerPadding?: number | string;
-    /** Dead — commented out of the destructure; has no effect (same for sliderMode below). */
+    /** @deprecated Dead — never read; has no effect. */
     headerPadding?: number;
     panelPadding?: number;
+    /** @deprecated Dead — never read; the range slider is always the native-input one. */
     sliderMode?: "chakra" | "native";
     clearAllButton?: boolean;
     onClearAllHandler?: () => void;