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

package/dist/esm/Components/DatePicker/TimeOnlyPicker.js

@@ -10,7 +10,7 @@ import { TimePickerInput } from "./TimePickerInput.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
 export const TimeOnlyPicker = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md", } = props;
     const theme = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
@@ -73,6 +73,6 @@ export const TimeOnlyPicker = (props) => {
                                             onOpen();
                                     }, error: error, size: sizeKey }) }) }) }), _jsx(PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", bg: theme.colors.background[50], children: _jsxs(PopoverBody, { children: [_jsx(TimePicker, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
                                         handleTimePickerChange(updatedDate);
-                                    } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: (_c = theme.colors.boxborder) === null || _c === void 0 ? void 0 : _c[300], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+                                    } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
 };
 export default TimeOnlyPicker;

package/dist/esm/Components/DatePicker/TimePicker.js

@@ -3,7 +3,6 @@ import { useState, useEffect } from "react";
 import { Select, HStack } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const theme = useCustomTheme();
     const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
     const deriveDisplayHour = (rawHour) => {
@@ -53,18 +52,18 @@ const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
         updateTime(hour, minute, newMeridiem);
     };
     const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return (_jsxs(HStack, { spacing: 1.5, w: "100%", children: [_jsx(Select, { value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[50], borderColor: (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[800], _focus: {
+    return (_jsxs(HStack, { spacing: 1.5, w: "100%", children: [_jsx(Select, { value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
                     borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${(_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary}`,
+                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
                 }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) => {
                     const value = is12HourFormat ? i + 1 : i;
                     return (_jsx("option", { value: value, children: value.toString().padStart(2, "0") }, value));
-                }) }), _jsx(Select, { value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[50], borderColor: (_e = theme.colors.boxborder) === null || _e === void 0 ? void 0 : _e[800], _focus: {
+                }) }), _jsx(Select, { value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
                     borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${(_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: 60 }, (_, i) => (_jsx("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && (_jsxs(Select, { value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: (_g = theme.colors.gray) === null || _g === void 0 ? void 0 : _g[50], borderColor: (_h = theme.colors.boxborder) === null || _h === void 0 ? void 0 : _h[800], _focus: {
+                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
+                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: 60 }, (_, i) => (_jsx("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && (_jsxs(Select, { value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
                     borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${(_j = theme.colors.boxShadow) === null || _j === void 0 ? void 0 : _j.primary}`,
+                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
                 }, _hover: { borderColor: theme.colors.primary[500] }, children: [_jsx("option", { value: "AM", children: "AM" }), _jsx("option", { value: "PM", children: "PM" })] }))] }));
 };
 export default TimePicker;

package/dist/esm/Components/DatePicker/TimePickerInput.js

@@ -89,7 +89,6 @@ const caretFromDigitIndex = (digitIndex, digitsLen) => {
 };
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
 export const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const theme = useCustomTheme();
     const sizeKey = typeof size === "string" ? size : "md";
     const iconPx = getTextInputIconSizePx(sizeKey);
@@ -401,12 +400,12 @@ export const TimePickerInput = ({ value, onChange, dateFormat, disabled = false,
             inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return (_jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey, bg: (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[50], borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[800], _focus: {
-                    borderColor: error ? (_f = (_e = theme.colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[500] : theme.colors.primary[500],
+    return (_jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey, bg: theme.colors.gray[50], borderColor: error ? theme.colors.semanticText.error : theme.colors.boxborder[500], _focus: {
+                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
                     boxShadow: error
-                        ? `0 0 0 0.125rem ${(_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.error}`
-                        : `0 0 0 0.125rem ${(_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.primary}`,
+                        ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
+                        : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
                 }, _hover: {
-                    borderColor: error ? (_k = (_j = theme.colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500] : theme.colors.primary[500],
-                } }), _jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconWrapperSx, children: _jsx(ClockIcon, { size: iconPx, color: theme.colors.gray[500] }) }) })] }));
+                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
+                } }), _jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconWrapperSx, children: _jsx(ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
 };

package/dist/esm/Components/Divider/Divider.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Divider as ChakraDivider } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const VeritcalDivider = () => {
-    var _a;
     const { colors } = useCustomTheme();
-    return (_jsx(ChakraDivider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[500] }));
+    return (_jsx(ChakraDivider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: colors.boxborder[500] }));
 };
 export default VeritcalDivider;

