pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.40

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

@@ -4,6 +4,7 @@ import { Box, Flex, IconButton, Image, Modal, ModalBody, ModalCloseButton, Modal
 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 ToolTip from "../ToolTip/ToolTip.js";
 const MotionContent = motion(ModalContent);
 const inferKind = (url, fileName) => {
@@ -33,6 +34,7 @@ const downloadFile = async (fileUrl, fileName) => {
         window.open(fileUrl, "_blank", "noopener,noreferrer");
     }
 };
+/** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
 export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownload = false, size = "xl", }) => {
     const theme = useCustomTheme();
     const [zoom, setZoom] = useState(1);
@@ -56,7 +58,7 @@ export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hide
         if (kind === "video") {
             return (_jsx(Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
         }
-        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[500], color: theme.colors.onPrimary, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [_jsx(Download, { size: 16 }), " Download file"] }))] }));
+        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

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

@@ -1,19 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback } from "react";
-import { Box, Text, VStack, Icon, List, ListItem, ListIcon, CloseButton, HStack, Progress, useDisclosure, Image, } from "@chakra-ui/react";
+import { Box, Text, Stack, VStack, Icon, List, ListItem, ListIcon, CloseButton, HStack, Progress, useDisclosure, Image, } from "@chakra-ui/react";
 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 Modal, { ModalBody, ModalHeader } from "../Modal/Modal.js";
-const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, }) => {
+/** 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", }) => {
+    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.gray[50];
+    const bg = colors.background[50];
     const border = colors.boxborder[500];
     const mappedAccept = acceptTypes.reduce((acc, ext) => {
         const mime = mimeMap[ext];
@@ -53,10 +55,10 @@ 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: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [_jsx("input", { ...getInputProps() }), _jsxs(VStack, { spacing: 2, children: [_jsx(Icon, { as: Upload, boxSize: 6 }), _jsx(Text, { fontWeight: "medium", children: "Drag and drop files here" }), _jsxs(Text, { fontSize: "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, { ...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: {
                                                                 ".hover-icon": {
                                                                     opacity: 1,
-                                                                    bg: colors.secondary.opacity[16],
+                                                                    bg: "blackAlpha.500",
                                                                 },
                                                             }, onClick: () => {
                                                                 setPreviewUrl(URL.createObjectURL(file));
@@ -67,7 +69,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                                                                         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: colors.background[100] }) })] })) : (_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(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: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);

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

@@ -13,6 +13,7 @@ export const mimeMap = {
     '.ppt': 'application/vnd.ms-powerpoint',
     '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
     '.txt': 'text/plain',
+    '.csv': 'text/csv',
     '.mp4': 'video/mp4',
     '.mov': 'video/quicktime',
     '.mp3': 'audio/mpeg',

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

@@ -5,6 +5,7 @@ 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";
+/** 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();

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

@@ -144,13 +144,13 @@ 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.gray[50], borderColor: theme.colors.gray[300], 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", 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: () => {
                                                                 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.gray[50], borderColor: theme.colors.gray[300], 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.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: () => {
                                                             const max = v;
                                                             const min = currentMin;
                                                             const nextVal = [Math.min(min, max), Math.max(min, max)];
@@ -169,7 +169,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             const isRowSelected = String(internalSelected[section.id] || "") === String(r);
                                             const starColor = accentTextOnCanvas(theme.colors.orange, isRowSelected ? theme.colors.red[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.gray[50], border: "1px solid", 
+                                        })() }), _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.
@@ -228,7 +228,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 : {
                     justifyContent: "space-between",
                     padding: 0,
-                    background: theme.colors.gray[50],
+                    background: theme.colors.background[50],
                     borderRadius: theme.radii.lg,
                     border: `1px solid ${theme.colors.gray[200]}`,
                     marginBottom: 6,
@@ -249,6 +249,6 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 },
         },
     }));
-    return (_jsxs(Box, { w: width, bg: variant === "minimal" ? theme.colors.background[50] : theme.colors.gray[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.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 })] }));
 };
 export default FilterSidebar;

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

@@ -1,10 +1,3 @@
-/**
- * FilterSidebar's hover fill for option rows, popover list items, and the accordion trigger.
- * `gray[50]` (a pale near-white tint in light mode) sits within ~1 lightness point of the
- * dark-mode canvas once the whole scale flips (~1.08:1 contrast) — invisible, the QA-reported
- * "checkbox hover invisible" bug. `gray[300]` clears the resting canvas (~2.3:1, a clear visible
- * cue) while staying dark enough that the existing `gray[700]`/`gray[800]` row text (tuned for a
- * near-black canvas) still reads at/above AA (~4.9:1+) on top of it — no text-color flip needed
- * here, unlike the Table row hover fix.
- */
-export const getFilterHoverBg = (colors, isDark) => isDark ? colors.gray[300] : colors.gray[50];
+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;

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Icon } from "@chakra-ui/react";
 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, size: "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.border[500]}`, 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, { 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 })] }));
 };
 export default FormWrapper;

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

