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

package/dist/Components/CustomModulesTable/CustomModulesTable.js

@@ -29,16 +29,16 @@ const DEFAULT_LABELS = {
     deleteConfirmPrefix: "Are you sure you want to delete",
 };
 const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, isDeleting = false, onUpdateModule, onDeleteModule, labels: labelOverrides, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [editTarget, setEditTarget] = (0, react_1.useState)(null);
     const [deleteTarget, setDeleteTarget] = (0, react_1.useState)(null);
     const border = (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : "#E2E8F0";
-    const surface = (_e = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _e !== void 0 ? _e : "#FFFFFF";
-    const muted = (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500]) !== null && _g !== void 0 ? _g : "#64748B";
-    const heading = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : "#1E293B";
-    const headBg = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : "#F8FAFC";
+    const surface = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    const heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    const headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
@@ -47,7 +47,10 @@ const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, is
         borderColor: border,
         py: 3,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_m = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _m !== void 0 ? _m : "", isLoading: isUpdating, onSubmit: async (name) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => {
+                        var _a, _b;
+                        return ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md", startColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[100], endColor: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[400] }, idx));
+                    }) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_o = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _o !== void 0 ? _o : "", isLoading: isUpdating, onSubmit: async (name) => {
                     if (editTarget) {
                         await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
                             moduleId: editTarget.module_id,

package/dist/Components/CustomModulesTable/DeleteModuleModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteModuleModal.d.ts","sourceRoot":"","sources":["../../../src/Components/CustomModulesTable/DeleteModuleModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiEvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"DeleteModuleModal.d.ts","sourceRoot":"","sources":["../../../src/Components/CustomModulesTable/DeleteModuleModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuEvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/Components/CustomModulesTable/DeleteModuleModal.js

@@ -9,8 +9,8 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_h = (_f = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#FEF2F2", color: (_o = (_l = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[500]) !== null && _o !== void 0 ? _o : "#EF4444", children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[600], fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 600, color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[800], children: moduleName }), "?"] }), (0, jsx_runtime_1.jsxs)(react_1.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.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.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.jsxs)(react_1.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], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_j = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#FEF2F2", color: (_p = (_m = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _k === void 0 ? void 0 : _k.error) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[500]) !== null && _p !== void 0 ? _p : "#EF4444", children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[600], fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 600, color: (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[800], children: moduleName }), "?"] }), (0, jsx_runtime_1.jsxs)(react_1.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.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
 };
 exports.default = DeleteModuleModal;

package/dist/Components/CustomModulesTable/EditModuleModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditModuleModal.d.ts","sourceRoot":"","sources":["../../../src/Components/CustomModulesTable/EditModuleModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAcnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"EditModuleModal.d.ts","sourceRoot":"","sources":["../../../src/Components/CustomModulesTable/EditModuleModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAcnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkEnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -9,13 +9,17 @@ 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;
+    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", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[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, borderColor: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[200], 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() })] })] })] })] }));
+    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, 
+                                // [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() })] })] })] })] }));
 };
 exports.default = EditModuleModal;

package/dist/Components/DatePicker/CalendarPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarPanel.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/CalendarPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,IAAI,CAAC;IACnB,eAAe,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC;IACzD,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8QtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CalendarPanel.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/CalendarPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,IAAI,CAAC;IACnB,eAAe,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC;IACzD,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwRtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Components/DatePicker/CalendarPanel.js

@@ -10,6 +10,7 @@ const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 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)();
@@ -26,7 +27,9 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
     const hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
     const selectStyles = {
         border: "1px solid",
-        borderColor: (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300],
+        // 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],
         borderRadius: "md",
         px: 2,
         py: 1,
@@ -34,7 +37,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
         fontWeight: 600,
         color: theme.colors.text[700],
         cursor: "pointer",
-        bg: theme.colors.white,
+        bg: theme.colors.background[50],
         outline: "none",
         _hover: { borderColor: theme.colors.primary[300] },
         _focus: {
@@ -86,11 +89,19 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                     else if (isEnd)
                         cellBg = `linear-gradient(to right, ${rangeBg} 50%, transparent 50%)`;
                 }
+                // Solid fill (selected/range-endpoint) needs the ink checked against that
+                // specific fill — `primary[500]` doesn't reliably clear AA for white text on
+                // every brand/mode (same gap the solid Button variant already accounts for).
+                const solidFill = theme.colors.primary[500];
+                const solidHoverFill = theme.colors.primary[600];
                 const circleColor = circleSolid
-                    ? theme.colors.white
+                    ? (0, accentText_1.onFilled)(solidFill, theme.colors.white, theme.colors.black)
                     : isInCurrentMonth
                         ? theme.colors.text[700]
                         : theme.colors.gray[400];
+                const circleHoverColor = circleSolid
+                    ? (0, accentText_1.onFilled)(solidHoverFill, theme.colors.white, theme.colors.black)
+                    : circleColor;
                 const circleBorder = circleSolid
                     ? "1px solid transparent"
                     : isTentativeEnd
@@ -98,10 +109,10 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                         : isToday
                             ? `1px solid ${theme.colors.primary[300]}`
                             : "1px solid transparent";
-                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", disabled: disabled, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? theme.colors.primary[500] : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", disabled: disabled, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
                             ? {}
                             : circleSolid
-                                ? { bg: theme.colors.primary[600] }
+                                ? { bg: solidHoverFill, color: circleHoverColor }
                                 : { bg: rangeBg }, children: (0, date_fns_1.format)(thisDay, "d") }) }, thisDay.toString()));
                 day = (0, date_fns_1.addDays)(day, 1);
             }

