pixelize-design-library 2.4.1 → 2.4.2-beta.0

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

@@ -18,4 +18,3 @@ import type { PaletteProps } from "../../Theme/tokens/types";
  * this still branches on `isDark`.
  */
 export declare const getJoditThemeVars: (colors: PaletteProps, isDark: boolean) => CSSProperties;
-//# sourceMappingURL=joditThemeVars.d.ts.map

package/dist/Components/Editor/joditThemeVars.js

@@ -40,6 +40,15 @@ const getJoditThemeVars = (colors, isDark) => {
     if (isDark) {
         return {
             ...shared,
+            // `.jodit-workplace`'s own background rule in jodit.css (`.jodit-container:not(.jodit_inline)
+            // .jodit-workplace { background-color: var(--jd-color-background-default) }`) is NOT scoped
+            // under `.jodit_theme_dark` — that scope only re-themes the *border* on this selector, never
+            // the background. `--jd-color-background-default` itself is declared once, at `:root`, as
+            // `var(--jd-color-white)`, and our `--jd-color-white` override lives on this instance's wrapper
+            // (a descendant), so it never reaches `:root`'s own computed value. Left unset here, the
+            // workplace canvas fell back to Jodit's own white default even with `.jodit_theme_dark` active
+            // — this is the reported "canvas renders white in dark mode" bug.
+            "--jd-color-background-default": colors.backgroundColor.main, // .jodit-workplace canvas bg
             "--jd-dark-background-color": colors.backgroundColor.main, // canvas / toolbar-box / wysiwyg bg
             "--jd-dark-toolbar-color": colors.backgroundColor.secondary, // toolbar + status-bar bg
             "--jd-dark-text-color": colors.text[900], // body/button/status-bar ink

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

@@ -1,3 +1,2 @@
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
 export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=VerifyEmailOtp.d.ts.map

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

@@ -10,4 +10,3 @@ export type VerifyEmailOtpProps = {
     isInvalid?: boolean;
     styles?: React.CSSProperties;
 };
-//# sourceMappingURL=VerifyEmailOtpProps.d.ts.map

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

@@ -2,4 +2,3 @@ import React from "react";
 import { EmptyStateProps } from "./EmptyStateProps";
 declare const EmptyState: React.FC<EmptyStateProps>;
 export default EmptyState;
-//# sourceMappingURL=EmptyState.d.ts.map

package/dist/Components/EmptyState/EmptyState.js

@@ -26,12 +26,12 @@ const EmptyState = ({ title = "No data found", description, icon: IconComp = luc
     const accent = (_a = palette === null || palette === void 0 ? void 0 : palette[500]) !== null && _a !== void 0 ? _a : theme.colors.primary[500];
     const accentSoft = (_b = palette === null || palette === void 0 ? void 0 : palette[50]) !== null && _b !== void 0 ? _b : theme.colors.primary[50];
     const containerStyles = variant === "subtle"
-        ? { bg: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : theme.colors.backgroundColor.subtle, borderRadius: "16px" }
+        ? { bg: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : theme.colors.backgroundColor.subtle, borderRadius: "2xl" }
         : variant === "dashed"
             ? {
                 border: "2px dashed",
                 borderColor: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : theme.colors.border[500],
-                borderRadius: "16px",
+                borderRadius: "2xl",
                 bg: "transparent",
             }
             : {};

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

@@ -26,4 +26,3 @@ export interface EmptyStateProps {
     /** Escape hatch for extra Chakra styles on the outer container. */
     sx?: BoxProps["sx"];
 }
-//# sourceMappingURL=EmptyStateProps.d.ts.map

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

@@ -14,4 +14,3 @@ export type FeedbackFormProps = {
     isDisabled?: boolean;
 };
 export default function FeedbackForm(props: FeedbackFormProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=FeedbackForm.d.ts.map

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

@@ -24,4 +24,3 @@ export interface FieldSelectModalProps {
 }
 declare const FieldSelectModal: React.FC<FieldSelectModalProps>;
 export default FieldSelectModal;
-//# sourceMappingURL=FieldSelectModal.d.ts.map

package/dist/Components/FieldSelectModal/FieldSelectModal.js

@@ -27,9 +27,9 @@ const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select
     const toggle = (name) => setSelected((prev) => prev.includes(name) ? prev.filter((f) => f !== name) : [...prev, name]);
     const isAllSelected = selected.length === fields.length && fields.length > 0;
     const isIndeterminate = selected.length > 0 && selected.length < fields.length;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: "blackAlpha.400", backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(MotionModalContent, { borderRadius: "16px", overflow: "hidden", maxH: "85vh", 
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: "blackAlpha.400", backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(MotionModalContent, { borderRadius: "2xl", overflow: "hidden", maxH: "85vh", 
                 // Chakra's default dialog bg (`colors.white`, or `gray.700` under `_dark`) resolves to a
                 // white/light-grey panel against our palettes, so the surface must be set explicitly.
-                bg: theme.colors.background[50], initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { pb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: 600, children: title }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { overflowY: "auto", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", maxW: "220px", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.gray[400] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "8px" })] }))] }), (0, jsx_runtime_1.jsx)(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
+                bg: theme.colors.background[50], initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { pb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: 600, children: title }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { overflowY: "auto", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", maxW: "220px", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.gray[400] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), (0, jsx_runtime_1.jsx)(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
 };
 exports.default = FieldSelectModal;

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

@@ -4,4 +4,3 @@ export declare const FilePreview: React.FC<FilePreviewProps>;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 export declare const FilePreviewTrigger: React.FC<FilePreviewTriggerProps>;
 export default FilePreview;
-//# sourceMappingURL=FilePreview.d.ts.map

package/dist/Components/FilePreview/FilePreview.js

@@ -40,7 +40,6 @@ const downloadFile = async (fileUrl, fileName) => {
     }
 };
 const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownload = false, size = "xl", }) => {
-    var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [zoom, setZoom] = (0, react_1.useState)(1);
     const [rotation, setRotation] = (0, react_1.useState)(0);
@@ -54,17 +53,16 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
         onClose();
     };
     const renderBody = () => {
-        var _a, _b, _c, _d;
         if (kind === "image") {
             return ((0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: `scale(${zoom}) rotate(${rotation}deg)`, transition: "transform 0.2s ease", objectFit: "contain" }) }));
         }
         if (kind === "pdf") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "embed", src: fileUrl, type: "application/pdf", width: "100%", height: "70vh", borderRadius: "8px" }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "embed", src: fileUrl, type: "application/pdf", width: "100%", height: "70vh", borderRadius: "lg" }));
         }
         if (kind === "video") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "8px" }));
