pixelize-design-library 2.3.31 → 2.4.1-beta.10

package/dist/Components/Editor/joditThemeVars.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getJoditThemeVars = void 0;
+/**
+ * Maps this library's active palette to the CSS custom properties Jodit's own light/dark theme
+ * CSS reads (`node_modules/jodit/es2021/jodit.css`). Jodit's `theme: "dark" | "default"` config
+ * only toggles which of ITS OWN selectors apply (`.jodit_theme_dark`, `.jodit-ui-input_theme_dark`,
+ * …) — those selectors are still driven by Jodit's own hardcoded `--jd-dark-*` / `--jd-color-*`
+ * custom properties (a generic mid-gray `#575757` canvas, a blue `#1e88e5` accent, …), so toggling
+ * the theme alone renders the editor in Jodit's palette instead of ours. This is what shipped the
+ * reported "editor is not black" bug in dark mode.
+ *
+ * `PaletteProps.background`/`.text` are role-stable ColorScales whose LIGHTNESS (not index)
+ * flips between modes — e.g. `background[50]` is `#ffffff` in light and near-black in dark, and
+ * `text[900]` is near-black ink in light and near-white ink in dark (see
+ * `Theme/tokens/builders/buildDarkPalette.ts`). So the *same* token expression already resolves
+ * correctly in both modes; only the Jodit CSS-variable NAME differs (`--jd-dark-*` only takes
+ * effect inside `.jodit_theme_dark`, `--jd-color-*` is what the default theme reads), which is why
+ * this still branches on `isDark`.
+ */
+const getJoditThemeVars = (colors, isDark) => {
+    const shared = {
+        // Not remapped by `.jodit_theme_dark` in Jodit's own CSS, so one declaration covers both modes.
+        "--jd-color-border-selected": colors.primary[500],
+        // `--jd-color-panel` backs the search & replace box (`.jodit-ui-search__box`) and any other
+        // panel that isn't re-themed under `.jodit_theme_dark` (that scope overrides `--jd-color-border`
+        // itself to a hardcoded `#6b6b6b`, but never touches `--jd-color-panel`) — unset in dark mode it
+        // fell back to Jodit's own `#f9f9f9`, the reported "Search & Replace panel white" bug. Role-stable
+        // like `background`/`text`: the SAME expression already resolved correctly for the light branch.
+        "--jd-color-panel": colors.backgroundColor.secondary,
+        // Dialog/insert-link/insert-image inputs (`.jodit-ui-input__input`, `.jodit-ui-select__input`)
+        // read `--jd-color-white` as their OWN background regardless of theme unless Jodit applied its
+        // `_theme_dark` modifier class to that specific element (which reads `--jd-color-gray` instead,
+        // set below) — leaving either unset is what shipped the "white inputs" bug, since portalled
+        // dialog inputs don't reliably get the modifier class. `background[50]` is this library's
+        // established "white surface, darkens in dark mode" token (same pattern as the DatePicker
+        // month/year `<select>`), so one declaration is correct in both modes.
+        "--jd-color-white": colors.background[50],
+    };
+    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
+            "--jd-dark-icon-color": colors.text[700], // toolbar icon fill/stroke
+            // Was `colors.backgroundColor.muted` — computed at ~1.3:1 against the canvas (a near-miss
+            // that shipped: both values sit within ~11 lightness points of each other down near L7-18,
+            // where WCAG contrast collapses non-linearly). This backs BOTH the toolbar/dialog-button
+            // hover fill (paired with `--jd-dark-background-color` as the flipped-to-dark hover text —
+            // see `.jodit_theme_dark .jodit-ui-button:hover` in jodit.css) and the `.jodit-select`/
+            // `.jodit-input` background (paired with `--jd-dark-border-color` as its text). `background[900]`
+            // is this palette's dark-mode "bright highlight" rung (~9.7-10.7:1 against the canvas across
+            // brands) — verified numerically before this change, not assumed.
+            "--jd-dark-background-ligher": colors.background[900],
+            "--jd-dark-border-color": colors.boxborder[500], // select/input/dialog-header border
+            // `_theme_dark`-suffixed input/select variants read this instead of `--jd-color-white` above.
+            "--jd-color-gray": colors.background[50],
+        };
+    }
+    return {
+        ...shared,
+        "--jd-color-background-default": colors.backgroundColor.main, // workplace/popup bg
+        "--jd-color-text": colors.text[900], // base button/status-bar ink
+        "--jd-color-icon": colors.text[700], // base icon fill/stroke
+        "--jd-color-button-background-hover": colors.backgroundColor.muted, // hover bg
+        "--jd-color-border": colors.boxborder[500], // container/workplace border
+    };
+};
+exports.getJoditThemeVars = getJoditThemeVars;

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