@@ -2,7 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack, Button, Badge, Text, VStack, Collapse, HStack, } from "@chakra-ui/react";
 import React from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
 const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }) => {
+    const { colors } = useCustomTheme();
     const [openMenuLabel, setOpenMenuLabel] = React.useState(null);
     React.useEffect(() => {
         if (!isOpen)
@@ -10,7 +13,9 @@ const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rig
     }, [isOpen]);
     return (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { pb: 4, display: { md: "none" }, children: _jsxs(Stack, { spacing: 4, children: [menuItems.map((item) => {
                         var _a, _b, _c, _d, _e;
-                        return item.children ? (_jsxs(Box, { px: 2, children: [_jsx(Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: item.children.some((subItem) => isActive(subItem.href))
+                        return item.children ? (_jsxs(Box, { px: 2, children: [_jsx(Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: item.children.some((subItem) => isActive(subItem.href))
+                                        ? 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, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", 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) => {
                                             var _a, _b, _c;
@@ -18,8 +23,12 @@ const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rig
                                                     var _a;
                                                     (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
                                                     onClose === null || onClose === void 0 ? void 0 : onClose();
-                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), _jsx(Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
-                                        }) }) })] }, item.label)) : (_jsx(Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label })), _jsx(Text, { children: item.label })] }) }, item.label));
+                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(subItem.href)
+                                                    ? onFilled(activeBg, colors.white, colors.black)
+                                                    : color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), _jsx(Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                        }) }) })] }, item.label)) : (_jsx(Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(item.href)
+                                ? onFilled(activeBg, colors.white, colors.black)
+                                : color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label })), _jsx(Text, { children: item.label })] }) }, item.label));
                     }), rightSlot && _jsx(Box, { mt: 4, children: rightSlot })] }) }) }));
 };
 export default MobileMenu;

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

@@ -14,6 +14,7 @@ const getFlagEmoji = (countryCode) => {
 };
 const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
 const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