+            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: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[400]) !== null && _b !== void 0 ? _b : "#A0AEC0" }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#4A5568", 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: "8px", bg: theme.colors.primary[500], color: theme.colors.white, 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.gray[400] }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.gray[600], 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.white, 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
@@ -72,14 +70,15 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
             , { 
                 // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
                 // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-                bg: theme.colors.background[50], borderRadius: "16px", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#EDF2F7", children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: (_e = (_d = (_c = theme.colors.semantic) === null || _c === void 0 ? void 0 : _c.success) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "#16A34A", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
+                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semantic.success[500], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
 };
 exports.FilePreview = FilePreview;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const kind = fileType || inferKind(fileUrl, fileName);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "8px", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "8px" })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: "gray.100", borderRadius: "8px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })), (0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: "blackAlpha.500", color: "white", opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })), (0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: "blackAlpha.500", color: "white", opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
 };
 exports.FilePreviewTrigger = FilePreviewTrigger;
 exports.default = exports.FilePreview;

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

@@ -24,4 +24,3 @@ export interface FilePreviewTriggerProps {
     thumbHeight?: string;
     hideDownload?: boolean;
 }
-//# sourceMappingURL=FilePreviewProps.d.ts.map

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

@@ -2,4 +2,3 @@ import React from "react";
 import { FileUploaderProps } from "./FileUploadProps";
 declare const FileUpload: React.FC<FileUploaderProps>;
 export default FileUpload;
-//# sourceMappingURL=FileUpload.d.ts.map

package/dist/Components/FileUpload/FileUpload.js

@@ -43,7 +43,7 @@ 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 = {}, }) => {
     var _a, _b, _c, _d;
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    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);
@@ -106,8 +106,8 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                                                                             width: "100%",
                                                                             height: "100%",
                                                                             objectFit: "cover",
-                                                                            borderRadius: "0.25rem",
-                                                                        } }), (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: (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[100] }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (_e = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _e === void 0 ? void 0 : _e[500], 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: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500], 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: (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[600] }))] }), (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: 5 }))] }, index));
+                                                                            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: (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[100] }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (_e = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _e === void 0 ? void 0 : _e[500], 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: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500], 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: (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[600] }))] }), (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);

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

