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

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -9,17 +9,16 @@ const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [name, setName] = (0, react_1.useState)(initialName);
     (0, react_1.useEffect)(() => {
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
                                 // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
                                 // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
                                 // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
-                                borderColor: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _e === void 0 ? void 0 : _e[800]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[400], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
+                                borderColor: colors.boxborder[800], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 exports.default = EditModuleModal;

package/dist/Components/DatePicker/CalendarPanel.js

@@ -12,7 +12,6 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, }) => {
-    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rangeBg = theme.colors.primary.opacity[16];
     const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
@@ -29,7 +28,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
         border: "1px solid",
         // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[300]
         // is decorative and measured 1.85:1 on the dark canvas — the select read as borderless.
-        borderColor: (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[500],
+        borderColor: theme.colors.boxborder[500],
         borderRadius: "md",
         px: 2,
         py: 1,
@@ -134,7 +133,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                                     if (!disableToday) {
                                         onDaySelect(new Date(today));
                                     }
-                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { size: 16 }) })] })] }), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : ((0, jsx_runtime_1.jsx)(react_1.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.gray[500], py: 1, children: day }, day))) })), (0, jsx_runtime_1.jsx)(react_1.Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] }));
+                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { size: 16 }) })] })] }), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : ((0, jsx_runtime_1.jsx)(react_1.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), (0, jsx_runtime_1.jsx)(react_1.Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] }));
 };
 exports.CalendarPanel = CalendarPanel;
 exports.default = exports.CalendarPanel;

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -24,7 +24,7 @@ const setTimeFrom = (base, time) => {
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
 const RangeDatePicker = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const sizeKey = typeof size === "string" ? size : "md";
@@ -171,17 +171,17 @@ const RangeDatePicker = (props) => {
                                         }, onClick: () => {
                                             if (!isOpen)
                                                 handleOpen();
-                                        }, borderColor: error ? (_f = (_e = theme.colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[500] : undefined, _focus: {
-                                            borderColor: error ? (_h = (_g = theme.colors.semantic) === null || _g === void 0 ? void 0 : _g.error) === null || _h === void 0 ? void 0 : _h[500] : theme.colors.primary[500],
+                                        }, borderColor: error ? theme.colors.semanticText.error : undefined, _focus: {
+                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
                                             boxShadow: error
-                                                ? `0 0 0 1px ${(_k = (_j = theme.colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]}`
+                                                ? `0 0 0 1px ${theme.colors.semanticText.error}`
                                                 : `0 0 0 1px ${theme.colors.primary[500]}`,
                                         }, _hover: {
-                                            borderColor: error ? (_m = (_l = theme.colors.semantic) === null || _l === void 0 ? void 0 : _l.error) === null || _m === void 0 ? void 0 : _m[500] : undefined,
-                                        }, cursor: "pointer" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: (_o = theme.colors.boxborder) === null || _o === void 0 ? void 0 : _o[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
+                                            borderColor: error ? theme.colors.semanticText.error : undefined,
+                                        }, cursor: "pointer" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
                                             const [from, to] = p.getRange();
                                             applyPreset(from, to);
-                                        }, children: p.label }, p.label))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: startTimeBaseDate, onChange: (updated) => {
+                                        }, children: p.label }, p.label))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: startTimeBaseDate, onChange: (updated) => {
                                                         if (!tempRangeStart) {
                                                             setTempRangeStart(updated);
                                                             return;
@@ -194,7 +194,7 @@ const RangeDatePicker = (props) => {
                                                             return;
                                                         }
                                                         setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1, children: "End time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: endTimeBaseDate, onChange: (updated) => {
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: endTimeBaseDate, onChange: (updated) => {
                                                         if (!tempRangeEnd) {
                                                             setTempRangeEnd(updated);
                                                             return;
@@ -207,7 +207,7 @@ const RangeDatePicker = (props) => {
                                                             return;
                                                         }
                                                         setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (_p = theme.colors.boxborder) === null || _p === void 0 ? void 0 : _p[300], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 };
 exports.RangeDatePicker = RangeDatePicker;
 exports.default = exports.RangeDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -225,7 +225,7 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     return { value: buf, completed: buf.length >= segmentLength };
 };
 const SingleDatePicker = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b;
     const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const sizeKey = typeof size === "string" ? size : "md";
@@ -945,16 +945,16 @@ const SingleDatePicker = (props) => {
                         return;
                     }
                     finalize();
-                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], borderColor: error
-                                            ? (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500]
-                                            : (_f = theme.colors.boxborder) === null || _f === void 0 ? void 0 : _f[800], _focus: {
-                                            borderColor: error ? (_h = (_g = theme.colors.semantic) === null || _g === void 0 ? void 0 : _g.error) === null || _h === void 0 ? void 0 : _h[500] : theme.colors.primary[500],
+                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, 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 ${(_j = theme.colors.boxShadow) === null || _j === void 0 ? void 0 : _j.error}`
-                                                : `0 0 0 0.125rem ${(_k = theme.colors.boxShadow) === null || _k === void 0 ? void 0 : _k.primary}`,
+                                                ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
+                                                : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
                                         }, _hover: {
-                                            borderColor: error ? (_m = (_l = theme.colors.semantic) === null || _l === void 0 ? void 0 : _l.error) === null || _m === void 0 ? void 0 : _m[500] : theme.colors.primary[500],
-                                        }, cursor: "text", boxShadow: error ? `0 0 0 0.125rem ${(_o = theme.colors.boxShadow) === null || _o === void 0 ? void 0 : _o.error}` : `` }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: (e) => {
+                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
+                                        }, cursor: "text", boxShadow: error ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}` : `` }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: (e) => {
                                             e.stopPropagation();
                                             if (!isOpen) {
                                                 handleOpen();
@@ -962,7 +962,7 @@ const SingleDatePicker = (props) => {
                                             else {
                                                 onClose();
                                             }
-                                        }, style: { cursor: "pointer" }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: (_p = theme.colors.boxborder) === null || _p === void 0 ? void 0 : _p[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                        }, style: { cursor: "pointer" }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
                                             setIsTyping(false);
@@ -970,7 +970,7 @@ const SingleDatePicker = (props) => {
                                             setTempDate(updatedDate);
                                             setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                                             setIsTyping(false);
-                                        }, disabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (_q = theme.colors.boxborder) === null || _q === void 0 ? void 0 : _q[300], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                        }, disabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                 setTempDate(null);
                                                 requestClose(null);
                                             }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -16,7 +16,7 @@ const TimePickerInput_1 = require("./TimePickerInput");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
 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 = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
@@ -79,7 +79,7 @@ const TimeOnlyPicker = (props) => {
                                             onOpen();
                                     }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [(0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
                                         handleTimePickerChange(updatedDate);
-                                    } }), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                                    } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 };
 exports.TimeOnlyPicker = TimeOnlyPicker;
 exports.default = exports.TimeOnlyPicker;