package/dist/esm/Components/Drawer/Drawer.js

@@ -12,7 +12,6 @@ export const DrawerFooter = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
 export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant = "solid", children, }) {
-    var _a;
     const { colors } = useCustomTheme();
     const isReactElement = (child) => {
         return child !== null && typeof child === "object" && "type" in child;
@@ -20,5 +19,5 @@ export default function Drawer({ isOpen, onClose, placement = "right", size = "x
     const header = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === DrawerHeader);
     const body = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === DrawerBody);
     const footer = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === DrawerFooter);
-    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [_jsx(DrawerCloseButton, {}), header && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", children: header })), _jsx(ChakraDrawerBody, { children: body && body }), footer && _jsx(ChakraDrawerFooter, { borderTopWidth: "1px", children: footer })] })] }));
+    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { bg: colors.background[50], children: [_jsx(DrawerCloseButton, {}), header && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", children: header })), _jsx(ChakraDrawerBody, { children: body && body }), footer && _jsx(ChakraDrawerFooter, { borderTopWidth: "1px", children: footer })] })] }));
 }

package/dist/esm/Components/Dropdown/DropDown.js

@@ -205,43 +205,39 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
     };
     const Chevron = isVisibleIconShow ? (_jsx(Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: _jsx(ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
-        var _a, _b, _c, _d;
         const ButtonToggle = (_jsx(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: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = (_jsxs(Flex, { ref: textTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, 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", 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] }));
+        const TextToggle = (_jsxs(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, _q, _r;
-        return (_jsx(List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, 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 : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.backgroundColor) === null || _e === void 0 ? void 0 : _e.light, border: `0.063rem solid ${(_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.boxborder) === null || _g === void 0 ? void 0 : _g[200]) !== null && _h !== void 0 ? _h : (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray[200]}`, borderRadius: "xl", boxShadow: (_k = theme.shadows) === null || _k === void 0 ? void 0 : _k.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
+        var _a;
+        return (_jsx(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: `${(_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray) === null || _m === void 0 ? void 0 : _m[300]} transparent`,
+                scrollbarColor: `${theme.colors.gray[300]} transparent`,
                 "&::-webkit-scrollbar": { width: "6px" },
                 "&::-webkit-scrollbar-thumb": {
-                    background: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[300],
+                    background: theme.colors.gray[300],
                     borderRadius: "base",
                 },
                 "&::-webkit-scrollbar-thumb:hover": {
-                    background: (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray) === null || _r === void 0 ? void 0 : _r[400],
+                    background: theme.colors.gray[400],
                 },
-            }, style: ListStyle, children: options.map((option, index) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
-                return (_jsxs(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: (_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],
-                    }, _focus: {
-                        bg: (_u = (_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s.opacity) === null || _t === void 0 ? void 0 : _t[8]) !== null && _u !== void 0 ? _u : (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray[100],
-                        color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.primary) === null || _x === void 0 ? void 0 : _x[700]) !== null && _y !== void 0 ? _y : (_0 = (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.primary) === null || _0 === void 0 ? void 0 : _0[600],
-                    }, borderBottom: divider
-                        ? `0.063rem solid ${(_3 = (_2 = (_1 = theme.colors) === null || _1 === void 0 ? void 0 : _1.boxborder) === null || _2 === void 0 ? void 0 : _2[100]) !== null && _3 !== void 0 ? _3 : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[200]}`
-                        : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_6 = (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.gray) === null || _6 === void 0 ? void 0 : _6[500], style: ImageStyle })), _jsx(Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
-                            // fontWeight={400}
-                            style: LabelStyle, children: option.label })] }, option.id));
-            }) }));
+            }, style: ListStyle, children: options.map((option, index) => (_jsxs(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) && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), _jsx(Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
+                        // fontWeight={400}
+                        style: LabelStyle, children: option.label })] }, option.id))) }));
     };
     return (_jsxs(Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && (_jsx(Portal, { children: _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/esm/Components/Editor/Editor.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { Suspense, useMemo, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_CANVAS, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { getJoditThemeVars } from "./joditThemeVars.js";
 // 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.
@@ -20,25 +20,22 @@ const Editor = React.memo(function Editor({ value, key, config, editorRef, class
     // 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] = useState(null);
-    const stableConfig = useMemo(() => {
-        var _a, _b;
-        return ({
-            theme: isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS) ? "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 = useMemo(() => ({
+        theme: 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 = useMemo(() => { var _a, _b; return getJoditThemeVars(theme.colors, isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS)); }, [theme]);
+    const themeVars = useMemo(() => getJoditThemeVars(theme.colors, isDarkCanvas(theme.colors.backgroundColor.main)), [theme]);
     return (_jsx(Box, { ref: setPopupRoot, sx: themeVars, children: _jsx(Suspense, { fallback: null, children: _jsx(JoditEditor, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }) }));
 });
 export default Editor;

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

@@ -4,12 +4,12 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { MailCheck } from "lucide-react";
 export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = useCustomTheme();
-    return (_jsxs(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: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.primary[500] }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, children: _jsx(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) => (_jsx(PinInputField, { borderRadius: "md", border: "0.063rem solid", 
+    return (_jsxs(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: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.accentText }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, children: _jsx(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) => (_jsx(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))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.primary[700], fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+                        } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
 }

package/dist/esm/Components/EmptyState/EmptyState.js

@@ -12,29 +12,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 = 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 = 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: "2xl" }
+        ? { 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],
+                borderColor: theme.colors.gray[200],
                 borderRadius: "2xl",
                 bg: "transparent",
             }
             : {};
     return (_jsxs(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 ? (_jsx(Image, { src: image, alt: title, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined })) : (_jsx(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: _jsx(IconComp, { size: s.icon, strokeWidth: 1.75 }) })), _jsxs(Box, { children: [_jsx(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 && (_jsx(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 && (_jsx(Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+                }, children: _jsx(IconComp, { size: s.icon, strokeWidth: 1.75 }) })), _jsxs(Box, { children: [_jsx(Text, { fontSize: s.title, fontWeight: 600, color: theme.colors.gray[800], mt: 1, children: title }), description && (_jsx(Text, { fontSize: s.desc, color: theme.colors.gray[500], mt: 1, maxW: "380px", children: description }))] }), action && (_jsx(Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
 };
 export default EmptyState;

package/dist/esm/Components/FieldSelectModal/FieldSelectModal.js

@@ -28,6 +28,6 @@ const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select
     return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [_jsx(ModalOverlay, { bg: "blackAlpha.400", backdropFilter: "blur(4px)" }), _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: [_jsxs(ModalHeader, { pb: 2, children: [_jsx(Text, { fontSize: "lg", fontWeight: 600, children: title }), _jsxs(Text, { fontSize: "sm", color: theme.colors.gray[500], fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { overflowY: "auto", children: [_jsxs(Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && (_jsxs(InputGroup, { size: "sm", maxW: "220px", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.gray[400] }) }), _jsx(Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => (_jsx(Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: _jsx(Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && (_jsxs(Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), _jsxs(ModalFooter, { gap: 3, children: [_jsx(Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(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: [_jsxs(ModalHeader, { pb: 2, children: [_jsx(Text, { fontSize: "lg", fontWeight: 600, children: title }), _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { overflowY: "auto", children: [_jsxs(Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && (_jsxs(InputGroup, { size: "sm", maxW: "220px", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => (_jsx(Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: _jsx(Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && (_jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), _jsxs(ModalFooter, { gap: 3, children: [_jsx(Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
 };
 export default FieldSelectModal;

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

@@ -56,7 +56,7 @@ export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hide
         if (kind === "video") {
             return (_jsx(Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
         }
-        return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [_jsx(FileQuestion, { size: 48, color: theme.colors.gray[400] }), _jsx(Text, { color: theme.colors.gray[600], fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && (_jsxs(Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[500], color: theme.colors.white, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [_jsx(Download, { size: 16 }), " Download file"] }))] }));
+        return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [_jsx(FileQuestion, { size: 48, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && (_jsxs(Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[500], color: theme.colors.onPrimary, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [_jsx(Download, { size: 16 }), " Download file"] }))] }));
     };
     return (_jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [_jsx(ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }), _jsxs(MotionContent
             // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
@@ -64,7 +64,7 @@ export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hide
             , { 
                 // 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: "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: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semantic.success[500], icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(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: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[100], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(ModalBody, { p: 5, children: renderBody() })] })] }));
 };
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 export const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {

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

@@ -4,17 +4,17 @@ import { Box, Text, VStack, Icon, List, ListItem, ListIcon, CloseButton, HStack,
 import { useDropzone } from "react-dropzone";
 import { Upload, FileText, Eye } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { mimeMap, toMB } from "./constants.js";
 import Modal, { ModalBody, ModalHeader } from "../Modal/Modal.js";
 const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, }) => {
-    var _a, _b, _c, _d;
     const { colors, radii } = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
     const [previewUrl, setPreviewUrl] = React.useState(null);
     const [previewTitle, setPreviewTitle] = React.useState(null);
     const [errors, setErrors] = React.useState([]);
-    const bg = (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[50];
-    const border = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[300];
+    const bg = colors.gray[50];
+    const border = colors.boxborder[500];
     const mappedAccept = acceptTypes.reduce((acc, ext) => {
         const mime = mimeMap[ext];
         if (mime) {
@@ -53,27 +53,21 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
             setErrors(messages);
         },
     });
-    return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100] }, position: "relative", children: [_jsx("input", { ...getInputProps() }), _jsxs(VStack, { spacing: 2, children: [_jsx(Icon, { as: Upload, boxSize: 6 }), _jsx(Text, { fontWeight: "medium", children: "Drag and drop files here" }), _jsxs(Text, { fontSize: "sm", color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[500], children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => {
-                            var _a;
-                            return (_jsx(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 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => {
-                                    var _a, _b, _c, _d, _e, _f, _g;
-                                    return (_jsxs(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: [_jsxs(ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
-                                                                    ".hover-icon": {
-                                                                        opacity: 1,
-                                                                        bg: (_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));
-                                                                    setPreviewTitle(file.name);
-                                                                    onOpen();
-                                                                }, children: [_jsx("img", { src: URL.createObjectURL(file), alt: file.name, style: {
-                                                                            width: "100%",
-                                                                            height: "100%",
-                                                                            objectFit: "cover",
-                                                                            borderRadius: radii.base,
-                                                                        } }), _jsx(Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: _jsx(Eye, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[100] }) })] })) : (_jsx(ListIcon, { as: FileText, color: (_e = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _e === void 0 ? void 0 : _e[500], boxSize: 8 })), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontSize: "sm", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500], children: [toMB(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && (_jsx(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 && (_jsx(Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index));
-                                }) })] }))] }), _jsxs(Modal, { isOpen: isOpen, onClose: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [_jsx("input", { ...getInputProps() }), _jsxs(VStack, { spacing: 2, children: [_jsx(Icon, { as: Upload, boxSize: 6 }), _jsx(Text, { fontWeight: "medium", children: "Drag and drop files here" }), _jsxs(Text, { fontSize: "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+                                                                ".hover-icon": {
+                                                                    opacity: 1,
+                                                                    bg: colors.secondary.opacity[16],
+                                                                },
+                                                            }, onClick: () => {
+                                                                setPreviewUrl(URL.createObjectURL(file));
+                                                                setPreviewTitle(file.name);
+                                                                onOpen();
+                                                            }, children: [_jsx("img", { src: URL.createObjectURL(file), alt: file.name, style: {
+                                                                        width: "100%",
+                                                                        height: "100%",
+                                                                        objectFit: "cover",
+                                                                        borderRadius: radii.base,
+                                                                    } }), _jsx(Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: _jsx(Eye, { color: colors.background[100] }) })] })) : (_jsx(ListIcon, { as: FileText, color: accentTextOnCanvas(colors.blue, colors.background[50]), boxSize: 8 })), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontSize: "sm", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: [toMB(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && (_jsx(CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (_jsx(Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), _jsxs(Modal, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);

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

@@ -4,12 +4,11 @@ import { Box, Text, Grid, Flex, HStack, Image, IconButton, Tooltip, } from "@cha
 import { X } from "lucide-react";
 import { useToaster } from "../Toaster/Toaster.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
-    var _a, _b;
     const { showToast } = useToaster();
     const { colors } = useCustomTheme();
-    const accentColor = accentTextOnCanvas(colors.blue, (_b = (_a = colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS);
+    const accentColor = accentTextOnCanvas(colors.blue, colors.backgroundColor.main);
     const [uploadedFiles, setUploadedFiles] = useState([]);
     const [, setIsDragOver] = useState(false);
     // const [error, setError] = useState<string | null>(null);
@@ -70,9 +69,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 (_jsxs(Box, { maxW: "500px", mx: "auto", p: 6, children: [_jsxs(Text, { fontSize: "sm", color: "gray.600", mb: 4, children: ["Files Uploaded:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), _jsxs(Box, { border: "1px dashed", borderColor: "gray.300", borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && (_jsx(Box, { children: _jsx(Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                                return (_jsxs(Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: "gray.200", borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [_jsxs(HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? (_jsx(Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : (_jsx(Box, { boxSize: "28px", borderRadius: "sm", bg: (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.medium, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: (_e = (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[600]) !== null && _e !== void 0 ? _e : (_f = colors.text) === null || _f === void 0 ? void 0 : _f[600], children: (_g = file.name.split(".").pop()) === null || _g === void 0 ? void 0 : _g.toUpperCase() })), _jsxs(Box, { minW: "0", children: [_jsx(Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: (_j = (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = colors.text) === null || _k === void 0 ? void 0 : _k[600], children: ["(", formatFileSize(file.size), ")"] })] })] }), _jsx(HStack, { spacing: 1, children: _jsx(Tooltip, { label: "Remove", children: _jsx(IconButton, { "aria-label": "Remove", icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
-                            }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), _jsxs(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: [_jsx(Box, { children: _jsxs(Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", _jsx(Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), _jsxs(Text, { fontSize: "xs", color: "gray.500", children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
+    return (_jsxs(Box, { maxW: "500px", mx: "auto", p: 6, children: [_jsxs(Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", _jsxs(Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), _jsxs(Box, { border: "1px dashed", borderColor: colors.boxborder[500], borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && (_jsx(Box, { children: _jsx(Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
+                                var _a;
+                                return (_jsxs(Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [_jsxs(HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? (_jsx(Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : (_jsx(Box, { boxSize: "28px", borderRadius: "sm", bg: colors.gray[200], display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: colors.textMuted, children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), _jsxs(Box, { minW: "0", children: [_jsx(Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), _jsx(HStack, { spacing: 1, children: _jsx(Tooltip, { label: "Remove", children: _jsx(IconButton, { "aria-label": "Remove", icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
+                            }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), _jsxs(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: [_jsx(Box, { children: _jsxs(Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", _jsx(Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 export default FileUploader;