@@ -9,4 +9,3 @@ export type FileUploaderProps = {
     maxFiles?: number;
     progress?: Record<string, number>;
 };
-//# sourceMappingURL=FileUploadProps.d.ts.map

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

@@ -1,4 +1,3 @@
 import { MimeMap } from "./FileUploadProps";
 export declare const mimeMap: MimeMap;
 export declare const toMB: (size: number) => string;
-//# sourceMappingURL=constants.d.ts.map

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

@@ -2,4 +2,3 @@ import React from "react";
 import { FileUploaderProps } from "./FileUploaderProps";
 declare const FileUploader: React.FC<FileUploaderProps>;
 export default FileUploader;
-//# sourceMappingURL=FileUploader.d.ts.map

package/dist/Components/FileUploader/FileUploader.js

@@ -11,7 +11,7 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     var _a, _b;
     const { showToast } = (0, Toaster_1.useToaster)();
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const accentColor = (0, accentText_1.accentTextOnCanvas)(colors.blue, (_b = (_a = colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
+    const accentColor = (0, accentText_1.accentTextOnCanvas)(colors.blue, (_b = (_a = colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
     const [uploadedFiles, setUploadedFiles] = (0, react_1.useState)([]);
     const [, setIsDragOver] = (0, react_1.useState)(false);
     // const [error, setError] = useState<string | null>(null);
@@ -73,8 +73,8 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     // ✅ Convert ["png","pdf","zip"] → ".png,.pdf,.zip" for input accept
     const acceptString = acceptTypes.map((ext) => `.${ext}`).join(",");
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "500px", mx: "auto", p: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "gray.600", mb: 4, children: ["Files Uploaded:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px dashed", borderColor: "gray.300", borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: "gray.200", borderRadius: "md", pl: 1, bg: "gray.50", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: "gray.600", children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.600", children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: "gray.200", borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.medium, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: (_e = (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[600]) !== null && _e !== void 0 ? _e : (_f = colors.text) === null || _f === void 0 ? void 0 : _f[600], children: (_g = file.name.split(".").pop()) === null || _g === void 0 ? void 0 : _g.toUpperCase() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: (_j = (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = colors.text) === null || _k === void 0 ? void 0 : _k[600], children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
                             }) }) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, transition: "all 0.2s", onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", onClick: handleBrowseClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.500", children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 exports.default = FileUploader;

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

@@ -11,4 +11,3 @@ export type FileUploaderProps = {
     acceptTypes?: string[];
     onFilesChange?: (files: UploadedFile[]) => void;
 };
-//# sourceMappingURL=FileUploaderProps.d.ts.map

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

@@ -41,4 +41,3 @@ export type FilterSidebarProps = {
 };
 declare const FilterSidebar: React.FC<FilterSidebarProps>;
 export default FilterSidebar;
-//# sourceMappingURL=FilterSidebar.d.ts.map

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -22,7 +22,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // `gray[50]` (this file's hover fill throughout) is a pale light-mode tint that collapses to
     // ~1.08:1 against the dark-mode canvas — see `filterHoverStyle.ts` for the fix + numbers.
-    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
+    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
     const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors, isDark), [theme.colors, isDark]);
     const [openPrice, setOpenPrice] = (0, react_1.useState)({});
     // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
@@ -126,7 +126,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                         border: none;
                         cursor: pointer;
                       }
-                    ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: "gray.200", borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), (0, jsx_runtime_1.jsx)("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
+                    ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.gray[200], borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "md", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "md", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), (0, jsx_runtime_1.jsx)("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
                                             const min = Math.min(Number(e.target.value), currentMax - (step || 1));
                                             const nextVal = [min, currentMax];
                                             setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
@@ -237,7 +237,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                         justifyContent: "space-between",
                         padding: 0,
                         background: theme.colors.gray[50],
-                        borderRadius: 8,
+                        borderRadius: theme.radii.lg,
                         border: `1px solid ${theme.colors.gray[200]}`,
                         marginBottom: 6,
                     },
@@ -252,7 +252,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                     : {
                         padding: panelPadding,
                         background: theme.colors.background[50],
-                        borderRadius: 8,
+                        borderRadius: theme.radii.lg,
                         overflow: "visible",
                     },
             },

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

@@ -9,4 +9,3 @@ import type { PaletteProps } from "../../Theme/tokens/types";
  * here, unlike the Table row hover fix.
  */
 export declare const getFilterHoverBg: (colors: PaletteProps, isDark: boolean) => string;