package/dist/Components/DatePicker/TimePicker.js

@@ -5,7 +5,6 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
     const deriveDisplayHour = (rawHour) => {
@@ -55,18 +54,18 @@ const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
         updateTime(hour, minute, newMeridiem);
     };
     const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1.5, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1.5, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsx)("option", { value: value, children: value.toString().padStart(2, "0") }, value));
-                }) }), (0, jsx_runtime_1.jsx)(react_2.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: {
+                }) }), (0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && ((0, jsx_runtime_1.jsxs)(react_2.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) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)("option", { value: "AM", children: "AM" }), (0, jsx_runtime_1.jsx)("option", { value: "PM", children: "PM" })] }))] }));
 };
 exports.default = TimePicker;

package/dist/Components/DatePicker/TimePickerInput.js

@@ -92,7 +92,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");
 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 = (0, useCustomTheme_1.useCustomTheme)();
     const sizeKey = typeof size === "string" ? size : "md";
     const iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
@@ -404,13 +403,13 @@ const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeh
             inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.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],
-                } }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.gray[500] }) }) })] }));
+                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
+                } }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
 };
 exports.TimePickerInput = TimePickerInput;

package/dist/Components/Divider/Divider.js

@@ -4,8 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const VeritcalDivider = () => {
-    var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Divider, { 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 ((0, jsx_runtime_1.jsx)(react_1.Divider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: colors.boxborder[500] }));
 };
 exports.default = VeritcalDivider;

