pixelize-design-library 1.1.66 → 1.1.70

package/dist/App.js

@@ -32,9 +32,8 @@ var Loading_1 = __importDefault(require("./Components/Loading/Loading"));
 var SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
 var NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
 var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
-var icons_1 = require("@chakra-ui/icons");
-var fi_1 = require("react-icons/fi");
 var Layout_1 = __importDefault(require("./Layout"));
+var lucide_react_1 = require("lucide-react");
 function App() {
     function useWindowSize() {
         var _a = (0, react_1.useState)({
@@ -66,12 +65,12 @@ function App() {
     var menu = [
         {
             title: "Dashboard",
-            icon: fi_1.FiHome,
+            icon: lucide_react_1.House,
             url: "dashboard",
         },
         {
             title: "Calendar",
-            icon: fi_1.FiCalendar,
+            icon: lucide_react_1.Calendar,
             url: "description",
         },
     ];
@@ -93,9 +92,9 @@ function App() {
                 react_1.default.createElement(react_2.Box, null,
                     react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, logo: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo", companyName: "PIXELIZE" })),
                 react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
-                    react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", moreIcon: react_1.default.createElement(fi_1.FiCalendar, null) }),
+                    react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", moreIcon: react_1.default.createElement(lucide_react_1.Calendar, null) }),
                     react_1.default.createElement("br", null),
-                    react_1.default.createElement(Breadcrumbs_1.default, { separator: react_1.default.createElement(icons_1.ChevronRightIcon, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
+                    react_1.default.createElement(Breadcrumbs_1.default, { separator: react_1.default.createElement(lucide_react_1.ChevronRight, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
                     react_1.default.createElement(react_2.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width - 75 },
                         react_1.default.createElement(Layout_1.default, null)))))));
 }

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -2,7 +2,7 @@ export type ApexPieChartProps = {
     data: number[];
     labels: string[];
     title?: string;
-    titlePosition?: 'left' | 'center' | 'right';
+    titlePosition?: "left" | "center" | "right";
     height?: number;
     width?: number;
     chartColor?: string[];
@@ -14,4 +14,28 @@ type StyleProps = {
     fontWeight?: string | number;
     color?: string;
 };
+export interface ApexOptions {
+    annotations?: ApexAnnotations;
+    chart?: ApexChart;
+    colors?: any[];
+    dataLabels?: ApexDataLabels;
+    fill?: ApexFill;
+    forecastDataPoints?: ApexForecastDataPoints;
+    grid?: ApexGrid;
+    labels?: string[];
+    legend?: ApexLegend;
+    markers?: ApexMarkers;
+    noData?: ApexNoData;
+    plotOptions?: ApexPlotOptions;
+    responsive?: ApexResponsive[];
+    series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
+    states?: ApexStates;
+    stroke?: ApexStroke;
+    subtitle?: ApexTitleSubtitle;
+    theme?: ApexTheme;
+    title?: ApexTitleSubtitle;
+    tooltip?: ApexTooltip;
+    xaxis?: ApexXAxis;
+    yaxis?: ApexYAxis | ApexYAxis[];
+}
 export {};

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.stories.js

@@ -3,5 +3,4 @@
 // import { Meta, StoryFn } from '@storybook/react';
 // import ButtonGroupIcon  from './ButtonGroupIcon'; // Adjust the import path and component type if needed
 // import {ButtonGroupIconProps} from './ButtonGoupIconProps';
-// import { FiHome } from 'react-icons/fi';
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Common/FormLabel.js

@@ -7,15 +7,11 @@ exports.TextLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-var icons_1 = require("@chakra-ui/icons");
 var TextLabel = function (_a) {
     var label = _a.label, id = _a.id, isInformation = _a.isInformation, informationMessage = _a.informationMessage, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], mb: "0.1rem", fontWeight: 600, fontSize: 14 },
         label,
-        isRequired && react_1.default.createElement("span", { style: { color: "red" } }, "*"),
-        isInformation && (react_1.default.createElement(ToolTip_1.default, { placement: "top", hasArrow: true, label: informationMessage },
-            react_1.default.createElement(icons_1.InfoIcon, { ml: 1, position: "absolute", top: "3px", fontSize: 14, color: theme.colors.gray[500] })))));
+        isRequired && react_1.default.createElement("span", { style: { color: "red" } }, "*")));
 };
 exports.TextLabel = TextLabel;

package/dist/Components/Dropdown/DropDown.js

@@ -36,9 +36,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var fi_1 = require("react-icons/fi");
 var framer_motion_1 = require("framer-motion");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
 var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
 var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
     var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, _d = _a.optionsSize, optionsSize = _d === void 0 ? "lg" : _d, _e = _a.divider, divider = _e === void 0 ? false : _e;
@@ -62,7 +62,7 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
         };
     }, [dropdownRef, onClose]);
     var dropDownToggleOption = function () {
-        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: __assign({ backgroundColor: theme.colors.primary[500] }, dropDownButtonStyle), rightIcon: isVisibleIconShow ? (react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" })) : undefined }, buttonProps),
+        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: __assign({ backgroundColor: theme.colors.primary[500] }, dropDownButtonStyle), rightIcon: isVisibleIconShow ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" })) : undefined }, buttonProps),
             DropdownIcon,
             " \u00A0 ",
             ButtonText));
