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

package/dist/Components/Dropdown/DropDown.js

@@ -6,6 +6,7 @@ const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const lucide_react_1 = require("lucide-react");
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
 // Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
 const SIZE_MAP = {
@@ -15,18 +16,122 @@ const SIZE_MAP = {
     lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
     xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
 };
-const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, }, ref) => {
+const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const { isOpen, onToggle, onClose } = (0, react_2.useDisclosure)();
+    const { isOpen, onOpen, onToggle, onClose } = (0, react_2.useDisclosure)();
     const dropdownRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [menuPos, setMenuPos] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
     const s = (_b = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "md"]) !== null && _b !== void 0 ? _b : SIZE_MAP.md;
+    const menuId = (0, react_1.useId)();
+    // Roving-tabindex keyboard nav for the menu (ARIA APG menu-button pattern):
+    // real DOM focus moves through the items, so no aria-activedescendant is needed.
+    const buttonTriggerRef = (0, react_1.useRef)(null);
+    const textTriggerRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)([]);
+    const pendingFocusIndex = (0, react_1.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    // The trigger is never unmounted, so — unlike focusing into the portaled
+    // menu on open — this can focus synchronously.
+    const focusTrigger = () => {
+        var _a, _b;
+        (_b = ((_a = buttonTriggerRef.current) !== null && _a !== void 0 ? _a : textTriggerRef.current)) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    const openAndFocus = (index) => {
+        var _a;
+        if (isOpen) {
+            // Already open (trigger still holds focus, e.g. after Enter/Space) — the
+            // portal is already mounted, so focus directly; no need to wait a frame,
+            // and the effect below only reacts to isOpen *changing* anyway.
+            setActiveIndex(index);
+            (_a = itemRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            pendingFocusIndex.current = index;
+            onOpen();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            const idx = pendingFocusIndex.current;
+            pendingFocusIndex.current = null;
+            if (idx !== null) {
+                setActiveIndex(idx);
+                // Chakra's <Portal> mounts its children a tick after this effect runs
+                // (it resolves its target node via its own effect first), so the menu
+                // item ref isn't attached yet here — a frame gets us past that.
+                requestAnimationFrame(() => { var _a; return (_a = itemRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.focus(); });
+            }
+        }
+        else {
+            setActiveIndex(0);
+        }
+    }, [isOpen]);
     const handleListItemClick = (optionId, optionLabel) => {
         onClose();
         handleOptionSelect(optionId, optionLabel);
     };
+    const handleTriggerKeyDown = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            openAndFocus(0);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            openAndFocus(options.length - 1);
+        }
+        else if (e.key === "Escape" && isOpen) {
+            e.preventDefault();
+            onClose();
+        }
+        else if (e.key === "Enter" || e.key === " ") {
+            // Explicit rather than relying on native button activation: the text
+            // trigger is a styled Flex (no default action to rely on), and jsdom's
+            // `fireEvent` does not simulate a real browser's Enter/Space-activates-
+            // button default action either.
+            e.preventDefault();
+            onToggle();
+        }
+    };
+    const handleMenuKeyDown = (e) => {
+        var _a, _b, _c;
+        if (options.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            const next = (activeIndex + step + options.length) % options.length;
+            setActiveIndex(next);
+            (_a = itemRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            setActiveIndex(0);
+            (_b = itemRefs.current[0]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            const last = options.length - 1;
+            setActiveIndex(last);
+            (_c = itemRefs.current[last]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+            focusTrigger();
+        }
+        else if (e.key === "Tab") {
+            onClose();
+        }
+    };
+    const handleItemKeyDown = (e, optionId, optionLabel) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleListItemClick(optionId, optionLabel);
+            focusTrigger();
+        }
+    };
     // The menu is portaled to <body> (so it sits above everything). Anchor it to
     // the trigger, then clamp to the viewport so it never overflows off-screen
     // (e.g. when the trigger sits near the right or bottom edge).
@@ -62,11 +167,16 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         if (!isOpen)
             return;
         updateMenuPos();
-        window.addEventListener("scroll", updateMenuPos, true);
-        window.addEventListener("resize", updateMenuPos);
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updateMenuPos);
+        window.addEventListener("scroll", onReposition, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", onReposition);
         return () => {
-            window.removeEventListener("scroll", updateMenuPos, true);
-            window.removeEventListener("resize", updateMenuPos);
+            onReposition.cancel();
+            window.removeEventListener("scroll", onReposition, true);
+            window.removeEventListener("resize", onReposition);
         };
     }, [isOpen, updateMenuPos]);
     (0, react_1.useEffect)(() => {
@@ -97,35 +207,39 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     };
     const Chevron = isVisibleIconShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
-        var _a, _b, _c, _d;
-        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onToggle, size: s.btn, colorScheme: "primary", borderRadius: "0.5rem", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { onClick: onToggle, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700], transition: "color 0.15s ease", _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[600] }, style: dropDownButtonStyle, role: "button", "aria-haspopup": "menu", "aria-expanded": isOpen, children: [DropdownIcon, text, Chevron] }));
+        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: buttonTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
+        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], transition: "color 0.15s ease", _hover: { color: theme.colors.accentText }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        return ((0, jsx_runtime_1.jsx)(react_2.List, { bg: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#fff", border: `0.063rem solid ${(_f = (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.boxborder) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[200]}`, borderRadius: "0.625rem", boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
                 scrollbarWidth: "thin",
-                scrollbarColor: `${(_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[300]} transparent`,
+                scrollbarColor: `${theme.colors.gray[300]} transparent`,
                 "&::-webkit-scrollbar": { width: "6px" },
                 "&::-webkit-scrollbar-thumb": {
-                    background: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray) === null || _m === void 0 ? void 0 : _m[300],
-                    borderRadius: "3px",
+                    background: theme.colors.gray[300],
+                    borderRadius: "base",
                 },
                 "&::-webkit-scrollbar-thumb:hover": {
-                    background: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[400],
+                    background: theme.colors.gray[400],
                 },
-            }, style: ListStyle, children: options.map((option) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-                return ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { onClick: () => handleListItemClick(option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "0.375rem", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
-                        bg: (_j = (_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[100],
-                        color: (_o = (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.primary) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[600],
-                    }, borderBottom: divider
-                        ? `0.063rem solid ${(_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.boxborder) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray[200]}`
-                        : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray) === null || _w === void 0 ? void 0 : _w[500], style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
-                            // fontWeight={400}
-                            style: LabelStyle, children: option.label })] }, option.id));
-            }) }));
+            }, style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
+                    itemRefs.current[index] = node;
+                }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
+                    handleListItemClick(option.id, option.label);
+                    focusTrigger();
+                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
+                    bg: theme.colors.primary.opacity[8],
+                    color: theme.colors.accentText,
+                }, _focus: {
+                    bg: theme.colors.primary.opacity[8],
+                    color: theme.colors.accentText,
+                }, borderBottom: divider
+                    ? `0.063rem solid ${theme.colors.boxborder[100]}`
+                    : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
+                        // fontWeight={400}
+                        style: LabelStyle, children: option.label })] }, option.id))) }));
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
 });

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -19,6 +19,8 @@ export type DropdownProps = {
     /** @deprecated Use `size` instead. Kept for backward compatibility. */
     optionsSize?: "sm" | "md" | "lg";
     divider?: boolean;
+    /** Accessible name for the trigger when it renders icon-only (no `ButtonText`/`text`). */
+    ariaLabel?: string;
 };
 type Option = {
     id: string | number;
@@ -26,4 +28,3 @@ type Option = {
     image?: React.ElementType;
 };
 export {};
-//# sourceMappingURL=DropdownProps.d.ts.map

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

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

package/dist/Components/Editor/Editor.js

@@ -32,17 +32,20 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
-const jodit_react_1 = __importDefault(require("jodit-react"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const joditThemeVars_1 = require("./joditThemeVars");
+// Loaded on render, not on import: jodit-react's browser bundle touches `self` at module
+// scope, which crashes any Node/SSR consumer importing this package's barrel.
+const JoditEditor = react_1.default.lazy(async () => {
+    var _a;
+    const mod = (await Promise.resolve().then(() => __importStar(require("jodit-react"))));
+    return { default: ((_a = mod.default) !== null && _a !== void 0 ? _a : mod) };
+});
 const Editor = react_1.default.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,
@@ -52,25 +55,22 @@ const Editor = react_1.default.memo(function Editor({ value, key, config, editor
     // even in dark mode. Pointing Jodit's own `popupRoot` config at this wrapper keeps popups
     // inside the subtree those variables cascade into.
     const [popupRoot, setPopupRoot] = (0, react_1.useState)(null);
-    const stableConfig = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return ({
-            theme: (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff") ? "dark" : "default",
-            popupRoot,
-            // `config` spread as `Record<string, unknown>`: mixing a literal `popupRoot` key with a
-            // spread of the raw `DeepPartial<Config>` type (Jodit's huge recursive config type) blows
-            // past TS's type-instantiation depth limit (TS2589) — the cast avoids that without
-            // weakening the memo's actual return type, which is still asserted below.
-            ...config,
-        });
-    }, 
+    const stableConfig = (0, react_1.useMemo)(() => ({
+        theme: (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "default",
+        popupRoot,
+        // `config` spread as `Record<string, unknown>`: mixing a literal `popupRoot` key with a
+        // spread of the raw `DeepPartial<Config>` type (Jodit's huge recursive config type) blows
+        // past TS's type-instantiation depth limit (TS2589) — the cast avoids that without
+        // weakening the memo's actual return type, which is still asserted below.
+        ...config,
+    }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(config), theme, popupRoot]);
     // Jodit's own `theme: "dark"|"default"` only switches which of ITS selectors apply — those
     // are still driven by Jodit's hardcoded gray/blue CSS variables, not this app's palette. This
     // feeds our actual active colors into those variables, scoped to this instance (see
     // `joditThemeVars.ts`).
-    const themeVars = (0, react_1.useMemo)(() => { var _a, _b; return (0, joditThemeVars_1.getJoditThemeVars)(theme.colors, (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff")); }, [theme]);
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: themeVars, children: (0, jsx_runtime_1.jsx)(jodit_react_1.default, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }));
+    const themeVars = (0, react_1.useMemo)(() => (0, joditThemeVars_1.getJoditThemeVars)(theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [theme]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: themeVars, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(JoditEditor, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }) }));
 });
 exports.default = Editor;

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

@@ -1,4 +1,4 @@
-import JoditEditor from "jodit-react";
+import type JoditEditor from "jodit-react";
 import type { ComponentProps } from "react";
 type JoditEditorProps = ComponentProps<typeof JoditEditor>;
 export type EditorProps = Pick<JoditEditorProps, "value" | "config" | "className" | "onChange" | "onBlur"> & {
@@ -6,4 +6,3 @@ export type EditorProps = Pick<JoditEditorProps, "value" | "config" | "className
     key?: string | number;
 };
 export {};
-//# sourceMappingURL=EditorProps.d.ts.map

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/VerifyEmailOtp.js

@@ -7,12 +7,12 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const lucide_react_1 = require("lucide-react");
 function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.primary[500] }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { borderRadius: "md", border: "0.063rem solid", 
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, (0, jsx_runtime_1.jsx)("br", {}), "your new Pixel Account"] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { borderRadius: "md", border: "0.063rem solid", 
                         // [800], not [300]: WCAG 1.4.11 needs >=3.0 for a control boundary against any
                         // named surface up to `muted` (lightest); [300] fails there, [800] clears all
                         // with margin.
                         borderColor: theme.colors.boxborder[800], backgroundColor: theme.colors.background[200], _focus: {
                             borderColor: theme.colors.primary[500],
                             boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
-                        } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.primary[700], fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+                        } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
 }

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

@@ -14,29 +14,29 @@ const sizeMap = {
     md: { badge: "72px", icon: 30, title: "1.1rem", desc: "0.9rem", gap: 3, pad: 10 },
     lg: { badge: "96px", icon: 40, title: "1.35rem", desc: "1rem", gap: 4, pad: 14 },
 };
+const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
+    ? colors[scheme]
+    : scheme === "gray"
+        ? colors.gray
+        : colors.semantic[scheme];
 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, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = sizeMap[size];
-    // Resolve accent palette: theme.colors[colorScheme] or theme.colors.semantic[*]
-    const semantic = ["success", "error", "warning", "info"];
-    const palette = semantic.includes(colorScheme)
-        ? theme.colors.semantic[colorScheme]
-        : theme.colors[colorScheme];
-    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 palette = scaleFor(theme.colors, colorScheme);
+    const accent = palette[500];
+    const accentSoft = palette[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: theme.colors.gray[50], 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",
+                borderColor: theme.colors.gray[200],
+                borderRadius: "2xl",
                 bg: "transparent",
             }
             : {};
     return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? ((0, jsx_runtime_1.jsx)(react_1.Image, { src: image, alt: title, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: {
                     boxShadow: `0 0 0 8px ${accentSoft}55`,
-                }, children: (0, jsx_runtime_1.jsx)(IconComp, { size: s.icon, strokeWidth: 1.75 }) })), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.title, fontWeight: 600, color: (_h = (_g = theme.colors.gray) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : theme.colors.text[900], mt: 1, children: title }), description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.desc, color: (_k = (_j = theme.colors.gray) === null || _j === void 0 ? void 0 : _j[500]) !== null && _k !== void 0 ? _k : theme.colors.text[400], mt: 1, maxW: "380px", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+                }, children: (0, jsx_runtime_1.jsx)(IconComp, { size: s.icon, strokeWidth: 1.75 }) })), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.title, fontWeight: 600, color: theme.colors.gray[800], mt: 1, children: title }), description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.desc, color: theme.colors.gray[500], mt: 1, maxW: "380px", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
 };
 exports.default = EmptyState;

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.textMuted, 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.textMuted }) }), (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.textMuted, 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.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.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.boxborder[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.semanticText.success, 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