-//# sourceMappingURL=filterHoverStyle.d.ts.map

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

@@ -5,4 +5,3 @@ declare const FormWrapper: ({ icon, text, children, }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default FormWrapper;
-//# sourceMappingURL=FormWrapper.d.ts.map

package/dist/Components/Form/FormWrapper.js

@@ -6,6 +6,6 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormWrapper = ({ icon, text, children, }) => {
     var _a, _b, _c, _d, _e;
     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: (_a = colors === null || colors === void 0 ? void 0 : colors.header) === null || _a === void 0 ? void 0 : _a[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: (_b = colors === null || colors === void 0 ? void 0 : colors.header) === null || _b === void 0 ? void 0 : _b[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "0.25rem", bg: (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[50], border: `0.075rem solid ${(_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500]}`, boxShadow: `0 0.063rem 0.125rem 0 ${(_e = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _e === void 0 ? void 0 : _e.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, size: "1rem", color: (_a = colors === null || colors === void 0 ? void 0 : colors.header) === null || _a === void 0 ? void 0 : _a[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: (_b = colors === null || colors === void 0 ? void 0 : colors.header) === null || _b === void 0 ? void 0 : _b[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "base", bg: (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[50], border: `0.075rem solid ${(_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500]}`, boxShadow: `0 0.063rem 0.125rem 0 ${(_e = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary}`, p: "1.5rem", children: children })] }));
 };
 exports.default = FormWrapper;

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

@@ -19,4 +19,3 @@ import { HeaderProps } from "./HeaderProps";
 export declare const pickActiveAccent: (primary: ColorScale, canvas: string) => string;
 declare const Header: FC<HeaderProps>;
 export default Header;
-//# sourceMappingURL=Header.d.ts.map

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

@@ -20,4 +20,3 @@ declare const HeaderActions: ({ select, edit, create, }: {
     };
 }) => import("react/jsx-runtime").JSX.Element;
 export default HeaderActions;
-//# sourceMappingURL=HeaderActions.d.ts.map

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

@@ -46,4 +46,3 @@ export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pic
     onClose?: () => void;
 };
 export {};
-//# sourceMappingURL=HeaderProps.d.ts.map

package/dist/Components/Header/components/desktopMenu.d.ts

@@ -1,4 +1,3 @@
 import { DesktopMenuProps } from "../HeaderProps";
 declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }: DesktopMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DesktopMenu;
-//# sourceMappingURL=desktopMenu.d.ts.map

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

@@ -37,7 +37,7 @@ const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg,
                                                     // fill this row switches to — onFilled picks whichever of white/black
                                                     // actually clears AA against that fill instead.
                                                     color: isActive(subItem.href)
-                                                        ? (0, accentText_1.onFilled)(activeBg, (_d = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _d !== void 0 ? _d : "#fff", (_e = colors === null || colors === void 0 ? void 0 : colors.black) !== null && _e !== void 0 ? _e : "#000")
+                                                        ? (0, accentText_1.onFilled)(activeBg, (_d = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _d !== void 0 ? _d : accentText_1.DEFAULT_WHITE, (_e = colors === null || colors === void 0 ? void 0 : colors.black) !== null && _e !== void 0 ? _e : accentText_1.DEFAULT_BLACK)
                                                         : (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));
                                 }) }) }) }))] }, item.label));
         }) }));

package/dist/Components/Header/components/mobileMenu.d.ts

@@ -1,4 +1,3 @@
 import { MobileMenuProps } from "../HeaderProps";
 declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MobileMenu;
-//# sourceMappingURL=mobileMenu.d.ts.map

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

@@ -2,4 +2,3 @@ import React from "react";
 import { InputProps } from "./InputProps";
 declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }: InputProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
-//# sourceMappingURL=Input.d.ts.map

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

@@ -17,4 +17,3 @@ export type InputProps = {
     isInformation?: boolean;
     informationMessage?: string;
 };
-//# sourceMappingURL=InputProps.d.ts.map

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

@@ -1,4 +1,3 @@
 import { PhoneNumberInputProps } from "./PhoneNumberInputProps";
 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;
-//# sourceMappingURL=PhoneNumberInput.d.ts.map

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

@@ -34,4 +34,3 @@ export type PhoneNumberInputProps = {
     maxW?: string;
     showCountrySelect?: boolean;
 };
-//# sourceMappingURL=PhoneNumberInputProps.d.ts.map

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

@@ -9,4 +9,3 @@ export interface ThemedSwitchProps extends SwitchProps {
     size?: "sm" | "md" | "lg";
 }
 export declare const InputSwitch: ({ switchText, switchTextPosition, id, isChecked, label, isInformation, informationMessage, isRequired, size, ...props }: ThemedSwitchProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=InputSwitch.d.ts.map

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

@@ -2,4 +2,3 @@ import React from "react";
 import { TextInputProps } from "./TextInputProps";
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-//# sourceMappingURL=TextInput.d.ts.map

package/dist/Components/Input/TextInput.styles.d.ts

@@ -1,3 +1,2 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const Input: ComponentStyleConfig;
-//# sourceMappingURL=TextInput.styles.d.ts.map

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

@@ -11,7 +11,7 @@ exports.Input = {
             pb: "0.813rem",
             display: "flex",
             alignItems: "center",
-            borderRadius: "0.5rem",
+            borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
                 fontStyle: "italic",

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

@@ -22,4 +22,3 @@ export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "p
     minW?: string;
     maxW?: string;
 };
-//# sourceMappingURL=TextInputProps.d.ts.map

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

@@ -8,4 +8,3 @@ export declare function getTextInputIconSizePx(size: string | undefined): number
  * affect them because they set explicit width/height.
  */
 export declare function getTextInputIconWrapperSx(size: string | undefined): SystemStyleObject;
-//# sourceMappingURL=textInputIconSize.d.ts.map

package/dist/Components/InputTextArea/InputTextArea.d.ts

@@ -1,3 +1,12 @@
-import { InputTextAreaProps } from "./InputTextAreaProps";
-export default function InputTextArea({ label, placeholder, value, onChange, size, resize, width, isDisabled, isReadOnly, isRequired, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete }: InputTextAreaProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=InputTextArea.d.ts.map
+declare const InputTextArea: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").TextareaProps, "resize" | "id" | "onBlur" | "onChange" | "variant" | "size" | "isDisabled" | "name" | "value" | "placeholder" | "isReadOnly" | "isRequired" | "autoComplete"> & {
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    width?: string | number;
+    rows?: number;
+    height?: string | number;
+    isInformation?: boolean;
+    informationMessage?: string;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default InputTextArea;

package/dist/Components/InputTextArea/InputTextArea.js

@@ -3,12 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = InputTextArea;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const FormLabel_1 = require("../Common/FormLabel");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
-function InputTextArea({ label, placeholder, value, onChange, size = "md", resize = "both", width = 500, isDisabled, isReadOnly, isRequired = false, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete = "" }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [label && (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_1.Textarea, { id: id, placeholder: placeholder, value: value, onChange: onChange, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
-}
+const InputTextArea = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [label && (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_2.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 && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+});
+exports.default = InputTextArea;

package/dist/Components/InputTextArea/InputTextArea.style.d.ts

@@ -1,3 +1,2 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const Textarea: ComponentStyleConfig;
-//# sourceMappingURL=InputTextArea.style.d.ts.map

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

@@ -8,7 +8,7 @@ exports.Textarea = {
         letterSpacing: "0.044rem",
         pt: "0.813rem",
         pb: "0.813rem",
-        borderRadius: "0.5rem",
+        borderRadius: "lg",
         transition: "border-color 0.2s, box-shadow 0.2s",
         _placeholder: {
             fontStyle: "italic",

package/dist/Components/InputTextArea/InputTextAreaProps.d.ts

@@ -1,5 +1,5 @@
 import { TextareaProps } from "@chakra-ui/react";
-export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "id" | "size" | "resize" | "isDisabled" | "isReadOnly" | "isRequired" | "variant" | "autoComplete"> & {
+export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "onBlur" | "name" | "id" | "size" | "resize" | "isDisabled" | "isReadOnly" | "isRequired" | "variant" | "autoComplete"> & {
     label?: string;
     error?: boolean;
     errorMessage?: string;
@@ -10,4 +10,3 @@ export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "
     isInformation?: boolean;
     informationMessage?: string;
 };
-//# sourceMappingURL=InputTextAreaProps.d.ts.map

package/dist/Components/KanbanBoard/AccountCard.d.ts

@@ -10,4 +10,3 @@ declare const AccountCard: React.MemoExoticComponent<({ account, onDelete, onOpe
     isDeletable?: boolean;
 }) => import("react/jsx-runtime").JSX.Element>;
 export default AccountCard;
-//# sourceMappingURL=AccountCard.d.ts.map