@@ -70,7 +70,7 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
             DropdownIcon,
             " ",
             text,
-            isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown })));
+            isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown })));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     var DropdownContentRender = function () {

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
-var lu_1 = require("react-icons/lu");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
 function VerifyEmailOtp(_a) {
     var resendMail = _a.resendMail, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -19,7 +19,7 @@ function VerifyEmailOtp(_a) {
                 padding: "3%",
             } },
             react_1.default.createElement("div", { style: { padding: "3%" } },
-                react_1.default.createElement(lu_1.LuMailCheck, { size: "100", color: theme.colors.primary[500] })),
+                react_1.default.createElement(lucide_react_1.MailCheck, { size: "100", color: theme.colors.primary[500] })),
             react_1.default.createElement("h1", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "2%" } }, title),
             react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
                 description,

package/dist/Components/NavigationBar/NavigationBar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var fi_1 = require("react-icons/fi");
+var lucide_react_1 = require("lucide-react");
 function NavBar(_a) {
     var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -40,7 +40,7 @@ function NavBar(_a) {
                                 }, _hover: {
                                     backgroundColor: theme.colors.primary["50"],
                                 } },
-                                react_1.default.createElement(react_2.Box, null, react_1.default.createElement(fi_1.FiLogOut, null)),
+                                react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, null)),
                                 react_1.default.createElement(react_2.Box, null, logoutText)))))))));
 }
 exports.default = NavBar;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -40,10 +40,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var fi_1 = require("react-icons/fi");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
 var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: 5px;\n  box-shadow: ", ";\n"], ["\n  border: ", ";\n  border-radius: 5px;\n  box-shadow: ", ";\n"])), function (_a) {
     var isActive = _a.isActive;
     return isActive ? "1px solid #3182ce" : "1px solid #c0c6cc";
@@ -92,7 +92,7 @@ var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __m
 });
 var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border: none;\n  color: #5e5c5c;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: white;\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n"], ["\n  border: none;\n  color: #5e5c5c;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: white;\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n"])));
 var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 300px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 300px;\n"])));