@@ -1 +1 @@
-{"version":3,"file":"VerifyEmailOtp.d.ts","sourceRoot":"","sources":["../../../../src/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAa5D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,UAAU,EACV,QAAQ,EACR,UAAU,EACV,WAAgB,EAChB,IAAQ,EACR,WAAW,EACX,KAAK,EACL,UAAkB,EAClB,SAAiB,EACjB,MAAM,GACP,EAAE,mBAAmB,2CA6ErB"}
+{"version":3,"file":"VerifyEmailOtp.d.ts","sourceRoot":"","sources":["../../../../src/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAa5D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,UAAU,EACV,QAAQ,EACR,UAAU,EACV,WAAgB,EAChB,IAAQ,EACR,WAAW,EACX,KAAK,EACL,UAAkB,EAClB,SAAiB,EACjB,MAAM,GACP,EAAE,mBAAmB,2CAgFrB"}

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -7,7 +7,11 @@ 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", borderColor: theme.colors.boxborder[300], backgroundColor: theme.colors.background[200], _focus: {
+    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", 
+                        // [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" })] }) })] }));

package/dist/Components/EmptyState/EmptyState.js

@@ -26,17 +26,17 @@ 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 : "#F8FAFC", 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: "16px" }
         : variant === "dashed"
             ? {
                 border: "2px dashed",
-                borderColor: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : "#E2E8F0",
+                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",
                 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 : "#1A202C", 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 : "#718096", 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: (_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 }))] }));
 };
 exports.default = EmptyState;

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

@@ -1 +1 @@
-{"version":3,"file":"FieldSelectModal.d.ts","sourceRoot":"","sources":["../../../src/Components/FieldSelectModal/FieldSelectModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAsB5D,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,gDAAgD;IAChD,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAID,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6HrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"FieldSelectModal.d.ts","sourceRoot":"","sources":["../../../src/Components/FieldSelectModal/FieldSelectModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAsB5D,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,gDAAgD;IAChD,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAID,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgIrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Components/FieldSelectModal/FieldSelectModal.js

@@ -8,7 +8,6 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const MotionModalContent = (0, framer_motion_1.motion)(react_2.ModalContent);
 const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select Fields", confirmText = "Apply", loadingText = "Applying...", isLoading = false, defaultSelected, columns = 2, searchable, }) => {
-    var _a, _b, _c, _d, _e, _f;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [selected, setSelected] = (0, react_1.useState)([]);
     const [query, setQuery] = (0, react_1.useState)("");
@@ -28,6 +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", 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: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : "#718096", 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: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : "#A0AEC0" }) }), (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: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500]) !== null && _f !== void 0 ? _f : "#718096", 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 })] })] })] }));
+    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", 
+                // 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 })] })] })] }));
 };
 exports.default = FieldSelectModal;

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

@@ -1 +1 @@
-{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../src/Components/FilePreview/FilePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAyBxC,OAAO,EAEL,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,oBAAoB,CAAC;AA6B5B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsKlD,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuEhE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../src/Components/FilePreview/FilePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAyBxC,OAAO,EAEL,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,oBAAoB,CAAC;AA6B5B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyKlD,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAwEhE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/FilePreview/FilePreview.js

@@ -66,14 +66,22 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
         }
         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.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, { 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() })] })] }));
+    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
+            // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
+            , { 
+                // 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() })] })] }));
 };
 exports.FilePreview = FilePreview;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {
+    var _a, _b;
+    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: "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: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#EDF2F7", 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 })] }));
 };
 exports.FilePreviewTrigger = FilePreviewTrigger;
 exports.default = exports.FilePreview;

package/dist/Components/FileUpload/FileUpload.js

@@ -92,11 +92,11 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: (_a = colors === null || colors === void 0 ? void 0 : colors.red) === null || _a === void 0 ? void 0 : _a[600], children: err }, idx));
                         }) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => {
-                                    var _a, _b, _c, _d, _e, _f;
-                                    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors === null || colors === void 0 ? void 0 : colors.white, children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+                                    var _a, _b, _c, _d, _e, _f, _g;
+                                    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
                                                                     ".hover-icon": {
                                                                         opacity: 1,
-                                                                        bg: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[16],
+                                                                        bg: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[16],
                                                                     },
                                                                 }, onClick: () => {
                                                                     setPreviewUrl(URL.createObjectURL(file));
@@ -107,7 +107,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                                                                             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: (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[100] }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (_d = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _d === void 0 ? void 0 : _d[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: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[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: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[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));
+                                                                        } }), (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));
                                 }) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../../../src/Components/FileUploader/FileUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,OAAO,EAAE,iBAAiB,EAAgB,MAAM,qBAAqB,CAAC;AAEtE,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4M7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../../../src/Components/FileUploader/FileUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,OAAO,EAAE,iBAAiB,EAAgB,MAAM,qBAAqB,CAAC;AAItE,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8M7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/FileUploader/FileUploader.js

@@ -5,8 +5,13 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const Toaster_1 = require("../Toaster/Toaster");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
+    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 [uploadedFiles, setUploadedFiles] = (0, react_1.useState)([]);
     const [, setIsDragOver] = (0, react_1.useState)(false);
     // const [error, setError] = useState<string | null>(null);
@@ -67,9 +72,9 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     const handleBrowseClick = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
     // ✅ Convert ["png","pdf","zip"] → ".png,.pdf,.zip" for input accept
     const acceptString = acceptTypes.map((ext) => `.${ext}`).join(",");
-    return ((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: "blue.500", 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));
-                            }) }) })), (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: "blue.400", 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(", "), "."] })] })] })] }));
+    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, _b, _c, _d, _e, _f, _g;
+                                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 : "#e5e7eb", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: (_d = (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#4A5568", children: (_e = file.name.split(".").pop()) === null || _e === void 0 ? void 0 : _e.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: (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#4A5568", 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/FilterSidebar/FilterSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSidebar.d.ts","sourceRoot":"","sources":["../../../src/Components/FilterSidebar/FilterSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAMnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC;AAE3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4qB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FilterSidebar.d.ts","sourceRoot":"","sources":["../../../src/Components/FilterSidebar/FilterSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAQnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGzD,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC;AAE3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8rB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}