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

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

@@ -1,10 +1,14 @@
+/** Props for the full OTP verification card (icon, title, resend link); for a bare input in your own layout use PinInput/PinInputs. */
 export type VerifyEmailOtpProps = {
     resendMail: () => void;
     onChange: (value: string) => void;
+    /** Fires once all `pins` cells are filled — a `pins` value that doesn't match the actual OTP length blocks or truncates completion. */
     onComplete: (value: string) => void;
     placeholder?: string;
+    /** Typed as required, but the implementation silently defaults to 5 if a caller bypasses the type and omits it. */
     pins: number;
     title: string;
+    /** A second, hardcoded line — "your new Pixel Account" — is always appended below this text; there's no prop to remove it. */
     description: string;
     isDisabled?: boolean;
     isInvalid?: boolean;

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { EmptyStateProps } from "./EmptyStateProps";
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
 declare const EmptyState: React.FC<EmptyStateProps>;
 export default EmptyState;

package/dist/Components/EmptyState/EmptyState.js

@@ -5,6 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("@emotion/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const float = (0, react_2.keyframes) `
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-8px); }
@@ -19,14 +20,15 @@ const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "seconda
     : scheme === "gray"
         ? colors.gray
         : colors.semantic[scheme];
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
 const EmptyState = ({ title = "No data found", description, icon: IconComp = lucide_react_1.Inbox, image, size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "240px", sx, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = sizeMap[size];
     const palette = scaleFor(theme.colors, colorScheme);
-    const accent = palette[500];
     const accentSoft = palette[50];
+    const accent = (0, accentText_1.accentTextOnCanvas)(palette, accentSoft);
     const containerStyles = variant === "subtle"
-        ? { bg: theme.colors.gray[50], borderRadius: "2xl" }
+        ? { bg: theme.colors.background[50], borderRadius: "2xl" }
         : variant === "dashed"
             ? {
                 border: "2px dashed",

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

@@ -1,7 +1,10 @@
 import { ElementType, ReactNode } from "react";
 import { BoxProps } from "@chakra-ui/react";
+/** Controls badge/icon size, type scale, and spacing together. */
 export type EmptyStateSize = "sm" | "md" | "lg";
+/** Palette used to tint the icon badge — brand scale or semantic tone. */
 export type EmptyStateColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "success" | "error" | "warning" | "info";
+/** Props for the centered empty/zero-data placeholder; pass `action` for any real button(s)/CTA. */
 export interface EmptyStateProps {
     /** Heading text. Defaults to "No data found". */
     title?: string;

package/dist/Components/FeedbackForm/FeedbackForm.d.ts

@@ -5,12 +5,15 @@ export type FeedbackPayload = {
     lastName: string;
     email: string;
 };
+/** Provide onSubmit or submitUrl — with neither, the form still validates and shows a success toast, but nothing is ever sent. */
 export type FeedbackFormProps = {
     onSubmit?: (payload: FeedbackPayload) => Promise<void> | void;
     submitUrl?: string;
     isSubmittingText?: string;
     submitText?: string;
+    /** Only seeds state via useState's initializer on mount — changing this prop later does not resync the rendered fields. */
     defaultValues?: Partial<FeedbackPayload>;
     isDisabled?: boolean;
 };
+/** Renders its own success/error toast via Chakra's useToast, not this library's Toaster — that toast can be silently hidden inside a Modal. */
 export default function FeedbackForm(props: FeedbackFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/FeedbackForm/FeedbackForm.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 // eslint-disable-next-line no-control-regex, no-useless-escape
 const emailRegex = /^(?:[a-zA-Z0-9_'^&\/+{}=?`|~!-]+(?:\.[a-zA-Z0-9_'^&\/+{}=?`|~!-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z-]*[a-zA-Z]:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]+)\])$/;
+/** Renders its own success/error toast via Chakra's useToast, not this library's Toaster — that toast can be silently hidden inside a Modal. */
 function FeedbackForm(props) {
     var _a, _b, _c, _d, _e;
     const { onSubmit, submitUrl, isDisabled, defaultValues, submitText = "Submit", isSubmittingText = "Submitting..." } = props;

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

@@ -15,12 +15,13 @@ export interface FieldSelectModalProps {
     confirmText?: string;
     loadingText?: string;
     isLoading?: boolean;
-    /** Pre-selected field_name values. Defaults to all selected. */
+    /** Pre-selected field_name values (defaults to all selected); re-applied whenever this or `fields` changes reference while open. */
     defaultSelected?: string[];
     /** Columns in the field grid. */
     columns?: number;
-    /** Show the search box (auto-hidden under 8 fields by default). */
+    /** Show the search box (auto-hidden under 8 fields by default); "Select all" still applies to every field, not just visible matches. */
     searchable?: boolean;
 }
+/** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
 declare const FieldSelectModal: React.FC<FieldSelectModalProps>;
 export default FieldSelectModal;

package/dist/Components/FieldSelectModal/FieldSelectModal.js

@@ -7,6 +7,7 @@ const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const MotionModalContent = (0, framer_motion_1.motion)(react_2.ModalContent);
+/** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
 const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select Fields", confirmText = "Apply", loadingText = "Applying...", isLoading = false, defaultSelected, columns = 2, searchable, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [selected, setSelected] = (0, react_1.useState)([]);

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { FilePreviewProps, FilePreviewTriggerProps } from "./FilePreviewProps";
+/** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
 export declare const FilePreview: React.FC<FilePreviewProps>;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 export declare const FilePreviewTrigger: React.FC<FilePreviewTriggerProps>;

package/dist/Components/FilePreview/FilePreview.js

@@ -10,6 +10,7 @@ const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const MotionContent = (0, framer_motion_1.motion)(react_2.ModalContent);
 const inferKind = (url, fileName) => {
@@ -39,6 +40,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. */
 const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownload = false, size = "xl", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [zoom, setZoom] = (0, react_1.useState)(1);
@@ -62,7 +64,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
         if (kind === "video") {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
         }
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[500], color: theme.colors.onPrimary, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(MotionContent
             // Chakra's default Modal drives its bg off `--modal-bg`, which flips to

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

@@ -1,10 +1,12 @@
+/** Preview renderer to use; "other" falls back to a download-only panel. */
 export type FilePreviewKind = "image" | "pdf" | "video" | "other";
+/** Props for FilePreview, a modal viewer that infers image/pdf/video/other from the file extension. */
 export interface FilePreviewProps {
     isOpen: boolean;
     onClose: () => void;
-    /** URL of the file to preview. */
+    /** Changing this while isOpen stays true does NOT reset zoom/rotation — remount via key={fileUrl}. */
     fileUrl: string;
-    /** Display name (also used as the download filename). */
+    /** Drives kind-detection instead of fileUrl when set — a name with no extension forces the no-preview fallback. */
     fileName?: string;
     /** Force a renderer. When omitted it is inferred from the file extension. */
     fileType?: FilePreviewKind;
@@ -13,6 +15,7 @@ export interface FilePreviewProps {
     /** Modal size. */
     size?: "md" | "lg" | "xl" | "2xl" | "full";
 }
+/** Props for FilePreviewTrigger — a thumbnail that opens FilePreview in a modal on click. */
 export interface FilePreviewTriggerProps {
     /** URL of the file. */
     fileUrl: string;

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { FileUploaderProps } from "./FileUploadProps";
+/** Controlled drop zone — you own the `uploadedFiles`/File[] state; default `maxSizeKB=5` is 5KB and rejects nearly every real file. */
 declare const FileUpload: React.FC<FileUploaderProps>;
 export default FileUpload;

package/dist/Components/FileUpload/FileUpload.js

@@ -42,13 +42,15 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const constants_1 = require("./constants");
 const Modal_1 = __importStar(require("../Modal/Modal"));
-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 } = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const [previewUrl, setPreviewUrl] = react_1.default.useState(null);
     const [previewTitle, setPreviewTitle] = react_1.default.useState(null);
     const [errors, setErrors] = react_1.default.useState([]);
-    const bg = colors.gray[50];
+    const bg = colors.background[50];
     const border = colors.boxborder[500];
     const mappedAccept = acceptTypes.reduce((acc, ext) => {
         const mime = constants_1.mimeMap[ext];
@@ -88,10 +90,10 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
             setErrors(messages);
         },
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...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: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps() }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...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: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps({ "aria-label": inputAriaLabel }) }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: compact ? 4 : 6 }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 0, align: compact ? "start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.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));
@@ -102,7 +104,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                                                                         height: "100%",
                                                                         objectFit: "cover",
                                                                         borderRadius: radii.base,
-                                                                    } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: colors.background[100] }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
+                                                                    } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: "white" }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);

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

@@ -1,11 +1,17 @@
-export type MimeExtension = '.jpg' | '.jpeg' | '.png' | '.gif' | '.webp' | '.svg' | '.pdf' | '.doc' | '.docx' | '.xls' | '.xlsx' | '.ppt' | '.pptx' | '.txt' | '.mp4' | '.mov' | '.mp3' | '.wav' | '.zip' | '.rar' | '.7z';
+/** File extensions FileUpload accepts via `acceptTypes`; each must have a mapping in `mimeMap`. */
+export type MimeExtension = '.jpg' | '.jpeg' | '.png' | '.gif' | '.webp' | '.svg' | '.pdf' | '.doc' | '.docx' | '.xls' | '.xlsx' | '.ppt' | '.pptx' | '.txt' | '.csv' | '.mp4' | '.mov' | '.mp3' | '.wav' | '.zip' | '.rar' | '.7z';
+/** Extension-to-MIME-type lookup consumed by react-dropzone's `accept` option; see `mimeMap` in constants.ts. */
 export type MimeMap = Record<MimeExtension, string>;
+/** Props for FileUpload, a controlled drop zone; the caller owns `uploadedFiles` state. */
 export type FileUploaderProps = {
     onFilesUploaded: (files: File[]) => void;
     uploadedFiles: File[];
     onRemoveFile?: (file: File) => void;
     acceptTypes?: MimeExtension[];
+    /** KB, not MB — default 5 means 5KB; the rendered hint text shows "0.00 MB" at that default. Always pass a realistic value. */
     maxSizeKB?: number;
     maxFiles?: number;
+    size?: 'sm' | 'md';
     progress?: Record<string, number>;
+    inputAriaLabel?: string;
 };

package/dist/Components/FileUpload/constants.js

@@ -16,6 +16,7 @@ exports.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/Components/FileUploader/FileUploader.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { FileUploaderProps } from "./FileUploaderProps";
+/** Self-contained widget; onFilesChange returns {id,name,size,previewUrl} metadata, never real File objects — cannot be used to upload bytes. */
 declare const FileUploader: React.FC<FileUploaderProps>;
 export default FileUploader;

package/dist/Components/FileUploader/FileUploader.js

@@ -7,6 +7,7 @@ const lucide_react_1 = require("lucide-react");
 const Toaster_1 = require("../Toaster/Toaster");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+/** 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 } = (0, Toaster_1.useToaster)();
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/FileUploader/FileUploaderProps.d.ts

@@ -1,3 +1,4 @@
+/** Metadata only, not a real File/Blob — previewUrl is a blob: URL for images; there is no way to recover the original File. */
 export type UploadedFile = {
     id: string;
     name: string;
@@ -5,6 +6,7 @@ export type UploadedFile = {
     type?: string;
     previewUrl?: string;
 };
+/** Same name as FileUpload's own, unrelated props type — this one is not exported from the package; only FileUpload's ships publicly. */
 export type FileUploaderProps = {
     maxFiles?: number;
     maxTotalSize?: number;

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

@@ -19,12 +19,14 @@ export type FilterSection = {
     };
     initiallyExpanded?: boolean;
     type?: "checkboxes" | "radio";
+    /** Dead — never read; radio mode is decided by `type === "radio"` or `radio` below, checkboxes is the unconditional default. */
     checkboxes?: boolean;
     radio?: boolean;
 };
 export type SelectedFilters = FilterValues;
 export type FilterSidebarProps = {
     sidebarOptions: FilterSection[];
+    /** Passing this alone (no onChange) makes every filter click silently inert — state is computed, then discarded. */
     selected?: SelectedFilters;
     onChange?: (selected: SelectedFilters) => void;
     onApply?: (selected: SelectedFilters) => void;
@@ -33,6 +35,7 @@ export type FilterSidebarProps = {
     variant?: "minimal" | "cards";
     containerHeight?: number | string;
     containerPadding?: number | string;
+    /** Dead — commented out of the destructure; has no effect (same for sliderMode below). */
     headerPadding?: number;
     panelPadding?: number;
     sliderMode?: "chakra" | "native";

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -149,13 +149,13 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                         pointerEvents: 'none', // Allow clicks to pass through track
                                         zIndex: 3,
                                         margin: 0,
-                                    } })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: () => {
+                                    } })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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)];
@@ -174,7 +174,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             const isRowSelected = String(internalSelected[section.id] || "") === String(r);
                                             const starColor = (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, isRowSelected ? theme.colors.red[50] : theme.colors.background[50]);
                                             return Array.from({ length: 5 }, (_, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
-                                        })() }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", 
+                                        })() }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.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.
@@ -233,7 +233,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,
@@ -254,6 +254,6 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 },
         },
     }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
 };
 exports.default = FilterSidebar;

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

@@ -1,11 +1,3 @@
 import type { PaletteProps } from "../../Theme/tokens/types";
-/**
- * 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 declare const getFilterHoverBg: (colors: PaletteProps, isDark: boolean) => string;
+/** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
+export declare const getFilterHoverBg: (colors: PaletteProps, _isDark: boolean) => string;

package/dist/Components/FilterSidebar/filterHoverStyle.js

@@ -1,14 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFilterHoverBg = void 0;
-/**
- * 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.
- */
-const getFilterHoverBg = (colors, isDark) => isDark ? colors.gray[300] : colors.gray[50];
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+/** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
+const getFilterHoverBg = (colors, _isDark) => (0, rowStates_1.listRowBackgrounds)(colors).active;
 exports.getFilterHoverBg = getFilterHoverBg;

package/dist/Components/Form/FormWrapper.d.ts

@@ -1,7 +1,10 @@
 import React, { ElementType } from "react";
+/** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. */
 declare const FormWrapper: ({ icon, text, children, }: {
+    /** Must be a component reference (e.g. FiUser), not a rendered element like <FiUser />. */
     icon?: ElementType;
     text?: string;
+    /** Only icon/text/children are accepted — no `...rest`, so className/style/data- and aria-attributes never reach the DOM. */
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default FormWrapper;

package/dist/Components/Form/FormWrapper.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, size: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.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 })] }));
 };
 exports.default = FormWrapper;

package/dist/Components/Header/HeaderProps.d.ts

@@ -1,3 +1,4 @@
+/** Horizontal top bar with page-link nav + submenus — for a user-avatar dropdown bar instead, use NavigationBar. */
 type SubItem = {
     label: string;
     href: string;
@@ -15,8 +16,10 @@ type MenuItemProp = {
         colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
     };
     onClick?: () => void;
+    /** Opens as a hover-only dropdown on desktop (no click/keyboard trigger) — a click-toggled accordion on mobile instead. */
     children?: SubItem[];
 };
+/** Props for Header, the horizontal top bar; use NavigationBar for a user-avatar dropdown instead. */
 export type HeaderProps = {
     logo: React.ReactNode;
     menuItems: MenuItemProp[];
@@ -32,6 +35,7 @@ export type HeaderProps = {
     boxShadow?: string;
     onMobileMenuClose?: () => void;
 };
+/** Internal props for Header's desktop nav row; not meant for consumers. */
 export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
     setHoveredMenu: (menu: string | null) => void;
     isActive: (href?: string) => boolean | "" | undefined;
@@ -41,6 +45,7 @@ export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
     color: string;
     hoverTextColor?: string;
 };
+/** Internal props for Header's collapsible mobile menu panel; not meant for consumers. */
 export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg'> & {
     isOpen: boolean;
     onClose?: () => void;

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

@@ -7,7 +7,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = __importDefault(require("react"));
 const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [openMenuLabel, setOpenMenuLabel] = react_2.default.useState(null);
     react_2.default.useEffect(() => {
         if (!isOpen)
@@ -15,7 +18,9 @@ const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rig
     }, [isOpen]);
     return ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { pb: 4, display: { md: "none" }, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: 4, children: [menuItems.map((item) => {
                         var _a, _b, _c, _d, _e;
-                        return item.children ? ((0, jsx_runtime_1.jsxs)(react_1.Box, { px: 2, children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsxs)(react_1.Box, { px: 2, children: [(0, jsx_runtime_1.jsx)(react_1.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))
+                                        ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                        : color, bg: item.children.some((subItem) => isActive(subItem.href))
                                         ? activeBg
                                         : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
                                             var _a, _b, _c;
@@ -23,8 +28,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: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
-                                        }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
+                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(subItem.href)
+                                                    ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                                    : color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                        }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.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)
+                                ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                : color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
                     }), rightSlot && (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 4, children: rightSlot })] }) }) }));
 };
 exports.default = MobileMenu;

package/dist/Components/Input/Input/InputProps.d.ts

@@ -1,3 +1,4 @@
+/** Internal, not exported from index.ts — use TextInput for a public field. No id prop; the label always renders as a plain span, never linked to the input. */
 export type InputProps = {
     label: string;
     type?: "email" | "password" | "text" | "number";
@@ -7,6 +8,7 @@ export type InputProps = {
     placeholder?: string;
     className?: string;
     inputBoxClassName?: string;
+    /** disabled, autoComplete, autoFocus, inputClassName, labelClassName, errorClassName are typed here but Input.tsx never reads them — no effect. */
     inputClassName?: string;
     labelClassName?: string;
     errorClassName?: string;

package/dist/Components/Input/PhoneNumberInput.d.ts

@@ -1,3 +1,4 @@
 import { PhoneNumberInputProps } from "./PhoneNumberInputProps";
+/** Country-code-aware phone field with a flag/dial-code prefix; its `ref` prop never attaches — this is a plain function component, not `forwardRef`. */
 declare const PhoneNumberInput: ({ size, value, codeValueReturn, country, countries, placeholder, onChange, inputId, selectId, error, errorMessage, helperText, label, id, width, isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect, ref, name, minW, maxW, ...rest }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export default PhoneNumberInput;

package/dist/Components/Input/PhoneNumberInput.js

@@ -19,6 +19,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 = (0, useCustomTheme_1.useCustomTheme)();
     const getCountryTelCode = (0, react_1.useCallback)((countryCode) => {

package/dist/Components/Input/PhoneNumberInputProps.d.ts

@@ -1,9 +1,11 @@
+/** One entry in the `countries` select; `dial_code` prefixes the number on change. */
 export type CountryOption = {
     country_id: string | number;
     code: string;
     country: string;
     dial_code: string;
 };
+/** The number field stays isDisabled until a country is chosen (via the select or the country prop) — with neither, typing silently does nothing. */
 export type PhoneNumberInputProps = {
     label?: string;
     id?: string;
@@ -26,6 +28,7 @@ export type PhoneNumberInputProps = {
     onBlur?: () => void;
     onFocus?: () => void;
     isReadOnly?: boolean;
+    /** Typed here but PhoneNumberInput is a plain function component, not forwardRef — passing ref never attaches; ref.current stays null. */
     ref?: React.Ref<HTMLInputElement>;
     autoComplete?: string;
     height?: string;

package/dist/Components/Input/Switch/InputSwitch.d.ts

@@ -1,4 +1,5 @@
 import { SwitchProps } from "@chakra-ui/react";
+/** Extends SwitchProps, so a caller-supplied sx spreads in last and silently replaces the built-in checked/unchecked track color. */
 export interface ThemedSwitchProps extends SwitchProps {
     switchText?: string;
     switchTextPosition?: "left" | "right";
@@ -8,4 +9,5 @@ export interface ThemedSwitchProps extends SwitchProps {
     label?: string;
     size?: "sm" | "md" | "lg";
 }
+/** Themed Chakra `Switch` wrapper; a caller-supplied `sx` replaces (not merges with) the built-in checked/unchecked track color. */
 export declare const InputSwitch: ({ switchText, switchTextPosition, id, isChecked, label, isInformation, informationMessage, isRequired, size, ...props }: ThemedSwitchProps) => import("react/jsx-runtime").JSX.Element;