-var FileEdit = (0, styled_1.default)(fi_1.FiX)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #ff0000;\n"], ["\n  cursor: pointer;\n  color: #ff0000;\n"])));
+var FileEdit = (0, styled_1.default)(lucide_react_1.X)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #ff0000;\n"], ["\n  cursor: pointer;\n  color: #ff0000;\n"])));
 var ErrorText = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: #ff0000;\n  font-size: 0.8rem;\n  margin-top: 8px;\n"], ["\n  color: #ff0000;\n  font-size: 0.8rem;\n  margin-top: 8px;\n"])));
 var countWords = function (text) {
     return text.trim().split(/\s+/).length;
@@ -221,7 +221,7 @@ function NoteTextArea(_a) {
             react_1.default.createElement("div", { style: { padding: "12px 15px" } },
                 react_1.default.createElement("div", { style: { display: "flex", alignItems: "center" } },
                     react_1.default.createElement(FileUploadLabel, { htmlFor: "file-upload" },
-                        react_1.default.createElement(fi_1.FiPaperclip, null),
+                        react_1.default.createElement(lucide_react_1.Paperclip, null),
                         react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
                                 var newFiles = Array.from(e.target.files || []);
                                 var validFiles = newFiles.filter(function (file) { return file.size <= maxFileSize; });

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -36,9 +36,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var icons_1 = require("@chakra-ui/icons");
-var fi_1 = require("react-icons/fi");
-var fa_1 = require("react-icons/fa");
+var lucide_react_1 = require("lucide-react");
 function ProfilePhotoViewer(_a) {
     var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "0px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "0px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText;
     var _m = (0, react_1.useState)(photoUrl), photo = _m[0], setPhoto = _m[1];
@@ -71,22 +69,22 @@ function ProfilePhotoViewer(_a) {
             },
         } },
         photo ? (isPdf ? (react_1.default.createElement(react_2.Box, { width: imageWidth, height: imageWidth, borderRadius: imageBorderRadius, bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" },
-            react_1.default.createElement(fa_1.FaFilePdf, { size: "50%" }))) : (react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }))) : fallbackText ? (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
+            react_1.default.createElement(lucide_react_1.FileText, { size: "50%" }))) : (react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }))) : fallbackText ? (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
             react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold" }, fallbackText))) : (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
-            react_1.default.createElement(fi_1.FiUser, { size: "50%" }))),
+            react_1.default.createElement(lucide_react_1.User, { size: "50%" }))),
         (isEditable || isView) && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.Box, { className: "icon-button", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-25%, -25%)", sx: {
                     opacity: 0,
                     transition: "opacity 0.3s",
                 } },
                 isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(icons_1.EditIcon, null), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, null), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
                             transform: "scale(1.1)",
                             color: "blue.500",
                             boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
                         } }))),
                 isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(icons_1.ViewIcon, null), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, null), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
                             transform: "scale(1.1)",
                             color: "blue.500",
                             boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",

package/dist/Components/Search/Search.js

@@ -32,12 +32,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_1 = __importDefault(require("@emotion/styled"));
-var fa_1 = require("react-icons/fa");
-var io_1 = require("react-icons/io");
+var lucide_react_1 = require("lucide-react");
 var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  padding: 0.5rem 0.7rem 0.5rem 0.7rem;\n  width: 100%;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  border-radius: 20px;\n  background: #fff;\n  border: 1px solid #f1f1f1;\n"], ["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  padding: 0.5rem 0.7rem 0.5rem 0.7rem;\n  width: 100%;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  border-radius: 20px;\n  background: #fff;\n  border: 1px solid #f1f1f1;\n"])));
 var Input = styled_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  outline: none;\n  margin-left: 0.5rem;\n  background: transparent;\n"], ["\n  flex: 1;\n  border: none;\n  outline: none;\n  margin-left: 0.5rem;\n  background: transparent;\n"])));
