pixelize-design-library 2.2.42 → 2.2.44

package/dist/Components/DatePicker/DatePicker.js

@@ -55,7 +55,6 @@ function CustomDatePicker(props) {
     var tomorrow = (0, date_fns_1.addDays)(today, 1);
     var showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
     var showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
-    var formatHasTime = dateFormat.toLowerCase().includes("hh") || dateFormat.toLowerCase().includes("mm") || dateFormat.toLowerCase().includes("ss");
     var selectedDate = !isRange ? props.selectedDate : null;
     // const [currentMonth, setCurrentMonth] = useState<Date>(
     //   isRange ? new Date() : selectedDate ?? new Date()
@@ -75,10 +74,7 @@ function CustomDatePicker(props) {
     // );
     var _m = (0, react_1.useState)(rangeStart), tempRangeStart = _m[0], setTempRangeStart = _m[1];
     var _o = (0, react_1.useState)(rangeEnd), tempRangeEnd = _o[0], setTempRangeEnd = _o[1];
-    var _p = (0, react_1.useState)(""), inputValue = _p[0], setInputValue = _p[1];
-    var _q = (0, react_1.useState)(false), isTyping = _q[0], setIsTyping = _q[1];
     var popoverRef = (0, react_1.useRef)(null);
-    var triggerRef = (0, react_1.useRef)(null);
     var handleOpen = function () {
         if (!isRange && !selectedDate) {
             // setTempDate(new Date());
@@ -92,93 +88,6 @@ function CustomDatePicker(props) {
         }
         onOpen();
     };
-    // Initialize input value based on selected date
-    (0, react_1.useEffect)(function () {
-        if (!isRange) {
-            if (selectedDate instanceof Date) {
-                setTempDate(new Date(selectedDate));
-                setInputValue((0, date_fns_1.format)(selectedDate, dateFormat));
-            }
-            else {
-                setTempDate(null);
-                setInputValue("");
-            }
-        }
-    }, [selectedDate, isRange, disableToday, dateFormat]);
-    var handleInputChange = function (e) {
-        var value = e.target.value;
-        setInputValue(value);
-        setIsTyping(true);
-        if (!value.trim()) {
-            setTempDate(null);
-            setTempRangeStart(null);
-            setTempRangeEnd(null);
-            setRangeStart(null);
-            setRangeEnd(null);
-            setSelectingStart(true);
-            props.onChange(null);
-            setIsTyping(false);
-            onClose();
-            return;
-        }
-    };
-    var handleInputKeyDown = function (e) {
-        if (e.key === 'Enter') {
-            e.currentTarget.blur();
-        }
-    };
-    var handleInputFocus = function (e) {
-        e.stopPropagation();
-        setIsTyping(true);
-        if (!isOpen) {
-            onOpen();
-        }
-    };
-    var handleInputBlur = function () {
-        setIsTyping(false);
-        if (!inputValue.trim()) {
-            setTempDate(null);
-            props.onChange(null);
-            return;
-        }
-        try {
-            var parsed = (0, date_fns_1.parse)(inputValue, dateFormat, new Date());
-            if ((0, date_fns_1.isValid)(parsed)) {
-                var isValidDate = true;
-                if (minDate && (0, date_fns_1.isBefore)(parsed, minDate))
-                    isValidDate = false;
-                if (maxDate && (0, date_fns_1.isAfter)(parsed, maxDate))
-                    isValidDate = false;
-                if (disablePastDates && (0, date_fns_1.isBefore)(parsed, today) && !(0, date_fns_1.isSameDay)(parsed, today))
-                    isValidDate = false;
-                if (disableFutureDates && (0, date_fns_1.isAfter)(parsed, today) && !(0, date_fns_1.isSameDay)(parsed, today))
-                    isValidDate = false;
-                if (disableToday && (0, date_fns_1.isSameDay)(parsed, today))
-                    isValidDate = false;
-                if (isValidDate) {
-                    var finalDate = parsed;
-                    // Only preserve previous time if the input format does NOT include time tokens
-                    if (showTime && tempDate && !formatHasTime) {
-                        finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
-                    }
-                    setTempDate(finalDate);
-                    setCurrentMonth(finalDate);
-                    setInputValue((0, date_fns_1.format)(finalDate, dateFormat));
-                    props.onChange(finalDate);
-                    return;
-                }
-            }
-        }
-        catch (_a) { }
-        if (tempDate) {
-            setInputValue((0, date_fns_1.format)(tempDate, dateFormat));
-        }
-        else {
-            setInputValue("");
-            setTempDate(null);
-            props.onChange(null);
-        }
-    };
     (0, react_1.useEffect)(function () {
         if (!isRange) {
             if (selectedDate instanceof Date) {
@@ -224,8 +133,6 @@ function CustomDatePicker(props) {
                 ? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
                 : updated;
             setTempDate(updatedDate);
-            setInputValue((0, date_fns_1.format)(updatedDate, dateFormat));
-            setIsTyping(false);
             props.onChange(updatedDate);
         }
     };
@@ -278,22 +185,17 @@ function CustomDatePicker(props) {
             : tempRangeStart
                 ? "".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " -")
                 : ""
-        : isTyping
-            ? inputValue
-            : tempDate
-                ? (0, date_fns_1.format)(tempDate, dateFormat)
-                : "";
+        : tempDate
+            ? (0, date_fns_1.format)(tempDate, dateFormat)
+            : "";
     (0, react_1.useEffect)(function () {
         var handleClickOutside = function (event) {
-            var _a, _b;
+            var _a;
             if (popoverRef.current &&
                 !popoverRef.current.contains(event.target) &&
-                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
-                !((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
+                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
                 if (tempDate) {
                     props.onChange(tempDate); // add new
-                    setInputValue((0, date_fns_1.format)(tempDate, dateFormat));
-                    setIsTyping(false);
                 }
                 onClose();
             }
@@ -307,22 +209,13 @@ function CustomDatePicker(props) {
         return function () {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [isOpen, onClose, props, tempDate]);
+    }, [isOpen, onClose]);
     return (react_1.default.createElement(react_2.Box, { width: width, position: "relative" },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: false },
+        react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true },
             react_1.default.createElement(react_2.PopoverTrigger, null,
-                react_1.default.createElement(react_2.Box, { ref: triggerRef, onMouseDown: function (e) {
-                        e.stopPropagation();
-                        if (!isOpen) {
-                            handleOpen();
-                        }
-                    }, onClick: function (e) {
-                        // Prevent Chakra PopoverTrigger from toggling (which would immediately close after open)
-                        e.preventDefault();
-                        e.stopPropagation();
-                    } },
-                    react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, onChange: !isRange ? handleInputChange : undefined, onKeyDown: !isRange ? handleInputKeyDown : undefined, onFocus: !isRange ? handleInputFocus : undefined, onBlur: !isRange ? handleInputBlur : undefined, isReadOnly: isRange, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width }))),
+                react_1.default.createElement(react_2.Box, { onClick: handleOpen },
+                    react_1.default.createElement(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 }))),
             react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef },
                 react_1.default.createElement(react_2.PopoverBody, null,
                     showDate && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -360,8 +253,6 @@ function CustomDatePicker(props) {
                         // }}
                         onChange: function (updatedDate) {
                             setTempDate(updatedDate);
-                            setInputValue((0, date_fns_1.format)(updatedDate, dateFormat));
-                            setIsTyping(false);
                             props.onChange(updatedDate);
                         } })),
                     react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3 },
@@ -385,8 +276,6 @@ function CustomDatePicker(props) {
                                 }
                                 else if (!isRange && tempDate) {
                                     props.onChange(tempDate);
-                                    setInputValue((0, date_fns_1.format)(tempDate, dateFormat));
-                                    setIsTyping(false);
                                 }
                                 onClose();
                             } }, "OK")))))));

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -216,7 +216,14 @@ var KanbanBoard = function (_a) {
                                     react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
                                     hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
                                     !(hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
-                                react_1.default.createElement(react_2.Box, { px: 2, pb: 2, flex: "1", overflowY: "auto", width: "100%", mr: 1, 
+                                react_1.default.createElement(react_2.Box
+                                // px={2}
+                                // pb={2}
+                                , { 
+                                    // px={2}
+                                    // pb={2}
+                                    flex: "1", overflowY: "auto", width: "100%", 
+                                    // mr={1} // Add right margin to create gap for scrollbar
                                     /////LIST/////////////////////////////
                                     sx: {
                                         overflowY: "auto",

package/dist/Components/NoteTextArea/NoteTextArea.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
-export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, }: NoteTextAreaProps): React.JSX.Element;
+export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder }: NoteTextAreaProps): React.JSX.Element;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -45,16 +45,16 @@ var countWords = function (text) {
 };
 function NoteTextArea(_a) {
     var _b;
-    var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref;
+    var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref, _h = _a.customPlaceholder, customPlaceholder = _h === void 0 ? "Add a note..." : _h;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var noteAreaRef = (0, react_1.useRef)(null);
-    var _h = (0, react_1.useState)(false), isActive = _h[0], setIsActive = _h[1];
-    var _j = (0, react_1.useState)(""), noteValue = _j[0], setNoteValue = _j[1];
-    var _k = (0, react_1.useState)(""), titleValue = _k[0], setTitleValue = _k[1];
-    var _l = (0, react_1.useState)(false), titleShow = _l[0], setTitleShow = _l[1];
-    var _m = (0, react_1.useState)([]), files = _m[0], setFiles = _m[1];
-    var _o = (0, react_1.useState)(""), fileError = _o[0], setFileError = _o[1];
-    var _p = (0, react_1.useState)(false), isSaveDisabled = _p[0], setIsSaveDisabled = _p[1];
+    var _j = (0, react_1.useState)(false), isActive = _j[0], setIsActive = _j[1];
+    var _k = (0, react_1.useState)(""), noteValue = _k[0], setNoteValue = _k[1];
+    var _l = (0, react_1.useState)(""), titleValue = _l[0], setTitleValue = _l[1];
+    var _m = (0, react_1.useState)(false), titleShow = _m[0], setTitleShow = _m[1];
+    var _o = (0, react_1.useState)([]), files = _o[0], setFiles = _o[1];
+    var _p = (0, react_1.useState)(""), fileError = _p[0], setFileError = _p[1];
+    var _q = (0, react_1.useState)(false), isSaveDisabled = _q[0], setIsSaveDisabled = _q[1];
     (0, react_1.useEffect)(function () {
         setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
     }, [titleValue, maxNoteWordCount]);
@@ -151,7 +151,7 @@ function NoteTextArea(_a) {
     };
     return (react_1.default.createElement(react_2.Box, { w: width, borderRadius: "0.25rem", overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[300] : theme.colors.gray[200], bg: isActive ? theme.colors.gray[50] : "transparent", boxShadow: isActive ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary) : "none" },
         !isActive && (react_1.default.createElement(react_2.Flex, { px: 4, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: "0.25rem", minH: "44px" },
-            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[300], fontStyle: "italic", fontSize: "md" }, "Add a note..."))),
+            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[300], fontStyle: "italic", fontSize: "md" }, customPlaceholder))),
         isActive && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.Box, { bg: theme.colors.white },
                 titleShow && (react_1.default.createElement(react_2.Input, { ref: inputRef, value: titleValue, onChange: function (e) {

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -13,4 +13,5 @@ export type NoteTextAreaProps = {
     maxNoteWordCount?: number;
     onChange?: (value: string) => void;
     ref?: LegacyRef<HTMLInputElement>;
+    customPlaceholder?: string;
 };

package/dist/Components/Table/Components/HeaderActions.js

@@ -18,28 +18,60 @@ var react_1 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var react_2 = __importDefault(require("react"));
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+// const ListItem = ({
+//   icon,
+//   name,
+//   onClick,
+//   selections,
+// }: {
+//   icon: React.ReactElement;
+//   name: string;
+//   onClick?: (selection: (string | number)[]) => void;
+//   selections: (string | number)[];
+// }) => {
+//   const { colors }: any = useCustomTheme();
+//   const styledIcon = React.cloneElement(icon, {
+//     color: colors?.text?.[500],
+//     size: "1.25rem",
+//   });
+//   return (
+//     <Box
+//       display={"flex"}
+//       alignItems={"center"}
+//       gap={"0.375rem"}
+//       onClick={() => onClick && onClick(selections)}
+//       cursor={"pointer"}
+//       _hover={{color: colors?.primary?.[500]}}
+//     >
+//       {styledIcon} {name}
+//     </Box>
+//   );
+// };
 var ListItem = function (_a) {
-    var _b;
-    var icon = _a.icon, name = _a.name, onClick = _a.onClick, selections = _a.selections;
+    var _b, _c;
+    var icon = _a.icon, name = _a.name, onClick = _a.onClick, selections = _a.selections, _d = _a.isHoverEnabled, isHoverEnabled = _d === void 0 ? false : _d, hoverColor = _a.hoverColor;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     var styledIcon = react_2.default.cloneElement(icon, {
-        color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500],
+        color: "currentColor",
         size: "1.25rem",
     });
-    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", onClick: function () { return onClick && onClick(selections); }, cursor: "pointer" },
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: isHoverEnabled ? "pointer" : "default", onClick: function () { return onClick && onClick(selections); }, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], _hover: isHoverEnabled
+            ? { color: hoverColor ? hoverColor : (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500] } // ✅ hover updates both
+            : {}, transition: "color 0.2s ease" // ✅ smooth animation
+     },
         styledIcon,
         " ",
         name));
 };
 var HeaderActions = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
     var actions = _a.actions, selections = _a.selections;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     return (react_2.default.createElement(react_1.Box, { display: "flex", gap: 4, fontSize: "0.875rem", fontWeight: 400, color: (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b[500] },
-        ((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.Trash2, null), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections })),
-        ((_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, null), name: "Mass Update", onClick: (_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.onClick, selections: selections })),
-        ((_g = actions === null || actions === void 0 ? void 0 : actions.items) === null || _g === void 0 ? void 0 : _g.length)
-            ? (_h = actions === null || actions === void 0 ? void 0 : actions.items) === null || _h === void 0 ? void 0 : _h.map(function (item) { return (react_2.default.createElement(ListItem, __assign({}, item, { selections: selections }))); })
+        ((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[500] })),
+        ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections })),
+        ((_h = actions === null || actions === void 0 ? void 0 : actions.items) === null || _h === void 0 ? void 0 : _h.length)
+            ? (_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.map(function (item) { return (react_2.default.createElement(ListItem, __assign({}, item, { selections: selections }))); })
             : null));
 };
 exports.default = HeaderActions;

