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

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

@@ -21,7 +21,7 @@ const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "seconda
         ? 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", titleAs = "h3", description, icon: IconComp = Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", 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, ...rest }) => {
     const theme = useCustomTheme();
     const s = sizeMap[size];
     const hasDescription = description !== undefined && description !== null && description !== false && description !== "";
@@ -39,7 +39,7 @@ const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon
                 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: 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: {
+    return (_jsxs(Flex, { ...rest, 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",

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

@@ -6,12 +6,35 @@ import { Upload, FileText, Eye } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { DEFAULT_MAX_SIZE_KB, mimeMap, toMB } from "./constants.js";
+import { useObjectUrl } from "./useObjectUrl.js";
 import Modal, { ModalBody, ModalHeader } from "../Modal/Modal.js";
 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";
+import { focusVisibleRing, focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+const FileThumbnail = ({ file, radius, onPreview, }) => {
+    const url = useObjectUrl(file);
+    const { colors } = useCustomTheme();
+    const preview = () => url && onPreview(url);
+    return (_jsxs(Box, { role: "button", tabIndex: 0, "aria-label": `Preview ${file.name}`, boxSize: "2.5rem", cursor: "pointer", position: "relative", _focusVisible: focusVisibleRing(colors), _hover: {
+            ".hover-icon": {
+                opacity: 1,
+                bg: "blackAlpha.500",
+            },
+        }, onClick: preview, onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            preview();
+        }, children: [_jsx("img", { src: url, alt: file.name, style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    borderRadius: radius,
+                } }), _jsx(Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: _jsx(Eye, { color: "white" }) })] }));
+};
 /** 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 });
@@ -66,29 +89,19 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                                     "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({
+                                }), 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: 500, 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",
-                                                                },
-                                                            }, onClick: () => {
-                                                                setPreviewUrl(URL.createObjectURL(file));
+                                }) }), _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: "sm", lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(ListItem, { borderWidth: BORDER_WIDTHS.hairline, 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/") ? (_jsx(FileThumbnail, { file: file, radius: radii.base, onPreview: (url) => {
+                                                                setPreviewUrl(url);
                                                                 setPreviewTitle(file.name);
                                                                 onOpen();
-                                                            }, children: [_jsx("img", { src: URL.createObjectURL(file), alt: file.name, style: {
-                                                                        width: "100%",
-                                                                        height: "100%",
-                                                                        objectFit: "cover",
-                                                                        borderRadius: radii.base,
-                                                                    } }), _jsx(Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: _jsx(Eye, { color: "white" }) })] })) : (_jsx(ListIcon, { as: FileText, color: accentTextOnCanvas(colors.blue, colors.background[50]), boxSize: 8 })), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontSize: "sm", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: [toMB(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && (_jsx(CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (_jsx(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))) })] }))] }), _jsxs(Modal, { isOpen: isOpen, onClose: () => {
+                                                            } })) : (_jsx(ListIcon, { as: FileText, color: accentTextOnCanvas(colors.blue, colors.background[50]), boxSize: 8 })), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontSize: "sm", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: [toMB(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && (_jsx(CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (_jsx(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))) })] }))] }), _jsxs(Modal, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);
-                }, size: "xl", isCentered: true, children: [_jsx(ModalHeader, { children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 16, textTransform: "uppercase", children: previewTitle }) }), _jsx(ModalBody, { children: previewUrl && (_jsx(Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" })) })] })] }));
+                }, size: "xl", isCentered: true, children: [_jsx(ModalHeader, { children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "md", textTransform: "uppercase", children: previewTitle }) }), _jsx(ModalBody, { children: previewUrl && (_jsx(Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" })) })] })] }));
 };
 export default FileUpload;

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

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+export const useObjectUrl = (file) => {
+    const [url, setUrl] = useState();
+    useEffect(() => {
+        const created = URL.createObjectURL(file);
+        setUrl(created);
+        return () => URL.revokeObjectURL(created);
+    }, [file]);
+    return url;
+};

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

@@ -7,6 +7,7 @@ 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";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.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();
@@ -71,9 +72,14 @@ 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, { "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) => {
+    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: 500, color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", _jsxs(Text, { as: "span", fontWeight: 500, 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.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(", "), "."] })] })] })] }));
+                                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: 500, 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", role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: handleBrowseClick, onKeyDown: (e) => {
+                            if (e.key !== "Enter" && e.key !== " ")
+                                return;
+                            e.preventDefault();
+                            handleBrowseClick();
+                        }, children: [_jsx(Box, { children: _jsxs(Text, { fontWeight: 500, 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

@@ -5,8 +5,8 @@ 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 FilterBar = ({ search, searchLabel = "Search", children, actions, summary, activeFilters = [], onRemoveFilter, onClearAll, ...rest }) => {
     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 })] }))] }));
+    return (_jsxs(Flex, { ...rest, 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/FilterSidebar/FilterSidebar.js

@@ -7,6 +7,7 @@ import CheckBox from "../Checkbox/Checkbox.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.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, 
@@ -16,6 +17,8 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
  }) => {
     const theme = useCustomTheme();
     const hoverBg = useMemo(() => getFilterHoverBg(theme.colors), [theme.colors]);
+    const rangePick = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.surfaceRaised), [theme.colors]);
+    const ratingPick = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.background[50]), [theme.colors]);
     const [openPrice, setOpenPrice] = useState({});
     // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
     const isControlled = selected !== undefined;
@@ -77,7 +80,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
         });
     };
     const items = sidebarOptions.map((section) => ({
-        header: (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [_jsx(ToolTip, { label: section.label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.text[500], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: section.label }) }), (() => {
+        header: (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [_jsx(ToolTip, { label: section.label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Text, { fontWeight: 700, fontSize: "md", color: theme.colors.text[500], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: section.label }) }), (() => {
                     const sel = internalSelected[section.id];
                     const hasValue = Array.isArray(sel) ? sel.length > 0 : !!sel;
                     return hasValue;
@@ -116,7 +119,11 @@ 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.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) => {
+                    ` }), _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", height: "6px", style: {
+                                        left: `${minPercent}%`,
+                                        width: `${maxPercent - minPercent}%`,
+                                        background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`,
+                                    }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), _jsx(Box, { position: "absolute", style: { 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", style: { 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", style: { 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: "xs-minus", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), _jsxs(Box, { position: "absolute", style: { 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: "xs-minus", 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; });
@@ -142,20 +149,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", "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: () => {
+                                    } })] }), _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: "xs", 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 ? rangePick : 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.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: () => {
+                                                            }, 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: "xs", 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 ? rangePick : 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.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: () => {
+            })()) : (_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) ? ratingPick : "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);
@@ -165,7 +172,7 @@ 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.primary[50] : theme.colors.background[50]);
+                                            const starColor = accentTextOnCanvas(theme.colors.orange, isRowSelected ? ratingPick : 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", "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.
@@ -198,7 +205,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                                     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, { 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) => {
+                    })(), (section.options && section.options.length > maxVisible) && (_jsx(Text, { as: "span", role: "button", tabIndex: 0, fontSize: "sm", fontWeight: 500, 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] }));
@@ -244,6 +251,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.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 })] }));
+    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: 700, 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/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, { 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 })] }));
+    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: "xs", 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;

package/dist/esm/Components/FormField/FormField.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, cloneElement, forwardRef, isValidElement } from "react";
+import { Box, FormControl } from "@chakra-ui/react";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import { fieldLabelStyles } from "../Common/FormLabel.js";
+import { fieldMessageStyles, fieldMessageVisibility } from "../Common/fieldMessageStyles.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const joinIds = (...ids) => [...new Set(ids.flatMap((value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.split(/\s+/)) !== null && _a !== void 0 ? _a : []; }).filter(Boolean))].join(" ") || undefined;
+const asWirableElement = (children) => typeof children !== "function" && isValidElement(children) && children.type !== Fragment
+    ? children
+    : undefined;
+const FormField = forwardRef(function FormField({ label, id, isRequired = false, error = false, errorMessage, helperText, layout = "vertical", labelWidth = "12rem", children, ...rest }, ref) {
+    var _a;
+    const { colors } = useCustomTheme();
+    const element = asWirableElement(children);
+    const own = (_a = element === null || element === void 0 ? void 0 : element.props) !== null && _a !== void 0 ? _a : {};
+    const ids = useFieldIds(id !== null && id !== void 0 ? id : own.id, { error, errorMessage, helperText });
+    const { showError, showHelper } = fieldMessageVisibility({ error, errorMessage, helperText });
+    const describedBy = joinIds(own["aria-describedby"], ids.describedBy);
+    const control = {
+        id: ids.inputId,
+        "aria-labelledby": ids.labelId,
+        "aria-describedby": describedBy,
+        "aria-invalid": ids.controlProps["aria-invalid"],
+        "aria-required": isRequired || undefined,
+    };
+    const isSelfNamed = Boolean(own["aria-label"] || own["aria-labelledby"]);
+    const wired = element
+        ? cloneElement(element, {
+            id: control.id,
+            ...(isSelfNamed ? {} : { "aria-labelledby": control["aria-labelledby"] }),
+            ...(describedBy ? { "aria-describedby": describedBy } : {}),
+            ...(error ? { "aria-invalid": true } : {}),
+            ...(isRequired ? { "aria-required": true } : {}),
+        })
+        : typeof children === "function"
+            ? children(control)
+            : children;
+    const message = showError && errorMessage ? (_jsx(ErrorMessage, { id: ids.errorId, errorMessage: errorMessage })) : showHelper ? (_jsx(Box, { id: ids.helperId, ...fieldMessageStyles(colors), children: helperText })) : null;
+    const isHorizontal = layout === "horizontal";
+    const labelStyles = fieldLabelStyles(colors);
+    return (_jsxs(FormControl, { ...rest, ref: ref, id: ids.inputId, isRequired: isRequired, isInvalid: error, ...(isHorizontal
+            ? {
+                display: "grid",
+                gridTemplateColumns: { base: "minmax(0, 1fr)", md: `${labelWidth} minmax(0, 1fr)` },
+                columnGap: 4,
+                alignItems: "start",
+            }
+            : {}), children: [_jsx(Box, { as: "label", id: ids.labelId, htmlFor: ids.inputId, ...labelStyles, display: "block", ...(isHorizontal ? { alignSelf: { md: "center" }, mb: { base: labelStyles.mb, md: 0 } } : {}), children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [_jsx(Box, { as: "span", children: label }), isRequired && (_jsx(Box, { as: "span", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }) }), isHorizontal ? (_jsxs(_Fragment, { children: [_jsx(Box, { minW: 0, children: wired }), message && _jsx(Box, { gridColumn: { md: 2 }, children: message })] })) : (_jsxs(_Fragment, { children: [wired, message] }))] }));
+});
+export default FormField;

package/dist/esm/Components/FormField/FormFieldProps.js

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

package/dist/esm/Components/Header/HeaderActions.js

@@ -18,10 +18,10 @@ const HeaderActions = ({ select, edit, create, surface, }) => {
         elements.push(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": select.ariaLabel || select.selectPlaceholderText || "Select", native: (_c = select.native) !== null && _c !== void 0 ? _c : false, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
-        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return (_jsx(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(VeritcalDivider, {}), el] }, i))) }));
 };

package/dist/esm/Components/Header/components/mobileMenu.js

@@ -20,7 +20,7 @@ const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, sur
                                     ? onFilled(activeBg, colors.white, colors.black)
                                     : color, bg: item.children.some((subItem) => isActive(subItem.href))
                                     ? activeBg
-                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (_jsx(ChevronDown, { size: 16 })) : (_jsx(ChevronRight, { size: 16 })), px: 2, children: _jsx(HStack, { w: "full", justify: "space-between", align: "center", children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), _jsx(Text, { fontWeight: "bold", children: item.label })] }) }) }), _jsx(Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: _jsx(Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (_jsx(ChevronDown, { size: 16 })) : (_jsx(ChevronRight, { size: 16 })), px: 2, children: _jsx(HStack, { w: "full", justify: "space-between", align: "center", children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), _jsx(Text, { fontWeight: 700, children: item.label })] }) }) }), _jsx(Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: _jsx(Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
                                         var _a;
                                         return (_jsx(Button, { onClick: () => {
                                                 var _a;

package/dist/esm/Components/IconButton/IconButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useRef } from "react";
+import { IconButton as ChakraIconButton, } from "@chakra-ui/react";
+// NOTE: Chakra omits a missing aria-label at runtime; only its type insists on one.
+const UnlabelledChakraIconButton = ChakraIconButton;
+export const UNNAMED_ICON_BUTTON_WARNING = "[pixelize-design-library] IconButton: no aria-label or aria-labelledby, so screen readers announce it as an unnamed button.";
+const useUnnamedWarning = (isUnnamed) => {
+    const warned = useRef(false);
+    useEffect(() => {
+        if (process.env.NODE_ENV === "production" || !isUnnamed || warned.current)
+            return;
+        warned.current = true;
+        console.warn(UNNAMED_ICON_BUTTON_WARNING);
+    }, [isUnnamed]);
+};
+const IconButton = forwardRef(function IconButton(props, ref) {
+    var _a, _b;
+    useUnnamedWarning(!((_a = props["aria-label"]) === null || _a === void 0 ? void 0 : _a.trim()) && !((_b = props["aria-labelledby"]) === null || _b === void 0 ? void 0 : _b.trim()));
+    return _jsx(UnlabelledChakraIconButton, { ref: ref, ...props });
+});
+export default memo(IconButton);

package/dist/esm/Components/IconButton/IconButtonProps.js

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

package/dist/esm/Components/Input/PhoneNumberInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, forwardRef } from "react";
+import { useState, useEffect, useCallback, forwardRef, useRef } from "react";
 import { Box, Flex, Icon, Input, Select, InputGroup, InputLeftElement, FormControl, } from "@chakra-ui/react";
 import ErrorMessage from "../Common/ErrorMessage.js";
 import HelperText from "../Common/HelperText.js";
@@ -28,6 +28,20 @@ const PhoneNumberInput = forwardRef(function PhoneNumberInput({ size = "sm", val
     const [number, setNumber] = useState(value);
     const [selectedCountry, setSelectedCountry] = useState(country);
     const [countryCode, setCountryCode] = useState(country);
+    const countryCodeRef = useRef(countryCode);
+    countryCodeRef.current = countryCode;
+    const firstValue = useRef(true);
+    useEffect(() => {
+        if (firstValue.current) {
+            firstValue.current = false;
+            return;
+        }
+        if (value === undefined)
+            return;
+        const dial = countryCodeRef.current;
+        const digits = dial && value.startsWith(`${dial} `) ? value.slice(dial.length + 1) : value;
+        setNumber(digits);
+    }, [value]);
     useEffect(() => {
         if (country) {
             const code = getCountryTelCode(country);

package/dist/esm/Components/KanbanBoard/AccountCard.js

@@ -4,8 +4,10 @@ import { Box, Flex, Text, Tooltip, HStack, VStack, Collapse, Spacer, } from "@ch
 import { ChevronDown, ChevronUp, ExternalLink, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import AccountRow from "./AccountRow.js";
@@ -15,18 +17,19 @@ const ACTION_TRANSITION = transitionFor(["background-color", "color"]);
 const AccountCard = React.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
     const { colors } = useCustomTheme();
     const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    const openHover = bandOn(colors.primary[50], colors.background[50]);
     const keys = useMemo(() => Object.keys(account).filter((key) => typeof account[key] === "string" && !excludeKeys.includes(key)), [account]);
     const visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     const handleToggle = () => {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
     };
-    return (_jsx(Box, { role: "group", width: "100%", borderRadius: "xl", background: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, p: 3, boxSizing: "border-box", minHeight: isExpanded ? "11.25rem" : "5rem", transition: transitionFor(["border-color", "box-shadow", "transform"]), sx: reducedMotionSx({ transform: "none" }), _hover: {
+    return (_jsx(Box, { role: "group", width: "100%", borderRadius: "xl", background: colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, p: 3, boxSizing: "border-box", minHeight: isExpanded ? "11.25rem" : "5rem", transition: transitionFor(["border-color", "box-shadow", "transform"]), sx: reducedMotionSx({ transform: "none" }), _hover: {
             borderColor: colors.primary[300],
             boxShadow: "md",
             transform: "translateY(-0.063rem)",
-        }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(Text, { as: "button", type: "button", "aria-expanded": isExpanded, color: colors.accentText, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, borderRadius: "sm", _hover: { textDecoration: "underline" }, sx: focusVisibleStyles(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: transitionFor(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: reducedMotionSx(), children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: {
-                                            bg: colors.primary[50],
-                                            color: accentTextOnCanvas(colors.primary, colors.primary[50]),
+        }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "sm", color: colors.text[500], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "xs-plus", color: colors.text[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(Text, { as: "button", type: "button", "aria-expanded": isExpanded, color: colors.accentText, fontSize: "xs", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, borderRadius: "sm", _hover: { textDecoration: "underline" }, sx: focusVisibleStyles(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: transitionFor(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: reducedMotionSx(), children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: {
+                                            bg: openHover,
+                                            color: accentTextOnCanvas(colors.primary, openHover),
                                         }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: _jsx(ExternalLink, { size: 15 }) }) })] })] })] }) }));
 });
 export default AccountCard;

package/dist/esm/Components/KanbanBoard/AccountRow.js

@@ -5,6 +5,6 @@ import { toWords } from "../../Utils/functions.js";
 /** Renders one label:value row; `label` is re-run through `toWords`, which splits snake_case, kebab-case and camelCase. */
 const AccountRow = ({ label, value }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Flex, { w: "full", gap: 1, children: [_jsx(Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: _jsx(Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: toWords(label) }) }), _jsx(Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), _jsx(Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: _jsx(Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));
+    return (_jsxs(Flex, { w: "full", gap: 1, children: [_jsx(Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: _jsx(Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "xs", children: toWords(label) }) }), _jsx(Text, { w: "0.75rem", textAlign: "center", fontSize: "xs", children: ":" }), _jsx(Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: _jsx(Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "xs", children: value }) })] }));
 };
 export default AccountRow;