-var SearchIcon = (0, styled_1.default)(fa_1.FaSearch)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #888;\n"], ["\n  color: #888;\n"])));
-var CloseIcon = (0, styled_1.default)(io_1.IoIosClose)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #888;\n  font-size: 1.5rem;\n"], ["\n  color: #888;\n  font-size: 1.5rem;\n"])));
+var SearchIcon = (0, styled_1.default)(lucide_react_1.Search)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #888;\n"], ["\n  color: #888;\n"])));
+var CloseIcon = (0, styled_1.default)(lucide_react_1.X)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #888;\n  font-size: 1.5rem;\n"], ["\n  color: #888;\n  font-size: 1.5rem;\n"])));
 var Shortcut = styled_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: auto;\n  padding-left: 0.5rem;\n  color: #888;\n  font-size: 0.9rem;\n"], ["\n  margin-left: auto;\n  padding-left: 0.5rem;\n  color: #888;\n  font-size: 0.9rem;\n"])));
 function Search(_a) {
     var _b = _a.placeholder, placeholder = _b === void 0 ? "Search..." : _b, onSearch = _a.onSearch, onclose = _a.onclose, _c = _a.shortcut, shortcut = _c === void 0 ? "Ctrl+K" : _c, query = _a.query;

package/dist/Components/SideBar/SideBar.js

@@ -25,9 +25,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var fi_1 = require("react-icons/fi");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var Sidebar_1 = require("../../Constants/Sidebar");
+var lucide_react_1 = require("lucide-react");
 function Sidebar(_a) {
     var _b, _c;
     var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName;
@@ -65,7 +65,7 @@ function Sidebar(_a) {
                 react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 20, fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
                 react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
             react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
-                react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
+                react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
             react_1.default.createElement(react_2.Flex, { mt: 50, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
                 react_1.default.createElement(RenderMenuItems, null)))));
 }

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -1,4 +1,3 @@
-import { IconType } from "react-icons";
 export type SidebarProps = {
     menus: Menu[];
     activeMenu: string;
@@ -10,7 +9,7 @@ export type SidebarProps = {
 };
 type Menu = {
     title: string;
-    icon: IconType;
+    icon: any;
     url: string;
     subMenu?: {
         title: string;

package/dist/Components/SideBar/Sidebar.stories.js

@@ -3,6 +3,5 @@
 // import { StoryFn, Meta } from '@storybook/react/types-6-0';
 // import Sidebar from './SideBar';
 // import { SidebarProps } from './SideBarProps';
-// import { FiBriefcase, FiCalendar, FiDollarSign, FiHome, FiSettings, FiUser } from 'react-icons/fi';
 // import { fn } from '@storybook/test';
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Table/Components/Pagination.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
-var fa_1 = require("react-icons/fa");
 var table_1 = require("../../../Utils/table");
+var lucide_react_1 = require("lucide-react");
 var Pagination = function (_a) {
     var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination;
     var pageSizeOptions = (0, table_1.pageSizeCalculation)(dataLength);
@@ -19,9 +19,9 @@ var Pagination = function (_a) {
             pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); }))),
         react_1.default.createElement(react_2.Flex, null,
             react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
-                react_1.default.createElement(fa_1.FaAngleDoubleLeft, null)),
+                react_1.default.createElement(lucide_react_1.ChevronsLeft, null)),
             react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } },
-                react_1.default.createElement(fa_1.FaAngleLeft, null)),
+                react_1.default.createElement(lucide_react_1.ChevronLeft, null)),
             react_1.default.createElement(react_2.Text, { mx: 1, mt: 3, fontSize: 12 },
                 "Page ",
                 currentPage + 1,
@@ -30,8 +30,8 @@ var Pagination = function (_a) {
             react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
                     return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
                 } },
-                react_1.default.createElement(fa_1.FaAngleRight, null)),
+                react_1.default.createElement(lucide_react_1.ChevronRight, null)),
             react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
-                react_1.default.createElement(fa_1.FaAngleDoubleRight, null)))));
+                react_1.default.createElement(lucide_react_1.ChevronsRight, null)))));
 };
 exports.default = Pagination;

package/dist/Components/Table/Components/TableActions.js