package/dist/Hooks/usePreferences.d.ts

@@ -19,7 +19,8 @@ declare const useGetPreferences: ({ baseUrl, key, page, name, authToken, orgId,
 };
 declare const useSavePreferences: ({ baseUrl, key, page, name, authToken, orgId, }: PreferencesProps) => {
     savePreferences: (data?: Record<string, any>) => void;
+    savePreferencesDebounced: (data?: Record<string, any>, wait?: number) => void;
     loading: boolean;
-    error: null;
+    error: unknown;
 };
 export { useGetPreferences, useSavePreferences };

package/dist/Hooks/usePreferences.js

@@ -48,7 +48,7 @@ var useSavePreferences = function (_a) {
     var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f, _g = _a.orgId, orgId = _g === void 0 ? "" : _g;
     var _h = (0, react_1.useState)(false), loading = _h[0], setLoading = _h[1];
     var _j = (0, react_1.useState)(null), error = _j[0], setError = _j[1];
-    var savePreferences = function (data) {
+    var savePreferences = (0, react_1.useCallback)(function (data) {
         if (data === void 0) { data = {}; }
         if (!baseUrl)
             return;
@@ -59,18 +59,21 @@ var useSavePreferences = function (_a) {
                 Authorization: authToken,
                 "Content-Type": "application/json",
             },
-            body: JSON.stringify({
-                key: key,
-                page: page,
-                name: name,
-                json: data,
-            }),
+            body: JSON.stringify({ key: key, page: page, name: name, json: data }),
         })
-            .then(function (response) { return response.json(); })
-            .then(function (data) { return console.log(data); })
-            .catch(function (error) { return setError(error); })
+            .then(function (r) { return r.json(); })
+            .then(function (d) { return console.log(d); })
+            .catch(function (e) { return setError(e); })
             .finally(function () { return setLoading(false); });
-    };
-    return { savePreferences: savePreferences, loading: loading, error: error };
+    }, [baseUrl, orgId, authToken, key, page, name]);
+    var debounceRef = (0, react_1.useRef)(null);
+    var savePreferencesDebounced = (0, react_1.useCallback)(function (data, wait) {
+        if (data === void 0) { data = {}; }
+        if (wait === void 0) { wait = 500; }
+        if (debounceRef.current)
+            window.clearTimeout(debounceRef.current);
+        debounceRef.current = window.setTimeout(function () { return savePreferences(data); }, wait);
+    }, [savePreferences]);
+    return { savePreferences: savePreferences, savePreferencesDebounced: savePreferencesDebounced, loading: loading, error: error };
 };
 exports.useSavePreferences = useSavePreferences;