package/dist/Components/DatePicker/DatePicker.js

@@ -199,7 +199,7 @@ function CustomDatePicker(props) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen, onClose, tempDate, props, emitSingle]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onClick: handleOpen, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { appendToParentPortal: false, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [showDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.subMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)("select", { value: currentMonth.getMonth(), onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onClick: handleOpen, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { appendToParentPortal: false, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [showDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.subMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)("select", { value: currentMonth.getMonth(), onChange: (e) => {
                                                                     const newMonth = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
                                                                 }, children: Array.from({ length: 12 }).map((_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM") }, i))) }), (0, jsx_runtime_1.jsx)("select", { value: currentMonth.getFullYear(), onChange: (e) => {

package/dist/Components/DatePicker/RangeDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAmBpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAwBzD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiY1D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"RangeDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAmBpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAwBzD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkY1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -178,7 +178,7 @@ const RangeDatePicker = (props) => {
                                                 : `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: "0.75rem", border: "1px solid", borderColor: (_o = theme.colors.boxborder) === null || _o === void 0 ? void 0 : _o[500], 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: () => {
+                                        }, 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: "0.75rem", 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: () => {
                                             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) => {

package/dist/Components/DatePicker/SingleDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AA6BlG,OAAO,EAAE,qBAAqB,EAAc,MAAM,mBAAmB,CAAC;AA2OtE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA09B5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AA6BlG,OAAO,EAAE,qBAAqB,EAAc,MAAM,mBAAmB,CAAC;AA2OtE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAg+B5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     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,14 +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, borderColor: error ? (_d = (_c = theme.colors.semantic) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d[500] : undefined, _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],
+                }, 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],
                                             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 ${(_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}`,
                                         }, _hover: {
-                                            borderColor: error ? (_k = (_j = theme.colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500] : undefined,
-                                        }, cursor: "text", boxShadow: error ? `0 0 0 0.125rem ${(_l = theme.colors.boxShadow) === null || _l === void 0 ? void 0 : _l.error}` : `` }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: (e) => {
+                                            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) => {
                                             e.stopPropagation();
                                             if (!isOpen) {
                                                 handleOpen();
@@ -960,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: "0.75rem", border: "1px solid", borderColor: (_m = theme.colors.boxborder) === null || _m === void 0 ? void 0 : _m[500], 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.gray[500] }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "0.75rem", 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) => {
                                             setTempDate(updatedDate);
                                             setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
                                             setIsTyping(false);
@@ -968,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: (_o = theme.colors.boxborder) === null || _o === void 0 ? void 0 : _o[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: (_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: () => {
                                                 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeOnlyPicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/TimeOnlyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAYpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAY1D,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0K1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"TimeOnlyPicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/TimeOnlyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAYpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAa1D,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2K1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -13,10 +13,12 @@ const HelperText_1 = __importDefault(require("../Common/HelperText"));
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 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;
+    var _a, _b, _c;
     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)();
     const popoverRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
@@ -75,9 +77,9 @@ const TimeOnlyPicker = (props) => {
                                     }, dateFormat: dateFormat, disabled: disabled, placeholder: placeholder, onFocus: () => {
                                         if (!disabled && !isOpen)
                                             onOpen();
-                                    }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [(0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
+                                    }, 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: "gray.200", 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: (_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 })] }));
 };
 exports.TimeOnlyPicker = TimeOnlyPicker;
 exports.default = exports.TimeOnlyPicker;

package/dist/Components/DatePicker/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmGzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8IzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/Components/DatePicker/TimePicker.js

@@ -3,7 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 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) => {
         if (!is12HourFormat)
@@ -52,9 +55,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, children: Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) => {
+    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: {
+                    borderColor: theme.colors.primary[500],
+                    boxShadow: `0 0 0 0.125rem ${(_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.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, 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, children: [(0, jsx_runtime_1.jsx)("option", { value: "AM", children: "AM" }), (0, jsx_runtime_1.jsx)("option", { value: "PM", children: "PM" })] }))] }));
+                }) }), (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: {
+                    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: {
+                    borderColor: theme.colors.primary[500],
+                    boxShadow: `0 0 0 0.125rem ${(_j = theme.colors.boxShadow) === null || _j === void 0 ? void 0 : _j.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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePickerInput.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/TimePickerInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAUjF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC;AA6ED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyX1D,CAAC"}
+{"version":3,"file":"TimePickerInput.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/TimePickerInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAUjF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC;AA6ED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoY1D,CAAC"}

package/dist/Components/DatePicker/TimePickerInput.js

@@ -92,6 +92,7 @@ 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);
@@ -403,6 +404,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 }), (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] }) }) })] }));
+    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],
+                    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}`,
+                }, _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] }) }) })] }));
 };
 exports.TimePickerInput = TimePickerInput;

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAW5C,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEhE,CAAA;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE9D,CAAA;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEhE,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,SAAmB,EACnB,IAAW,EACX,EAAE,EACF,OAAiB,EACjB,QAAQ,GACT,EAAE,WAAW,2CAmCb"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAY5C,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEhE,CAAA;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE9D,CAAA;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEhE,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,SAAmB,EACnB,IAAW,EACX,EAAE,EACF,OAAiB,EACjB,QAAQ,GACT,EAAE,WAAW,2CAoCb"}

package/dist/Components/Drawer/Drawer.js

@@ -7,6 +7,7 @@ exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = void 0;
 exports.default = Drawer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const react_2 = require("@chakra-ui/react");
 const DrawerHeader = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
@@ -21,11 +22,13 @@ 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;
     };
     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, { 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: (_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 })] })] }));
 }

package/dist/Components/Dropdown/DropDown.js

@@ -103,17 +103,17 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        return ((0, jsx_runtime_1.jsx)(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : "#fff", border: `0.063rem solid ${(_e = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]}`, borderRadius: "0.625rem", boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return ((0, jsx_runtime_1.jsx)(react_2.List, { bg: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#fff", border: `0.063rem solid ${(_f = (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.boxborder) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[200]}`, borderRadius: "0.625rem", boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
                 scrollbarWidth: "thin",
-                scrollbarColor: `${(_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.gray) === null || _j === void 0 ? void 0 : _j[300]} transparent`,
+                scrollbarColor: `${(_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[300]} transparent`,
                 "&::-webkit-scrollbar": { width: "6px" },
                 "&::-webkit-scrollbar-thumb": {
-                    background: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[300],
+                    background: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray) === null || _m === void 0 ? void 0 : _m[300],
                     borderRadius: "3px",
                 },
                 "&::-webkit-scrollbar-thumb:hover": {
-                    background: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[400],
+                    background: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[400],
                 },
             }, style: ListStyle, children: options.map((option) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;

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

@@ -1 +1 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/Components/Editor/Editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,MAAM,yCAsBV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/Components/Editor/Editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK5C,QAAA,MAAM,MAAM,yCAuDV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/Components/Editor/Editor.js

@@ -38,9 +38,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
 const jodit_react_1 = __importDefault(require("jodit-react"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const joditThemeVars_1 = require("./joditThemeVars");
 const Editor = react_1.default.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
-    const stableConfig = (0, react_1.useMemo)(() => config, [JSON.stringify(config)]); // eslint-disable-line react-hooks/exhaustive-deps
-    return ((0, jsx_runtime_1.jsx)(jodit_react_1.default, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key));
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,
+    // font-size list, ...) to `document.body` by default (`Dialog.destination` /
+    // `getPopupViewRoot`), outside this wrapper's DOM subtree — so the CSS custom properties
+    // `themeVars` sets below never reach them and they render in Jodit's default light styling
+    // even in dark mode. Pointing Jodit's own `popupRoot` config at this wrapper keeps popups
+    // inside the subtree those variables cascade into.
+    const [popupRoot, setPopupRoot] = (0, react_1.useState)(null);
+    const stableConfig = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return ({
+            theme: (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff") ? "dark" : "default",
+            popupRoot,
+            // `config` spread as `Record<string, unknown>`: mixing a literal `popupRoot` key with a
+            // spread of the raw `DeepPartial<Config>` type (Jodit's huge recursive config type) blows
+            // past TS's type-instantiation depth limit (TS2589) — the cast avoids that without
+            // weakening the memo's actual return type, which is still asserted below.
+            ...config,
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(config), theme, popupRoot]);
+    // Jodit's own `theme: "dark"|"default"` only switches which of ITS selectors apply — those
+    // are still driven by Jodit's hardcoded gray/blue CSS variables, not this app's palette. This
+    // feeds our actual active colors into those variables, scoped to this instance (see
+    // `joditThemeVars.ts`).
+    const themeVars = (0, react_1.useMemo)(() => { var _a, _b; return (0, joditThemeVars_1.getJoditThemeVars)(theme.colors, (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff")); }, [theme]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: themeVars, children: (0, jsx_runtime_1.jsx)(jodit_react_1.default, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }));
 });
 exports.default = Editor;

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

@@ -0,0 +1,21 @@
+import type { CSSProperties } from "react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+/**
+ * Maps this library's active palette to the CSS custom properties Jodit's own light/dark theme
+ * CSS reads (`node_modules/jodit/es2021/jodit.css`). Jodit's `theme: "dark" | "default"` config
+ * only toggles which of ITS OWN selectors apply (`.jodit_theme_dark`, `.jodit-ui-input_theme_dark`,
+ * …) — those selectors are still driven by Jodit's own hardcoded `--jd-dark-*` / `--jd-color-*`
+ * custom properties (a generic mid-gray `#575757` canvas, a blue `#1e88e5` accent, …), so toggling
+ * the theme alone renders the editor in Jodit's palette instead of ours. This is what shipped the
+ * reported "editor is not black" bug in dark mode.
+ *
+ * `PaletteProps.background`/`.text` are role-stable ColorScales whose LIGHTNESS (not index)
+ * flips between modes — e.g. `background[50]` is `#ffffff` in light and near-black in dark, and
+ * `text[900]` is near-black ink in light and near-white ink in dark (see
+ * `Theme/tokens/builders/buildDarkPalette.ts`). So the *same* token expression already resolves
+ * correctly in both modes; only the Jodit CSS-variable NAME differs (`--jd-dark-*` only takes
+ * effect inside `.jodit_theme_dark`, `--jd-color-*` is what the default theme reads), which is why
+ * this still branches on `isDark`.
+ */
+export declare const getJoditThemeVars: (colors: PaletteProps, isDark: boolean) => CSSProperties;
+//# sourceMappingURL=joditThemeVars.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"joditThemeVars.d.ts","sourceRoot":"","sources":["../../../src/Components/Editor/joditThemeVars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,GAAI,QAAQ,YAAY,EAAE,QAAQ,OAAO,KAAG,aA2DzE,CAAC"}