@@ -5,26 +5,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
-var fa_1 = require("react-icons/fa");
-var md_1 = require("react-icons/md");
-var icons_1 = require("@chakra-ui/icons");
+var lucide_react_1 = require("lucide-react");
 var TableActions = function (_a) {
     var row = _a.row;
     return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", closeOnBlur: true },
         react_1.default.createElement(react_2.PopoverTrigger, null,
-            react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(fa_1.FaEllipsisV, { fontSize: 12 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" } })),
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { fontSize: 12 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" } })),
         react_1.default.createElement(react_2.Portal, null,
             react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
                 react_1.default.createElement(react_2.PopoverBody, null,
                     react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
                         row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { return row === null || row === void 0 ? void 0 : row.onLink(row); } },
-                            react_1.default.createElement(icons_1.ExternalLinkIcon, null),
+                            react_1.default.createElement(lucide_react_1.ExternalLink, null),
                             " View")),
                         row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
-                            react_1.default.createElement(icons_1.EditIcon, null),
+                            react_1.default.createElement(lucide_react_1.Pencil, null),
                             " Edit")),
                         row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
-                            react_1.default.createElement(md_1.MdDelete, null),
+                            react_1.default.createElement(lucide_react_1.Trash2, null),
                             "Delete"))))))));
 };
 exports.default = TableActions;

package/dist/Components/Table/Components/TableBody.js

@@ -31,8 +31,8 @@ var react_2 = __importStar(require("react"));
 var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var TableLoading_1 = require("./TableLoading");
-var fa_1 = require("react-icons/fa");
 var TableActions_1 = __importDefault(require("./TableActions"));
+var lucide_react_1 = require("lucide-react");
 var TableBody = function (_a) {
     var _b;
     var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
@@ -68,7 +68,7 @@ var TableBody = function (_a) {
     var RenderContent = (0, react_2.useCallback)(function (_a) {
         var _b, _c;
         var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
-        return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: isExpanded ? (react_2.default.createElement(fa_1.FaAngleDown, { fontSize: 16 })) : (react_2.default.createElement(fa_1.FaAngleRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
+        return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
     }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
     var RenderView = (0, react_2.useCallback)(function (_a) {
         var _b;

package/dist/Components/Table/Components/TableFilters.js

@@ -24,10 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var icons_1 = require("@chakra-ui/icons");
 var react_2 = require("@chakra-ui/react");
-var fa_1 = require("react-icons/fa");
 var table_1 = require("../../../Utils/table");
+var lucide_react_1 = require("lucide-react");
 var TableFilters = (0, react_1.memo)(function (_a) {
     var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose;
     var searchRef = (0, react_1.useRef)(null);
@@ -44,13 +43,13 @@ var TableFilters = (0, react_1.memo)(function (_a) {
             setRefreshDataOnOpen(function (prev) { return !prev; });
         } },
         react_1.default.createElement(react_2.PopoverTrigger, null,
-            react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(fa_1.FaEllipsisV, null), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, null), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
         react_1.default.createElement(react_2.Portal, null,
             react_1.default.createElement(react_2.PopoverContent, { width: "200px" },
                 react_1.default.createElement(react_2.PopoverBody, { p: 2 },
                     react_1.default.createElement(react_2.InputGroup, { flex: "1", size: "xs" },
                         react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
-                            react_1.default.createElement(icons_1.SearchIcon, { color: "gray.300" })),
+                            react_1.default.createElement(lucide_react_1.Search, { color: "gray.300" })),
                         react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
                                 e.stopPropagation();
                                 debounceRef(e.target.value);

package/dist/Components/Table/Components/TableHeader.js

@@ -41,10 +41,8 @@ var react_1 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
 var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var fa_1 = require("react-icons/fa");
-var pi_1 = require("react-icons/pi");
-var lu_1 = require("react-icons/lu");
 var TableFilters_1 = __importDefault(require("./TableFilters"));
+var lucide_react_1 = require("lucide-react");
 var TableHeader = function (_a) {
     var _b;
     var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch;
@@ -66,14 +64,14 @@ var TableHeader = function (_a) {
         var _a;
         return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
             react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
-                react_2.default.createElement(pi_1.PiTreeViewFill, { fontSize: 18 }))));
+                react_2.default.createElement(lucide_react_1.FolderGit2, { fontSize: 18 }))));
     }, [freezedBgColor, noBorders, theme.colors.gray]);
     var RenderView = (0, react_2.useCallback)(function () {
         var _a;
         var BgColor = isActionFreeze ? freezedBgColor : headerBgColor;
         return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: BgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
             react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
-                react_2.default.createElement(lu_1.LuFileSymlink, { fontSize: 16 }))));
+                react_2.default.createElement(lucide_react_1.FileSymlink, { fontSize: 16 }))));
     }, [
         freezedBgColor,
         noBorders,
@@ -96,9 +94,9 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
     var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", ml: 2, onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
-        sortState === "none" && react_2.default.createElement(fa_1.FaSort, { color: "black", size: 14 }),
-        sortState === "asc" && react_2.default.createElement(fa_1.FaCaretUp, { color: "black", size: 14 }),
-        sortState === "desc" && react_2.default.createElement(fa_1.FaCaretDown, { color: "black", size: 14 })));
+        sortState === "none" && react_2.default.createElement(lucide_react_1.ChevronsUpDown, { color: "black", size: 14 }),
+        sortState === "asc" && react_2.default.createElement(lucide_react_1.ChevronUp, { color: "black", size: 14 }),
+        sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { color: "black", size: 14 })));
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
     var _b;