package/dist/Components/Drawer/Drawer.js

@@ -22,7 +22,6 @@ const DrawerFooter = ({ children }) => {
 };
 exports.DrawerFooter = DrawerFooter;
 function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant = "solid", children, }) {
-    var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isReactElement = (child) => {
         return child !== null && typeof child === "object" && "type" in child;
@@ -30,5 +29,5 @@ function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant
     const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerHeader);
     const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerBody);
     const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerFooter);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), header && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", children: header })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { children: body && body }), footer && (0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", children: footer })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { bg: colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), header && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", children: header })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { children: body && body }), footer && (0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", children: footer })] })] }));
 }

package/dist/Components/Dropdown/DropDown.js

@@ -207,43 +207,39 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     };
     const Chevron = isVisibleIconShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
-        var _a, _b, _c, _d;
         const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: buttonTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_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 = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], transition: "color 0.15s ease", _hover: { color: theme.colors.accentText }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-        return ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
                 scrollbarWidth: "thin",
-                scrollbarColor: `${(_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 ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
-                        itemRefs.current[index] = node;
-                    }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
-                        handleListItemClick(option.id, option.label);
-                        focusTrigger();
-                    }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_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) && ((0, jsx_runtime_1.jsx)(react_2.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 })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
-                            // fontWeight={400}
-                            style: LabelStyle, children: option.label })] }, option.id));
-            }) }));
+            }, style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
+                    itemRefs.current[index] = node;
+                }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
+                    handleListItemClick(option.id, option.label);
+                    focusTrigger();
+                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
+                    bg: theme.colors.primary.opacity[8],
+                    color: theme.colors.accentText,
+                }, _focus: {
+                    bg: theme.colors.primary.opacity[8],
+                    color: theme.colors.accentText,
+                }, borderBottom: divider
+                    ? `0.063rem solid ${theme.colors.boxborder[100]}`
+                    : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
+                        // fontWeight={400}
+                        style: LabelStyle, children: option.label })] }, option.id))) }));
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
 });

package/dist/Components/Editor/Editor.js

@@ -55,25 +55,22 @@ const Editor = react_1.default.memo(function Editor({ value, key, config, editor
     // even in dark mode. Pointing Jodit's own `popupRoot` config at this wrapper keeps popups
     // inside the subtree those variables cascade into.
     const [popupRoot, setPopupRoot] = (0, react_1.useState)(null);
-    const stableConfig = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return ({
-            theme: (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.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 = (0, react_1.useMemo)(() => ({
+        theme: (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "default",
+        popupRoot,
+        // `config` spread as `Record<string, unknown>`: mixing a literal `popupRoot` key with a
+        // spread of the raw `DeepPartial<Config>` type (Jodit's huge recursive config type) blows
+        // past TS's type-instantiation depth limit (TS2589) — the cast avoids that without
+        // weakening the memo's actual return type, which is still asserted below.
+        ...config,
+    }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(config), theme, popupRoot]);
     // Jodit's own `theme: "dark"|"default"` only switches which of ITS selectors apply — those
     // are still driven by Jodit's hardcoded gray/blue CSS variables, not this app's palette. This
     // feeds our actual active colors into those variables, scoped to this instance (see
     // `joditThemeVars.ts`).
-    const themeVars = (0, react_1.useMemo)(() => { var _a, _b; return (0, joditThemeVars_1.getJoditThemeVars)(theme.colors, (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS)); }, [theme]);
+    const themeVars = (0, react_1.useMemo)(() => (0, joditThemeVars_1.getJoditThemeVars)(theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [theme]);
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: themeVars, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(JoditEditor, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }) }));
 });
 exports.default = Editor;

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

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

package/dist/Components/EmptyState/EmptyState.js

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

package/dist/Components/FieldSelectModal/FieldSelectModal.js

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

package/dist/Components/FilePreview/FilePreview.js

@@ -62,7 +62,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
         if (kind === "video") {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
         }
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.gray[400] }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[500], color: theme.colors.white, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[500], color: theme.colors.onPrimary, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(MotionContent
             // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
@@ -70,7 +70,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
             , { 
                 // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
                 // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semantic.success[500], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
+                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[100], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
 };
 exports.FilePreview = FilePreview;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */