pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.45

package/dist/esm/Components/EmptyState/EmptyState.js

@@ -3,40 +3,49 @@ import { Box, Flex, Image, Text } from "@chakra-ui/react";
 import { Inbox } from "lucide-react";
 import { keyframes } from "@emotion/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 const float = keyframes `
   0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
+  50% { transform: translateY(-0.5rem); }
 `;
 const sizeMap = {
-    sm: { badge: "48px", icon: 20, title: "0.95rem", desc: "0.8rem", gap: 2, pad: 6 },
-    md: { badge: "72px", icon: 30, title: "1.1rem", desc: "0.9rem", gap: 3, pad: 10 },
-    lg: { badge: "96px", icon: 40, title: "1.35rem", desc: "1rem", gap: 4, pad: 14 },
+    sm: { badge: "3rem", icon: 20, title: "0.9375rem", desc: "0.8125rem", gap: 2, pad: 6 },
+    md: { badge: "4.5rem", icon: 30, title: "1.125rem", desc: "0.875rem", gap: 3, pad: 10 },
+    lg: { badge: "6rem", icon: 40, title: "1.375rem", desc: "1rem", gap: 4, pad: 14 },
 };
+const HALO_OPACITY = 0.33;
 const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
     ? colors[scheme]
     : scheme === "gray"
         ? colors.gray
         : colors.semantic[scheme];
 /** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
-const EmptyState = ({ title = "No data found", description, icon: IconComp = Inbox, image, size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "240px", sx, }) => {
+const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon: IconComp = Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, }) => {
     const theme = useCustomTheme();
     const s = sizeMap[size];
     const palette = scaleFor(theme.colors, colorScheme);
-    const accentSoft = palette[50];
-    const accent = accentTextOnCanvas(palette, accentSoft);
+    const tone = resolveSoftTone(theme.colors, palette, theme.colors.background[50]);
+    const accentSoft = tone.bg;
+    const accent = tone.fg;
     const containerStyles = variant === "subtle"
-        ? { bg: theme.colors.background[50], borderRadius: "2xl" }
+        ? { bg: theme.colors.background[50], borderRadius: "xl" }
         : variant === "dashed"
             ? {
-                border: "2px dashed",
-                borderColor: theme.colors.gray[200],
-                borderRadius: "2xl",
+                border: "0.125rem dashed",
+                borderColor: theme.colors.boxborder[200],
+                borderRadius: "xl",
                 bg: "transparent",
             }
             : {};
-    return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? (_jsx(Image, { src: image, alt: title, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: {
-                    boxShadow: `0 0 0 8px ${accentSoft}55`,
-                }, children: _jsx(IconComp, { size: s.icon, strokeWidth: 1.75 }) })), _jsxs(Box, { children: [_jsx(Text, { fontSize: s.title, fontWeight: 600, color: theme.colors.gray[800], mt: 1, children: title }), description && (_jsx(Text, { fontSize: s.desc, color: theme.colors.gray[500], mt: 1, maxW: "380px", children: description }))] }), action && (_jsx(Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+    return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? (_jsx(Image, { src: image, alt: imageAlt, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: reducedMotionSx() })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, position: "relative", isolation: "isolate", _before: {
+                    content: '""',
+                    position: "absolute",
+                    inset: "-0.5rem",
+                    borderRadius: "full",
+                    bg: accentSoft,
+                    opacity: HALO_OPACITY,
+                    zIndex: -1,
+                }, sx: reducedMotionSx(), children: _jsx(IconComp, { size: s.icon, strokeWidth: 1.75, "aria-hidden": true }) })), _jsxs(Box, { children: [_jsx(Text, { as: titleAs, fontSize: s.title, fontWeight: 600, color: theme.colors.header[900], mt: 1, children: title }), description && (_jsx(Text, { fontSize: s.desc, color: theme.colors.textMuted, mt: 1, maxW: "23.75rem", children: description }))] }), action && (_jsx(Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
 };
 export default EmptyState;

package/dist/esm/Components/FeedbackForm/FeedbackForm.js

@@ -1,13 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { Box, Button, FormControl, FormLabel, FormErrorMessage, Grid, Input, Radio, RadioGroup, Stack, Textarea, useToast, } from "@chakra-ui/react";
+import { Box, Grid } from "@chakra-ui/react";
+import TextInput from "../Input/TextInput.js";
+import InputTextArea from "../InputTextArea/InputTextArea.js";
+import { RadioButtonGroup } from "../RadioButton/RadioButton.js";
+import Button from "../Button/Button.js";
+import { useToaster } from "../Toaster/Toaster.js";
+const TYPE_OPTIONS = [
+    { label: "Comments", id: "comments" },
+    { label: "Suggestions", id: "suggestions" },
+    { label: "Questions", id: "questions" },
+];
 // eslint-disable-next-line no-control-regex, no-useless-escape
 const emailRegex = /^(?:[a-zA-Z0-9_'^&\/+{}=?`|~!-]+(?:\.[a-zA-Z0-9_'^&\/+{}=?`|~!-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z-]*[a-zA-Z]:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]+)\])$/;
-/** Renders its own success/error toast via Chakra's useToast, not this library's Toaster — that toast can be silently hidden inside a Modal. */
+/** Renders its own success/error toast via this library's Toaster — needs a mounted ToasterProvider. */
 export default function FeedbackForm(props) {
     var _a, _b, _c, _d, _e;
     const { onSubmit, submitUrl, isDisabled, defaultValues, submitText = "Submit", isSubmittingText = "Submitting..." } = props;
-    const toast = useToast();
+    const { showToast } = useToaster();
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [type, setType] = useState((_a = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.type) !== null && _a !== void 0 ? _a : "comments");
     const [message, setMessage] = useState((_b = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.message) !== null && _b !== void 0 ? _b : "");
@@ -26,7 +36,7 @@ export default function FeedbackForm(props) {
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (hasErrors) {
-            toast({ status: "error", title: "Please fix the errors in the form" });
+            showToast({ status: "error", title: "Please fix the errors in the form" });
             return;
         }
         const payload = { type, message: message.trim(), firstName: firstName.trim(), lastName: lastName.trim(), email: email.trim() };
@@ -44,7 +54,7 @@ export default function FeedbackForm(props) {
                 if (!res.ok)
                     throw new Error(`Request failed: ${res.status}`);
             }
-            toast({ status: "success", title: "Thank you for your feedback" });
+            showToast({ status: "success", title: "Thank you for your feedback" });
             setMessage("");
             setFirstName("");
             setLastName("");
@@ -52,7 +62,7 @@ export default function FeedbackForm(props) {
             setType("comments");
         }
         catch (err) {
-            toast({
+            showToast({
                 status: "error",
                 title: "Could not submit feedback",
                 description: err instanceof Error ? err.message : String(err),
@@ -62,5 +72,5 @@ export default function FeedbackForm(props) {
             setIsSubmitting(false);
         }
     };
-    return (_jsxs(Box, { as: "form", onSubmit: handleSubmit, width: "100%", children: [_jsxs(FormControl, { as: Box, mb: 6, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "Feedback Type" }), _jsx(RadioGroup, { value: type, onChange: (v) => setType(v), children: _jsxs(Stack, { direction: "row", spacing: 8, children: [_jsx(Radio, { value: "comments", children: "Comments" }), _jsx(Radio, { value: "suggestions", children: "Suggestions" }), _jsx(Radio, { value: "questions", children: "Questions" })] }) })] }), _jsxs(FormControl, { mb: 6, isInvalid: !!errors.message, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "Describe Your Feedback" }), _jsx(Textarea, { value: message, onChange: (e) => setMessage(e.target.value), rows: 6, placeholder: "Tell us more..." }), _jsx(FormErrorMessage, { children: errors.message })] }), _jsxs(Grid, { templateColumns: { base: "1fr", md: "1fr 1fr" }, gap: 4, mb: 6, children: [_jsxs(FormControl, { isInvalid: !!errors.firstName, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "First Name" }), _jsx(Input, { value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "First name" }), _jsx(FormErrorMessage, { children: errors.firstName })] }), _jsxs(FormControl, { isInvalid: !!errors.lastName, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "Last Name" }), _jsx(Input, { value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Last name" }), _jsx(FormErrorMessage, { children: errors.lastName })] })] }), _jsxs(FormControl, { mb: 6, isInvalid: !!errors.email, isRequired: true, isDisabled: isDisabled, children: [_jsx(FormLabel, { children: "E-mail" }), _jsx(Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "ex: myname@example.com" }), _jsx(FormErrorMessage, { children: errors.email })] }), _jsx(Button, { type: "submit", colorScheme: "primary", isLoading: isSubmitting, loadingText: isSubmittingText, isDisabled: isDisabled, children: submitText })] }));
+    return (_jsxs(Box, { as: "form", onSubmit: handleSubmit, width: "100%", children: [_jsx(Box, { mb: 6, children: _jsx(RadioButtonGroup, { label: "Feedback Type", options: TYPE_OPTIONS, value: type, onChange: (v) => setType(v), isDisabled: isDisabled }) }), _jsx(Box, { mb: 6, children: _jsx(InputTextArea, { label: "Describe Your Feedback", value: message, onChange: (e) => setMessage(e.target.value), rows: 6, placeholder: "Tell us more...", isRequired: true, isDisabled: isDisabled, error: !!errors.message, errorMessage: errors.message }) }), _jsxs(Grid, { templateColumns: { base: "1fr", md: "1fr 1fr" }, gap: 4, mb: 6, children: [_jsx(TextInput, { label: "First Name", value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "First name", isRequired: true, isDisabled: isDisabled, error: !!errors.firstName, errorMessage: errors.firstName }), _jsx(TextInput, { label: "Last Name", value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Last name", isRequired: true, isDisabled: isDisabled, error: !!errors.lastName, errorMessage: errors.lastName })] }), _jsx(Box, { mb: 6, children: _jsx(TextInput, { type: "email", label: "E-mail", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "ex: myname@example.com", isRequired: true, isDisabled: isDisabled, error: !!errors.email, errorMessage: errors.email }) }), _jsx(Button, { type: "submit", colorScheme: "primary", isLoading: isSubmitting, loadingText: isSubmittingText, isDisabled: isDisabled, children: submitText })] }));
 }

package/dist/esm/Components/FieldSelectModal/FieldSelectModal.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Button, Checkbox, Flex, Input, InputGroup, InputLeftElement, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, SimpleGrid, Text, } from "@chakra-ui/react";
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
 import { Search } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const MotionModalContent = motion(ModalContent);
 /** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
 const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select Fields", confirmText = "Apply", loadingText = "Applying...", isLoading = false, defaultSelected, columns = 2, searchable, }) => {
     const theme = useCustomTheme();
+    const prefersReducedMotion = useReducedMotion();
     const [selected, setSelected] = useState([]);
     const [query, setQuery] = useState("");
     useEffect(() => {
@@ -26,9 +27,6 @@ const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select
     const toggle = (name) => setSelected((prev) => prev.includes(name) ? prev.filter((f) => f !== name) : [...prev, name]);
     const isAllSelected = selected.length === fields.length && fields.length > 0;
     const isIndeterminate = selected.length > 0 && selected.length < fields.length;
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [_jsx(ModalOverlay, { bg: "blackAlpha.400", backdropFilter: "blur(4px)" }), _jsxs(MotionModalContent, { borderRadius: "2xl", overflow: "hidden", maxH: "85vh", 
-                // Chakra's default dialog bg (`colors.white`, or `gray.700` under `_dark`) resolves to a
-                // white/light-grey panel against our palettes, so the surface must be set explicitly.
-                bg: theme.colors.background[50], initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(ModalHeader, { pb: 2, children: [_jsx(Text, { fontSize: "lg", fontWeight: 600, children: title }), _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { overflowY: "auto", children: [_jsxs(Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && (_jsxs(InputGroup, { size: "sm", maxW: "220px", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => (_jsx(Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: _jsx(Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && (_jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), _jsxs(ModalFooter, { gap: 3, children: [_jsx(Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { overflow: "hidden", maxH: "85vh", initial: prefersReducedMotion ? false : { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(ModalHeader, { children: [_jsx(Text, { color: theme.colors.text[900], children: title }), _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { overflowY: "auto", children: [_jsxs(Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && (_jsxs(InputGroup, { size: "sm", maxW: "13.75rem", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => (_jsx(Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: _jsx(Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && (_jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
 };
 export default FieldSelectModal;

package/dist/esm/Components/FilePreview/FilePreview.js

@@ -5,8 +5,14 @@ import { motion } from "framer-motion";
 import { Download, Eye, FileQuestion, Minus, Plus, RotateCw, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
+import { overlayScrimStyles } from "../../Theme/chakra/overlay.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 const MotionContent = motion(ModalContent);
+const blackScrim = (black, opacity) => {
+    const { r, g, b } = hexToRgb(black);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
 const inferKind = (url, fileName) => {
     const src = (fileName || url).split("?")[0].toLowerCase();
     if (/\.(png|jpe?g|gif|webp|svg|bmp|avif)$/.test(src))
@@ -60,19 +66,13 @@ export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hide
         }
         return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [_jsx(FileQuestion, { size: 48, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && (_jsxs(Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [_jsx(Download, { size: 16 }), " Download file"] }))] }));
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [_jsx(ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }), _jsxs(MotionContent
-            // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
-            // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-            , { 
-                // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
-                // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(ModalBody, { p: 5, children: renderBody() })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [_jsx(ModalOverlay, { ...overlayScrimStyles(theme.colors) }), _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: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(ModalBody, { p: 5, children: renderBody() })] })] }));
 };
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 export const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {
     const theme = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
     const kind = fileType || inferKind(fileUrl, fileName);
-    return (_jsxs(_Fragment, { children: [_jsxs(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" ? (_jsx(Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: _jsx(Eye, { size: 18 }) })), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: "blackAlpha.500", color: "white", opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: _jsx(Eye, { size: 18 }) })] }), _jsx(FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(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" ? (_jsx(Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: _jsx(Eye, { size: 18 }) })), _jsx(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: _jsx(Eye, { size: 18 }) })] }), _jsx(FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
 };
 export default FilePreview;

package/dist/esm/Components/FileUpload/FileUpload.js

@@ -5,18 +5,23 @@ import { useDropzone } from "react-dropzone";
 import { Upload, FileText, Eye } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { mimeMap, toMB } from "./constants.js";
+import { DEFAULT_MAX_SIZE_KB, mimeMap, toMB } from "./constants.js";
 import Modal, { ModalBody, ModalHeader } from "../Modal/Modal.js";
-/** Controlled drop zone — you own the `uploadedFiles`/File[] state; default `maxSizeKB=5` is 5KB and rejects nearly every real file. */
-const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, size = "md", inputAriaLabel = "Upload files", }) => {
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { FIELD_RADIUS, FIELD_TRANSITION } from "../Common/fieldStyles.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+/** Controlled drop zone — you own the `uploadedFiles`/File[] state; `maxSizeKB` defaults to 5 MB. */
+const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = DEFAULT_MAX_SIZE_KB, maxFiles = undefined, progress = {}, size = "md", inputAriaLabel = "Upload files", id, label, isRequired = false, isDisabled = false, error = false, errorMessage, helperText, }) => {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
     const compact = size === "sm";
     const { colors, radii } = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
     const [previewUrl, setPreviewUrl] = React.useState(null);
     const [previewTitle, setPreviewTitle] = React.useState(null);
     const [errors, setErrors] = React.useState([]);
-    const bg = colors.background[50];
-    const border = colors.boxborder[500];
+    const border = error ? colors.semanticText.error : colors.boxborder[500];
     const mappedAccept = acceptTypes.reduce((acc, ext) => {
         const mime = mimeMap[ext];
         if (mime) {
@@ -40,6 +45,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
         accept: mappedAccept,
         maxSize: maxSizeKB * 1024,
         maxFiles,
+        disabled: isDisabled,
         onDropRejected: (rejectedFiles) => {
             const messages = rejectedFiles.flatMap((rejected) => rejected.errors.map((err) => {
                 if (err.code === "file-too-large") {
@@ -55,7 +61,17 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
             setErrors(messages);
         },
     });
-    return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: compact ? 3 : 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.background[100] }, position: "relative", children: [_jsx("input", { ...getInputProps({ "aria-label": inputAriaLabel }) }), _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), _jsxs(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+    return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired })), _jsx(Box, { ...getRootProps({
+                                    role: "button",
+                                    "aria-label": label !== null && label !== void 0 ? label : inputAriaLabel,
+                                    "aria-describedby": ids.describedBy,
+                                    "aria-disabled": isDisabled || undefined,
+                                }), border: "1px dashed", borderColor: border, borderRadius: 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: FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: focusVisibleStyles(colors), position: "relative", children: _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), _jsxs(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }) }), _jsx("input", { ...getInputProps({
+                                    id: ids.inputId,
+                                    disabled: isDisabled,
+                                    "aria-label": label ? undefined : inputAriaLabel,
+                                    "aria-describedby": ids.describedBy,
+                                }) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(ListItem, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
                                                                 ".hover-icon": {
                                                                     opacity: 1,
                                                                     bg: "blackAlpha.500",

package/dist/esm/Components/FileUpload/constants.js

@@ -22,4 +22,5 @@ export const mimeMap = {
     '.rar': 'application/vnd.rar',
     '.7z': 'application/x-7z-compressed',
 };
+export const DEFAULT_MAX_SIZE_KB = 5 * 1024;
 export const toMB = (size) => `${(size / 1024).toFixed(2)} MB`;

package/dist/esm/Components/FileUploader/FileUploader.js

@@ -5,14 +5,15 @@ import { X } from "lucide-react";
 import { useToaster } from "../Toaster/Toaster.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { FIELD_RADIUS } from "../Common/fieldStyles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 /** 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"], }) => {
     const { showToast } = useToaster();
     const { colors } = useCustomTheme();
     const accentColor = accentTextOnCanvas(colors.blue, colors.backgroundColor.main);
     const [uploadedFiles, setUploadedFiles] = useState([]);
-    const [, setIsDragOver] = useState(false);
-    // const [error, setError] = useState<string | null>(null);
+    const [isDragOver, setIsDragOver] = useState(false);
     const fileInputRef = useRef(null);
     const totalSize = uploadedFiles.reduce((acc, f) => acc + f.size, 0);
     const maxTotalBytes = maxTotalSize * 1024 * 1024;
@@ -70,9 +71,9 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     const handleBrowseClick = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
     // ✅ Convert ["png","pdf","zip"] → ".png,.pdf,.zip" for input accept
     const acceptString = acceptTypes.map((ext) => `.${ext}`).join(",");
-    return (_jsxs(Box, { maxW: "500px", mx: "auto", p: 6, children: [_jsxs(Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), _jsxs(Box, { border: "1px dashed", borderColor: colors.boxborder[500], borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && (_jsx(Box, { children: _jsx(Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
+    return (_jsxs(Box, { maxW: "500px", mx: "auto", p: 6, children: [_jsxs(Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), _jsxs(Box, { "data-testid": "file-uploader-dropzone", border: "1px dashed", borderColor: isDragOver ? colors.primary[500] : colors.boxborder[500], bg: isDragOver ? colors.backgroundColor.muted : undefined, borderRadius: FIELD_RADIUS, transition: transitionFor(["border-color", "background-color"]), p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && (_jsx(Box, { children: _jsx(Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
                                 var _a;
-                                return (_jsxs(Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [_jsxs(HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? (_jsx(Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : (_jsx(Box, { boxSize: "28px", borderRadius: "sm", bg: colors.gray[200], 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() })), _jsxs(Box, { minW: "0", children: [_jsx(Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), _jsx(HStack, { spacing: 1, children: _jsx(Tooltip, { label: "Remove", children: _jsx(IconButton, { "aria-label": "Remove", icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
-                            }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), _jsxs(Box, { p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, transition: "all 0.2s", onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", onClick: handleBrowseClick, children: [_jsx(Box, { children: _jsxs(Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", _jsx(Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
+                                return (_jsxs(Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [_jsxs(HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? (_jsx(Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : (_jsx(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() })), _jsxs(Box, { minW: "0", children: [_jsx(Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), _jsx(HStack, { spacing: 1, children: _jsx(Tooltip, { label: "Remove", children: _jsx(IconButton, { "aria-label": "Remove", icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
+                            }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), _jsxs(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", onClick: handleBrowseClick, children: [_jsx(Box, { children: _jsxs(Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", _jsx(Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 export default FileUploader;

package/dist/esm/Components/FilterBar/FilterBar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import Tag from "../Tag/Tag.js";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Toolbar row: search + filter controls left, summary + actions right, active filters as chips below. */
+const FilterBar = ({ search, searchLabel = "Search", children, actions, summary, activeFilters = [], onRemoveFilter, onClearAll, }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { direction: "column", gap: 2, w: "100%", children: [_jsxs(Flex, { gap: 3, wrap: "wrap", align: "center", children: [search && (_jsx(Flex, { role: "search", "aria-label": searchLabel, children: search })), children, _jsxs(Flex, { gap: 2, align: "center", wrap: "wrap", ml: { base: 0, md: "auto" }, children: [summary && (_jsx(Text, { fontSize: "xs", color: colors.textMuted, whiteSpace: "nowrap", children: summary })), actions] })] }), activeFilters.length > 0 && (_jsxs(Flex, { gap: 1.5, wrap: "wrap", align: "center", children: [activeFilters.map((filter) => (_jsx(Tag, { label: filter.label, colorScheme: "gray", icon: onRemoveFilter ? X : undefined, onIconClick: onRemoveFilter ? () => onRemoveFilter(filter.id) : undefined }, filter.id))), onClearAll && _jsx(Button, { variant: "ghost", colorScheme: "gray", label: "Clear all", onClick: onClearAll })] }))] }));
+};
+export default FilterBar;

package/dist/esm/Components/FilterBar/FilterBarProps.js

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

package/dist/esm/Components/FilterSidebar/FilterSidebar.js

@@ -6,18 +6,16 @@ import Accordion from "../Accordion/Accordion.js";
 import CheckBox from "../Checkbox/Checkbox.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { getFilterHoverBg } from "./filterHoverStyle.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
 const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight, 
 // headerPadding = 2,
 panelPadding = 3, clearAllButton = true, onClearAllHandler,
 // sliderMode = "native",
  }) => {
     const theme = useCustomTheme();
-    // `gray[50]` (this file's hover fill throughout) is a pale light-mode tint that collapses to
-    // ~1.08:1 against the dark-mode canvas — see `filterHoverStyle.ts` for the fix + numbers.
-    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
-    const hoverBg = useMemo(() => getFilterHoverBg(theme.colors, isDark), [theme.colors, isDark]);
+    const hoverBg = useMemo(() => getFilterHoverBg(theme.colors), [theme.colors]);
     const [openPrice, setOpenPrice] = useState({});
     // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
     const isControlled = selected !== undefined;
@@ -99,8 +97,8 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 // Calculate percentages
                 const minPercent = ((currentMin - range.min) / (range.max - range.min)) * 100;
                 const maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
-                const primaryColor = theme.colors.red[300];
-                const secondaryColor = theme.colors.red[600];
+                const primaryColor = theme.colors.primary[300];
+                const secondaryColor = theme.colors.primary[600];
                 const primaryGlowColor = theme.colors.primary.opacity[32];
                 const thumbShadow = theme.shadows.md;
                 return (_jsxs(Box, { w: "full", px: 3, children: [_jsx("style", { children: `
@@ -118,7 +116,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                         border: none;
                         cursor: pointer;
                       }
-                    ` }), _jsxs(Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [_jsx(Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.gray[200], borderRadius: "full" }), _jsx(Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), _jsx(Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsx(Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsxs(Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "md", fontSize: "10px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), _jsxs(Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "md", fontSize: "10px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => (_jsx(Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), _jsx("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
+                    ` }), _jsxs(Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [_jsx(Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.boxborder[200], borderRadius: "full" }), _jsx(Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), _jsx(Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsx(Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), _jsxs(Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: "lg", fontSize: "11px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), _jsxs(Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: "lg", fontSize: "11px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => (_jsx(Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.boxborder[500] }, `tick-${p}`))), _jsx("input", { type: "range", "aria-label": `${section.label}: minimum`, min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
                                         const min = Math.min(Number(e.target.value), currentMax - (step || 1));
                                         const nextVal = [min, currentMax];
                                         setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
@@ -131,7 +129,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                         pointerEvents: 'none', // Allow clicks to pass through track
                                         zIndex: 3,
                                         margin: 0,
-                                    } }), _jsx("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: (e) => {
+                                    } }), _jsx("input", { type: "range", "aria-label": `${section.label}: maximum`, min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: (e) => {
                                         const max = Math.max(Number(e.target.value), currentMin + (step || 1));
                                         const nextVal = [currentMin, max];
                                         setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
@@ -144,20 +142,20 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                         pointerEvents: 'none', // Allow clicks to pass through track
                                         zIndex: 3,
                                         margin: 0,
-                                    } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
+                                    } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-min-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-min-${section.id}-${v}`, onClick: () => {
                                                                 const min = v;
                                                                 const max = currentMax;
                                                                 const nextVal = [Math.min(min, max), Math.max(min, max)];
                                                                 setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
                                                                 setOpenPrice({});
-                                                            }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
+                                                            }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-max-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-max-${section.id}-${v}`, onClick: () => {
                                                             const max = v;
                                                             const min = currentMin;
                                                             const nextVal = [Math.min(min, max), Math.max(min, max)];
                                                             setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
                                                             setOpenPrice({});
-                                                        }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? (_jsx(Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
-            })()) : (_jsxs(_Fragment, { children: [section.id === "rating" ? (_jsx(VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => (_jsx(Flex, { align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? theme.colors.red[50] : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? `1px solid ${theme.colors.red[200]}` : "none", _hover: { bg: hoverBg }, onClick: () => {
+                                                        }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
+            })()) : (_jsxs(_Fragment, { children: [section.id === "rating" ? (_jsx(VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => (_jsx(Flex, { align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? theme.colors.primary[50] : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? `1px solid ${theme.colors.primary[200]}` : "none", _hover: { bg: hoverBg }, onClick: () => {
                                 setInternalSelected((prev) => {
                                     const next = { ...prev, [section.id]: String(r) };
                                     onChange === null || onChange === void 0 ? void 0 : onChange(next);
@@ -167,13 +165,11 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             // orange[500] on background[50] ~2.2:1, fails the 3:1 icon bar — walk the scale like
                                             // Notification's clock icon. Canvas mirrors this row's own bg ternary (red[50] when selected).
                                             const isRowSelected = String(internalSelected[section.id] || "") === String(r);
-                                            const starColor = accentTextOnCanvas(theme.colors.orange, isRowSelected ? theme.colors.red[50] : theme.colors.background[50]);
+                                            const starColor = accentTextOnCanvas(theme.colors.orange, isRowSelected ? theme.colors.primary[50] : theme.colors.background[50]);
                                             return Array.from({ length: 5 }, (_, i) => (_jsx(Box, { children: _jsx(Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
-                                        })() }), _jsx(Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && (_jsx(Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid", 
-                        // boxborder[500], not raw gray[200]: WCAG 1.4.11 needs >=3.0 for a control
-                        // boundary against any named surface up to `muted` (lightest); gray[200] fails
-                        // there in dark mode.
-                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: (e) => {
+                                        })() }), _jsx(Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && (_jsx(Input, { size: "xs", h: "26px", fontSize: "xs", "aria-label": `Search ${section.label}`, placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid", 
+                        // NOTE: boxborder[500] not gray[200] — WCAG 1.4.11 needs >=3:1 for a control boundary; gray[200] fails in dark.
+                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) }, value: searchTerms[section.id] || "", onChange: (e) => {
                             const v = e.target.value;
                             setSearchTerms((prev) => ({ ...prev, [section.id]: v }));
                             if (v)
@@ -182,7 +178,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                         const filteredOptions = (expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
                             .filter((opt) => !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()));
                         if (filteredOptions.length === 0 && searchTerms[section.id]) {
-                            return (_jsx(Box, { p: 2, w: "full", textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: theme.colors.gray[500], children: "No Data Found" }) }));
+                            return (_jsx(Box, { p: 2, w: "full", textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No Data Found" }) }));
                         }
                         return ((section.type === "radio") || section.radio) ? (_jsx(RadioGroup, { w: "full", value: internalSelected[section.id] || "", onChange: (val) => {
                                 setInternalSelected((prev) => {
@@ -190,28 +186,27 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                     onChange === null || onChange === void 0 ? void 0 : onChange(next);
                                     return next;
                                 });
-                            }, children: _jsx(VStack, { align: "start", spacing: 1, w: "full", children: filteredOptions.map((opt) => (_jsx(Radio, { value: opt.id, size: "sm", colorScheme: "red", children: _jsx(Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) })) : (filteredOptions.map((opt) => {
+                            }, children: _jsx(VStack, { align: "start", spacing: 1, w: "full", children: filteredOptions.map((opt) => (_jsx(Radio, { value: opt.id, size: "sm", children: _jsx(Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) })) : (filteredOptions.map((opt) => {
                             const selectedForSection = internalSelected[section.id];
                             const selectedIds = Array.isArray(selectedForSection)
                                 ? selectedForSection
                                 : [];
-                            return (_jsxs(Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [_jsxs(Flex, { align: "center", gap: 1, children: [_jsx(CheckBox, { isChecked: selectedIds.includes(opt.id), onChange: (e) => {
+                            return (_jsxs(Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [_jsxs(Flex, { align: "center", gap: 1, children: [_jsx(CheckBox, { "aria-label": `${section.label}: ${opt.label}`, isChecked: selectedIds.includes(opt.id), onChange: (e) => {
                                                     toggleOption(section.id, opt.id, e.target.checked);
-                                                }, size: "sm", iconSize: "0.5rem", sx: {
-                                                    '.chakra-checkbox__control': {
-                                                        width: '12px',
-                                                        height: '12px',
-                                                    },
-                                                    marginLeft: "2px",
-                                                }, color: "red" }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[500], cursor: "pointer", onClick: () => {
+                                                }, size: "sm" }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[500], cursor: "pointer", onClick: () => {
                                                     const isChecked = selectedIds.includes(opt.id);
                                                     toggleOption(section.id, opt.id, !isChecked);
                                                 }, children: opt.label })] }), typeof opt.count === "number" && (_jsx(Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id));
                         }));
-                    })(), (section.options && section.options.length > maxVisible) && (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: theme.colors.blue[600], cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] })), children: expanded[section.id] ? "Show less" : `+ ${(section.options.length - maxVisible)} more` }))] })) })),
+                    })(), (section.options && section.options.length > maxVisible) && (_jsx(Text, { as: "span", role: "button", tabIndex: 0, fontSize: "sm", fontWeight: "medium", color: theme.colors.accentText, cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] })), onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] }));
+                            }
+                        }, children: expanded[section.id] ? "Show less" : `+ ${(section.options.length - maxVisible)} more` }))] })) })),
         itemProps: {
             borderTop: "none",
-            borderBottom: `1px solid ${theme.colors.gray[100]}`,
+            borderBottom: `1px solid ${theme.colors.boxborder[200]}`,
             _last: { borderBottom: "none" }
         },
         buttonProps: {
@@ -230,7 +225,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                     padding: 0,
                     background: theme.colors.background[50],
                     borderRadius: theme.radii.lg,
-                    border: `1px solid ${theme.colors.gray[200]}`,
+                    border: `1px solid ${theme.colors.boxborder[200]}`,
                     marginBottom: 6,
                 },
             // Reasserts the same hover fill via the `sx` path (belt-and-suspenders alongside
@@ -249,6 +244,6 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 },
         },
     }));
-    return (_jsxs(Box, { w: width, bg: theme.colors.background[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.gray[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [_jsxs(Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), _jsx(Accordion, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
+    return (_jsxs(Box, { w: width, bg: theme.colors.background[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.boxborder[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [_jsxs(Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), _jsx(Accordion, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
 };
 export default FilterSidebar;

package/dist/esm/Components/FilterSidebar/filterHoverStyle.js

@@ -1,3 +1,3 @@
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 /** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
-export const getFilterHoverBg = (colors, _isDark) => listRowBackgrounds(colors).active;
+export const getFilterHoverBg = (colors) => listRowBackgrounds(colors).active;

package/dist/esm/Components/Form/FormWrapper.js

@@ -4,6 +4,6 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 /** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. */
 const FormWrapper = ({ icon, text, children, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && _jsx(Icon, { as: icon, boxSize: "1rem", color: colors.header[500] }), text && (_jsx(Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: colors.header[500], children: text }))] }), _jsx(Box, { borderRadius: "base", bg: colors.background[50], border: `0.075rem solid ${colors.boxborder[200]}`, boxShadow: `0 0.063rem 0.125rem 0 ${colors.boxShadow.primary}`, p: "1.5rem", children: children })] }));
+    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && _jsx(Icon, { as: icon, boxSize: "1rem", color: colors.header[500] }), text && (_jsx(Box, { fontWeight: 600, fontSize: "0.75rem", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), _jsx(Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
 };
 export default FormWrapper;