package/dist/Components/Table/TableSettings/ManageColumns.js

@@ -48,9 +48,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var rx_1 = require("react-icons/rx");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
 var ManageColumns = function (_a) {
     var columns = _a.columns, childInputMethodsRef = _a.childInputMethodsRef;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -98,7 +98,7 @@ var ManageColumns = function (_a) {
                 } }),
             react_1.default.createElement(react_2.Text, { ml: "2", fontSize: 14 }, "Select all"))),
         react_1.default.createElement(react_2.List, { spacing: "2" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", justifyContent: "space-between", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14 },
-            react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(rx_1.RxDragHandleDots2, null), variant: "ghost", cursor: "grab", mr: "8" }),
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "8" }),
             react_1.default.createElement(Checkbox_1.default, { isChecked: item.isHidden, onChange: function () { return toggleCheckbox(index); }, sx: {
                     position: "absolute",
                     left: 50,

package/dist/Components/Table/TableSettings/TableSettings.js

@@ -29,9 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
 var ManageColumns_1 = __importDefault(require("./ManageColumns"));
-var io5_1 = require("react-icons/io5");
 var Button_1 = __importDefault(require("../../Button/Button"));
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
 var TableSettings = function (_a) {
     var columns = _a.columns, onSave = _a.onSave;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -41,7 +41,7 @@ var TableSettings = function (_a) {
     return (react_2.default.createElement(react_1.Box, null,
         react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", mb: 1 },
             react_2.default.createElement(react_1.IconButton, { onClick: function () { return setSettingsOpen(true); }, "aria-label": "Table Settings", border: "1px solid ".concat(theme.colors.gray[300]) },
-                react_2.default.createElement(io5_1.IoSettingsOutline, { fontSize: 18 }))),
+                react_2.default.createElement(lucide_react_1.Settings, { fontSize: 18 }))),
         react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
             react_2.default.createElement(react_1.ModalOverlay, null),
             react_2.default.createElement(react_1.ModalContent, { minW: "700px", minH: "600px" },

package/dist/Components/Timeline/Timeline.js

@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_1 = __importDefault(require("@emotion/styled"));
-var fa_1 = require("react-icons/fa");
 var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
 var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding: 0px 24px;\n  margin: 0 auto;\n  width: 100%;\n  max-width: 800px;\n   @media (max-width: 768px) {\n    padding: 0px 16px;\n    max-width: 100%;\n  }\n"], ["\n  position: relative;\n  padding: 0px 24px;\n  margin: 0 auto;\n  width: 100%;\n  max-width: 800px;\n   @media (max-width: 768px) {\n    padding: 0px 16px;\n    max-width: 100%;\n  }\n"])));
 var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background-color: #d2d9e0;\n  transform: translateX(-50%);\n  @media (max-width: 768px) {\n    left: 25px; /* Move the line towards the left */\n  }\n"], ["\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background-color: #d2d9e0;\n  transform: translateX(-50%);\n  @media (max-width: 768px) {\n    left: 25px; /* Move the line towards the left */\n  }\n"])));
 var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: ", ";\n  width: 100%;\n  // padding: 1rem 0 1rem 0;\n  box-sizing: border-box;\n  position: relative;\n  margin-bottom: 24px;\n  align-items: center; /* Center alignment for dot and event content */\n  text-align: ", ";\n  @media (max-width: 768px) {\n    flex-direction: column;\n    text-align: left;\n    align-items: flex-start;\n  }\n"], ["\n  display: flex;\n  justify-content: ", ";\n  width: 100%;\n  // padding: 1rem 0 1rem 0;\n  box-sizing: border-box;\n  position: relative;\n  margin-bottom: 24px;\n  align-items: center; /* Center alignment for dot and event content */\n  text-align: ", ";\n  @media (max-width: 768px) {\n    flex-direction: column;\n    text-align: left;\n    align-items: flex-start;\n  }\n"])), function (_a) {
@@ -101,11 +101,11 @@ var Timeline = function (_a) {
     var getIcon = function (event) {
         switch (event.action_from) {
             case "Accounts":
-                return react_1.default.createElement(fa_1.FaRupeeSign, null);
+                return react_1.default.createElement(lucide_react_1.IndianRupee, null);
             case "Notes":
-                return react_1.default.createElement(fa_1.FaFileAlt, null);
+                return react_1.default.createElement(lucide_react_1.FileArchive, null);
             default:
-                return react_1.default.createElement(fa_1.FaCircle, null);
+                return react_1.default.createElement(lucide_react_1.Circle, null);
         }
     };
     var groupEventsByDate = function (events) {
@@ -156,7 +156,7 @@ var Timeline = function (_a) {
                             } },
                             react_1.default.createElement(EventTitle, null, event.action_from + " " + event.title),
                             react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), shouldWrapChildren: true, placement: "top", hasArrow: true },
-                                react_1.default.createElement(fa_1.FaInfoCircle, { style: { marginLeft: "5px" } }))),
+                                react_1.default.createElement(lucide_react_1.Info, { style: { marginLeft: "5px" } }))),
                         react_1.default.createElement(EventDate, null, " by " +
                             event.action_by +
                             " " +

package/dist/Components/Trail/EditableCell.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableCell = void 0;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var icons_1 = require("@chakra-ui/icons");
+var lucide_react_1 = require("lucide-react");
 var EditableCell = function (_a) {
     var row = _a.row, column = _a.column, isEditable = _a.isEditable, handleCellClick = _a.handleCellClick, handleCellChange = _a.handleCellChange;
     var cellRef = (0, react_1.useRef)(null);
@@ -47,7 +47,7 @@ var EditableCell = function (_a) {
         else if (column.label === "priority") {
             return (react_1.default.createElement(react_2.Box, { width: "100%", ref: cellRef },
                 react_1.default.createElement(react_2.Menu, { isOpen: true },
-                    react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(icons_1.ChevronDownIcon, null), bg: "teal.500", color: "white", _hover: { bg: "teal.600" }, _active: { bg: "teal.700" } }, value),
+                    react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(lucide_react_1.ChevronDown, null), bg: "teal.500", color: "white", _hover: { bg: "teal.600" }, _active: { bg: "teal.700" } }, value),
                     react_1.default.createElement(react_2.MenuList, null,
                         react_1.default.createElement(react_2.MenuItem, { onClick: function () {
                                 return handleCellChange(row.id, column.label, "Low");