package/dist/Theme/Meadow/palette.js

@@ -36,24 +36,24 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             48: "#9A4FE57a",
         }
     }, secondary: {
-        50: "#e3f9e5",
-        100: "#c1f0c0",
-        200: "#9ee4a1",
-        300: "#72d785",
-        400: "#48c15d",
-        500: "#2caa3d",
-        600: "#239c31",
-        700: "#1d8626",
-        800: "#16631c",
-        900: "#0d4b13",
+        50: "#e8e8e9",
+        100: "#b7b8bb",
+        200: "#94989b",
+        300: "#63666d",
+        400: "#454951",
+        500: "#161b25",
+        600: "#141922",
+        700: "#10131a",
+        800: "#0c0f14",
+        900: "#090b10",
         opacity: {
-            4: "#9A4FE50a",
-            8: "#9A4FE514",
-            16: "#9A4FE529",
-            24: "#9A4FE53d",
-            32: "#9A4FE552",
-            40: "#9A4FE566",
-            48: "#9A4FE57a",
+            4: "#161b250a",
+            8: "#161b2514",
+            16: "#161b2529",
+            24: "#161b253d",
+            32: "#161b2552",
+            40: "#161b2566",
+            48: "#161b257a",
         }
     }, tertiary: {
         50: "#e3f9e5",

package/dist/Theme/Radiant/palette.js

@@ -36,44 +36,44 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             48: "#9A4FE57a",
         }
     }, secondary: {
-        50: "#ffe0b2",
-        100: "#ffcc80",
-        200: "#ffb74d",
-        300: "#ffa726",
-        400: "#ff9800",
-        500: "#fb8c00",
-        600: "#f57c00",
-        700: "#ef6c00",
-        800: "#e65100",
-        900: "#bf360c",
+        50: "#e8e8e9",
+        100: "#b7b8bb",
+        200: "#94989b",
+        300: "#63666d",
+        400: "#454951",
+        500: "#161b25",
+        600: "#141922",
+        700: "#10131a",
+        800: "#0c0f14",
+        900: "#090b10",
         opacity: {
-            4: "#9A4FE50a",
-            8: "#9A4FE514",
-            16: "#9A4FE529",
-            24: "#9A4FE53d",
-            32: "#9A4FE552",
-            40: "#9A4FE566",
-            48: "#9A4FE57a",
+            4: "#161b250a",
+            8: "#161b2514",
+            16: "#161b2529",
+            24: "#161b253d",
+            32: "#161b2552",
+            40: "#161b2566",
+            48: "#161b257a",
         }
     }, tertiary: {
-        50: "#ffe0b2",
-        100: "#ffcc80",
-        200: "#ffb74d",
-        300: "#ffa726",
-        400: "#ff9800",
-        500: "#fb8c00",
-        600: "#f57c00",
-        700: "#ef6c00",
-        800: "#e65100",
-        900: "#bf360c",
+        50: "#e8e8e9",
+        100: "#b7b8bb",
+        200: "#94989b",
+        300: "#63666d",
+        400: "#454951",
+        500: "#161b25",
+        600: "#141922",
+        700: "#10131a",
+        800: "#0c0f14",
+        900: "#090b10",
         opacity: {
-            4: "#9A4FE50a",
-            8: "#9A4FE514",
-            16: "#9A4FE529",
-            24: "#9A4FE53d",
-            32: "#9A4FE552",
-            40: "#9A4FE566",
-            48: "#9A4FE57a",
+            4: "#161b250a",
+            8: "#161b2514",
+            16: "#161b2529",
+            24: "#161b253d",
+            32: "#161b2552",
+            40: "#161b2566",
+            48: "#161b257a",
         }
     }, transparent: "transparent", black: "#000", white: "#fff", semantic: {
         success: {

package/dist/Theme/Skyline/palette.js

@@ -36,24 +36,24 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             48: "#9A4FE57a",
         }
     }, secondary: {
-        50: "#e3f2f9",
-        100: "#c5e4f3",
-        200: "#a2d4ec",
-        300: "#7ac1e4",
-        400: "#47a9da",
-        500: "#0088cc",
-        600: "#007ab8",
-        700: "#006ba1",
-        800: "#005885",
-        900: "#003f5e",
+        50: "#e8e8e9",
+        100: "#b7b8bb",
+        200: "#94989b",
+        300: "#63666d",
+        400: "#454951",
+        500: "#161b25",
+        600: "#141922",
+        700: "#10131a",
+        800: "#0c0f14",
+        900: "#090b10",
         opacity: {
-            4: "#9A4FE50a",
-            8: "#9A4FE514",
-            16: "#9A4FE529",
-            24: "#9A4FE53d",
-            32: "#9A4FE552",
-            40: "#9A4FE566",
-            48: "#9A4FE57a",
+            4: "#161b250a",
+            8: "#161b2514",
+            16: "#161b2529",
+            24: "#161b253d",
+            32: "#161b2552",
+            40: "#161b2566",
+            48: "#161b257a",
         }
     }, tertiary: {
         50: "#e3f2f9",

package/dist/index.d.ts

@@ -13,7 +13,6 @@ import DatePicker from "./Components/DatePicker/DatePicker";
 import Drawer, { DrawerHeader, DrawerBody, DrawerFooter } from "./Components/Drawer/Drawer";
 import Dropdown from "./Components/Dropdown/DropDown";
 import Editor from "./Components/Editor/Editor";
-import FeedbackForm from "./Components/FeedbackForm/FeedbackForm";
 import FileUpload from "./Components/FileUpload/FileUpload";
 import FileUploader from "./Components/FileUploader/FileUploader";
 import FormWrapper from "./Components/Form/FormWrapper";
@@ -60,5 +59,5 @@ import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
 import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
 import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
 import Notification from "./Components/Notification/Notification";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, FeedbackForm, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.FeedbackForm = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = void 0;
+exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -62,8 +62,6 @@ var DropDown_1 = __importDefault(require("./Components/Dropdown/DropDown"));
 exports.Dropdown = DropDown_1.default;
 var Editor_1 = __importDefault(require("./Components/Editor/Editor"));
 exports.Editor = Editor_1.default;
-var FeedbackForm_1 = __importDefault(require("./Components/FeedbackForm/FeedbackForm"));
-exports.FeedbackForm = FeedbackForm_1.default;
 var FileUpload_1 = __importDefault(require("./Components/FileUpload/FileUpload"));
 exports.FileUpload = FileUpload_1.default;
 var FileUploader_1 = __importDefault(require("./Components/FileUploader/FileUploader"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.42",
+  "version": "2.2.44",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",