+/** Country-code-aware phone field with a flag/dial-code prefix; its `ref` prop never attaches — this is a plain function component, not `forwardRef`. */
 const PhoneNumberInput = ({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, ref, name, minW, maxW, ...rest }) => {
     const theme = useCustomTheme();
     const getCountryTelCode = useCallback((countryCode) => {

package/dist/esm/Components/Input/Switch/InputSwitch.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Switch, FormControl, FormLabel, HStack, Box, } from "@chakra-ui/react";
 import { TextLabel } from "../../Common/FormLabel.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+/** Themed Chakra `Switch` wrapper; a caller-supplied `sx` replaces (not merges with) the built-in checked/unchecked track color. */
 export const InputSwitch = ({ switchText, switchTextPosition = "right", id, isChecked, label, isInformation, informationMessage, isRequired, size = "md", ...props }) => {
     const theme = useCustomTheme();
     // Read the palette directly — it is already swapped for the active mode, so pairing the rungs

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

@@ -6,6 +6,7 @@ import { TextLabel } from "../Common/FormLabel.js";
 import HelperText from "../Common/HelperText.js";
 import ErrorMessage from "../Common/ErrorMessage.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Standard labelled text field — error/helper text, left/right icons; `isRequired` only draws the label asterisk, it isn't native HTML validation. */
 const TextInput = forwardRef(({ label, type = "text", id, name, onChange, onBlur, onFocus, isDisabled = false, isReadOnly = false, isRequired = false, value, placeholder = "Placeholder", width = "100%", height, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size = "md", isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, ...props }, ref) => {
     const theme = useCustomTheme();
     const sizeKey = typeof size === "string" ? size : "md";

package/dist/esm/Components/Input/TextInput.styles.js

@@ -1,7 +1,6 @@
-import { softenToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-import { PLACEHOLDER_TEXT } from "../../Theme/tokens/builders/surfaceRungs.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 export const Input = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         field: {
             fontWeight: 500,
             fontSize: "0.875rem",
@@ -12,11 +11,12 @@ export const Input = {
             alignItems: "center",
             borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
+            // Every variant inherits the hint ink; only `outline` used to set it.
             _placeholder: {
-                fontStyle: "italic",
+                color: placeholderInk(theme.colors),
             },
         },
-    },
+    }),
     sizes: {
         sm: {
             field: {
@@ -47,13 +47,11 @@ export const Input = {
             const primary = theme.colors.primary[500];
             return {
                 field: {
-                    bg: theme.colors.gray[50],
+                    bg: theme.colors.background[50],
                     border: "0.063rem solid",
                     borderColor,
-                    // `textMuted` is body copy, so a hint read as a filled value (6.59:1).
-                    // Settled against the field's own bg to just clear of AA.
                     _placeholder: {
-                        color: softenToContrast(theme.colors.placeholder[500], theme.colors.gray[50], PLACEHOLDER_TEXT),
+                        color: placeholderInk(theme.colors),
                     },
                     _hover: {
                         borderColor: primary,
@@ -83,7 +81,7 @@ export const Input = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: theme.colors.gray[100],
+                        bg: theme.colors.background[100],
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {

package/dist/esm/Components/InputTextArea/InputTextArea.js

@@ -4,6 +4,7 @@ import { FormControl, Textarea, } from "@chakra-ui/react";
 import { TextLabel } from "../Common/FormLabel.js";
 import ErrorMessage from "../Common/ErrorMessage.js";
 import HelperText from "../Common/HelperText.js";
+/** Labelled multi-line text field; `width` defaults to a literal `500` (px, not responsive) and there's no `...rest` escape hatch. */
 const InputTextArea = forwardRef(function InputTextArea({ label, placeholder, value, onChange, onBlur, name, size = "md", resize = "both", width = 500, isDisabled, isReadOnly, isRequired = false, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete = "" }, ref) {
     return (_jsxs(FormControl, { children: [label && _jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), _jsx(Textarea, { ref: ref, id: id, name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
 });

package/dist/esm/Components/InputTextArea/InputTextArea.style.js

@@ -1,5 +1,6 @@
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 export const Textarea = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         fontWeight: 500,
         fontSize: "0.875rem",
         letterSpacing: "0.044rem",
@@ -8,9 +9,9 @@ export const Textarea = {
         borderRadius: "lg",
         transition: "border-color 0.2s, box-shadow 0.2s",
         _placeholder: {
-            fontStyle: "italic",
+            color: placeholderInk(theme.colors),
         },
-    },
+    }),
     sizes: {
         md: {
             fontSize: "0.875rem",
@@ -28,9 +29,9 @@ export const Textarea = {
             return {
                 border: "0.063rem solid",
                 borderColor,
-                bg: theme.colors.gray[50],
+                bg: theme.colors.background[50],
                 _placeholder: {
-                    color: theme.colors.textMuted,
+                    color: placeholderInk(theme.colors),
                 },
                 _hover: {
                     borderColor: primary,
@@ -58,7 +59,7 @@ export const Textarea = {
                     boxShadow: 'inherit',
                 },
                 _disabled: {
-                    bg: theme.colors.gray[100],
+                    bg: theme.colors.background[100],
                     opacity: 1,
                     cursor: "not-allowed",
                     _hover: {

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

@@ -7,6 +7,7 @@ import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/ac
 import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import AccountRow from "./AccountRow.js";
 const excludeKeys = ["id", "details"];
+/** Renders one card; if `account.customNode` is set it fully replaces this (and the built-in delete/open/expand) — not exported from the package. */
 const AccountCard = React.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
     const { colors } = useCustomTheme();
     const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Text, Tooltip, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { toWords } from "../../Utils/functions.js";
+/** Renders one label:value row; `label` is re-run through `toWords`, which only splits snake_case — a camelCase key like `nextFollowUp` displays as `Nextfollowup`. */
 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 }) })] }));

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

@@ -4,10 +4,10 @@ import Select from "../../Select/Select.js";
 import { CirclePlus, SquarePen } from "lucide-react";
 import VeritcalDivider from "../../Divider/Divider.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
 import Button from "../../Button/Button.js";
+/** Standalone filter+Edit+Create action bar; NOT rendered by KanbanBoard (which uses HeaderActions instead) and not exported from the package. */
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20, color: onFilled(colors.primary[500], colors.white, colors.black) }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
 };
 export default KanbanActions;

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

@@ -37,6 +37,7 @@ function reorderColumnEntries(entries, startIndex, endIndex) {
     result.splice(endIndex, 0, removed);
     return result;
 }
+/** Full drag-and-drop board (columns + virtualized cards); its header select/edit/create bar is `HeaderActions`, not the unrelated `KanbanActions`. */
 const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading = false, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse = false, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder = false, onColumnReorder, preferences = {
     baseurl: "",
     token: "",

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useLayoutEffect, useEffect } from "react";
+/** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
 const MeasuredItem = ({ index, setSize, children, }) => {
     const ref = useRef(null);
     const prevHeight = useRef(null);

package/dist/esm/Components/LazyWrapper/LazyWrapper.js

@@ -6,5 +6,6 @@ const DefaultFallback = ({ minHeight }) => {
     const theme = useCustomTheme();
     return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: _jsx(Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: theme.colors.gray[100], color: theme.colors.accentText }) }));
 };
+/** Suspense boundary + themed spinner only — wrap an already-lazy() child; a non-lazy child never suspends. */
 const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => (_jsx(Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : _jsx(DefaultFallback, { minHeight: minHeight }), children: children }));
 export default LazyWrapper;

package/dist/esm/Components/LimitReachedModal/limitReachedCopy.js

@@ -39,10 +39,12 @@ const COPY = {
         member: "Your organization has reached its ticket limit. Contact your organization administrator to upgrade the plan.",
     },
 };
+/** title is the same for both audiences — only message swaps between admin and member copy. */
 export function resolveLimitCopy(kind, canManageBilling) {
     const c = COPY[kind];
     return { title: c.title, message: canManageBilling ? c.admin : c.member };
 }
+/** Returns null unless BOTH used and limit are non-null — no partial "X used" line. */
 export function formatLimitUsage(kind, used, limit) {
     if (used == null || limit == null)
         return null;

package/dist/esm/Components/Loading/Loading.js

@@ -1,20 +1,22 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { Box, Center, Spinner, Text } from "@chakra-ui/react";
 import { css, keyframes } from "@emotion/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-const colorTransition = keyframes `
-  0% {
-    color: black;
-  }
-  50% {
-    color: gray;
-  }
-  100% {
-    color: black;
-  }
-`;
+/** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
 export default function Loading({ text, isLoading, onlytext, container }) {
     const theme = useCustomTheme();
+    const colorTransition = useMemo(() => keyframes `
+      0% {
+        color: ${theme.colors.text[900]};
+      }
+      50% {
+        color: ${theme.colors.textMuted};
+      }
+      100% {
+        color: ${theme.colors.text[900]};
+      }
+    `, [theme.colors.text, theme.colors.textMuted]);
     if (!isLoading) {
         return null;
     }

package/dist/esm/Components/MoreItems/MoreItems.js

@@ -1,12 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, SimpleGrid, Text, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+/** "+N more" popover trigger for an overflowed list — renders nothing at all once the count reaches 0. */
 const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = false, columns = 2, minWidth = "260px", triggerMaxWidth = "250px", trigger = "hover", placement = "bottom-start", }) => {
     const theme = useCustomTheme();
+    const countBadgeBg = listRowBackgrounds(theme.colors).selected;
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? _jsx(_Fragment, { children: triggerText }) : null;
-    return (_jsxs(Popover, { trigger: trigger, placement: placement, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && (_jsx(Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), _jsxs(Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: theme.colors.primary[100] }, children: ["+", count, " more"] })] }) }), _jsxs(PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+    return (_jsxs(Popover, { trigger: trigger, placement: placement, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && (_jsx(Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), _jsxs(Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: "all 0.15s ease", _hover: { bg: listRowBackgrounds(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), _jsxs(PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
                 // Chakra defaults this surface to `colors.gray.700` in dark, which against the
                 // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
                 bg: theme.colors.background[50], boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [_jsx(PopoverArrow, { bg: theme.colors.background[50] }), _jsx(PopoverBody, { p: 3, children: _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {

package/dist/esm/Components/MultiSelect/MultiSelect.js

@@ -55,14 +55,14 @@ export default function MultiSelect({ value, onValueChange, width = "100%", labe
                 // surface up to `muted` (lightest); [500] fails there, [800] clears all with margin.
                 borderColor: error || localError
                     ? theme.colors.semanticText.error
-                    : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.gray[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
+                    : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.background[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
                     borderColor: error || localError
                         ? theme.colors.semanticText.error
                         : theme.colors.primary[500],
                     boxShadow: `0 0 0 0.125rem ${error || localError
                         ? theme.colors.boxShadow.error
                         : theme.colors.boxShadow.primary}`,
-                }, children: [options.map((option) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: X }, option.id))), _jsx(Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
+                }, children: [options.map((option) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: X }, option.id))), _jsx(Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.text[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
                             backgroundColor: "transparent",
                             ...inputStyle,
                         }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (error || localError) && (_jsx(ErrorMessage, { errorMessage: localError || errorMessage })), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));