pixelize-design-library 2.3.7 → 2.3.8

package/dist/Components/Form/FormWrapper.js

@@ -1,19 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var FormWrapper = function (_a) {
-    var _b, _c, _d, _e;
-    var icon = _a.icon, text = _a.text, children = _a.children;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    return (react_2.default.createElement(react_1.Box, null,
-        react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2 },
-            icon && react_2.default.createElement(react_1.Icon, { as: icon, size: "1rem", color: (_b = colors === null || colors === void 0 ? void 0 : colors.header) === null || _b === void 0 ? void 0 : _b[500] }),
-            text && (react_2.default.createElement(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: (_c = colors === null || colors === void 0 ? void 0 : colors.header) === null || _c === void 0 ? void 0 : _c[500] }, text))),
-        react_2.default.createElement(react_1.Box, { borderRadius: "0.25rem", bg: colors === null || colors === void 0 ? void 0 : colors.white, border: "0.075rem solid ".concat((_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500]), boxShadow: "0 0.063rem 0.125rem 0 ".concat((_e = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary), p: "1.5rem" }, children)));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const FormWrapper = ({ icon, text, children, }) => {
+    var _a, _b, _c, _d;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, size: "1rem", color: (_a = colors === null || colors === void 0 ? void 0 : colors.header) === null || _a === void 0 ? void 0 : _a[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: (_b = colors === null || colors === void 0 ? void 0 : colors.header) === null || _b === void 0 ? void 0 : _b[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "0.25rem", bg: colors === null || colors === void 0 ? void 0 : colors.white, border: `0.075rem solid ${(_c = colors === null || colors === void 0 ? void 0 : colors.border) === null || _c === void 0 ? void 0 : _c[500]}`, boxShadow: `0 0.063rem 0.125rem 0 ${(_d = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _d === void 0 ? void 0 : _d.primary}`, p: "1.5rem", children: children })] }));
 };
 exports.default = FormWrapper;

package/dist/Components/Header/Header.d.ts

@@ -2,3 +2,4 @@ import { FC } from "react";
 import { HeaderProps } from "./HeaderProps";
 declare const Header: FC<HeaderProps>;
 export default Header;
+//# sourceMappingURL=Header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/Components/Header/Header.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA6F3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/Components/Header/Header.js

@@ -36,42 +36,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var Sidebar_1 = require("../../Constants/Sidebar");
-var lucide_react_1 = require("lucide-react");
-var react_2 = __importStar(require("react"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var desktopMenu_1 = __importDefault(require("./components/desktopMenu"));
-var mobileMenu_1 = __importDefault(require("./components/mobileMenu"));
-var Header = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var logo = _a.logo, menuItems = _a.menuItems, rightSlot = _a.rightSlot, active = _a.active, colors = _a.colors, boxShadow = _a.boxShadow, onMobileMenuClose = _a.onMobileMenuClose;
-    var _m = (0, react_1.useDisclosure)(), isOpen = _m.isOpen, onOpen = _m.onOpen, onClose = _m.onClose;
-    var _o = (0, react_2.useState)(null), hoveredMenu = _o[0], setHoveredMenu = _o[1];
-    var themeColor = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var bg = (_b = colors === null || colors === void 0 ? void 0 : colors.bg) !== null && _b !== void 0 ? _b : (_c = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _c === void 0 ? void 0 : _c[700];
-    var color = (_d = colors === null || colors === void 0 ? void 0 : colors.color) !== null && _d !== void 0 ? _d : (_e = themeColor === null || themeColor === void 0 ? void 0 : themeColor.background) === null || _e === void 0 ? void 0 : _e[100];
-    var activeBg = (_f = colors === null || colors === void 0 ? void 0 : colors.active) !== null && _f !== void 0 ? _f : (_g = themeColor === null || themeColor === void 0 ? void 0 : themeColor.primary) === null || _g === void 0 ? void 0 : _g[400];
-    var hoverBg = (_h = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _h !== void 0 ? _h : (_j = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _j === void 0 ? void 0 : _j[500];
-    var hoverText = (_k = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _k !== void 0 ? _k : (_l = themeColor === null || themeColor === void 0 ? void 0 : themeColor.text) === null || _l === void 0 ? void 0 : _l[600];
-    var isActive = function (href) { return href && active === href; };
-    var closeMobileMenu = function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Sidebar_1 = require("../../Constants/Sidebar");
+const lucide_react_1 = require("lucide-react");
+const react_2 = __importStar(require("react"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const desktopMenu_1 = __importDefault(require("./components/desktopMenu"));
+const mobileMenu_1 = __importDefault(require("./components/mobileMenu"));
+const Header = ({ logo, menuItems, rightSlot, active, colors, boxShadow, onMobileMenuClose }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { isOpen, onOpen, onClose } = (0, react_1.useDisclosure)();
+    const [hoveredMenu, setHoveredMenu] = (0, react_2.useState)(null);
+    const { colors: themeColor } = (0, useCustomTheme_1.useCustomTheme)();
+    const bg = (_a = colors === null || colors === void 0 ? void 0 : colors.bg) !== null && _a !== void 0 ? _a : (_b = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _b === void 0 ? void 0 : _b[700];
+    const color = (_c = colors === null || colors === void 0 ? void 0 : colors.color) !== null && _c !== void 0 ? _c : (_d = themeColor === null || themeColor === void 0 ? void 0 : themeColor.background) === null || _d === void 0 ? void 0 : _d[100];
+    const activeBg = (_e = colors === null || colors === void 0 ? void 0 : colors.active) !== null && _e !== void 0 ? _e : (_f = themeColor === null || themeColor === void 0 ? void 0 : themeColor.primary) === null || _f === void 0 ? void 0 : _f[400];
+    const hoverBg = (_g = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _g !== void 0 ? _g : (_h = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _h === void 0 ? void 0 : _h[500];
+    const hoverText = (_j = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _j !== void 0 ? _j : (_k = themeColor === null || themeColor === void 0 ? void 0 : themeColor.text) === null || _k === void 0 ? void 0 : _k[600];
+    const isActive = (href) => href && active === href;
+    const closeMobileMenu = () => {
         onClose();
         onMobileMenuClose === null || onMobileMenuClose === void 0 ? void 0 : onMobileMenuClose();
     };
-    var rightSlotWithApi = react_2.default.isValidElement(rightSlot)
-        ? react_2.default.cloneElement(rightSlot, { closeMobileMenu: closeMobileMenu })
+    const rightSlotWithApi = react_2.default.isValidElement(rightSlot)
+        ? react_2.default.cloneElement(rightSlot, { closeMobileMenu })
         : rightSlot;
-    return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky" },
-        react_2.default.createElement(react_1.Flex, { h: Sidebar_1.HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start" },
-            react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center" },
-                react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
-                react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText })),
-            react_2.default.createElement(react_1.Spacer, null),
-            react_2.default.createElement(react_1.HStack, { spacing: 3, align: "center" },
-                react_2.default.createElement(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" } }, rightSlotWithApi),
-                react_2.default.createElement(react_1.HStack, { spacing: 2, display: { base: "flex", md: "none" } }, rightSlotWithApi),
-                react_2.default.createElement(react_1.IconButton, { variant: "unstyled", icon: react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full" }, isOpen ? react_2.default.createElement(lucide_react_1.X, { size: 20 }) : react_2.default.createElement(lucide_react_1.MenuIcon, { size: 20 })), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen }))),
-        react_2.default.createElement(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlotWithApi, onClose: closeMobileMenu })));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { h: Sidebar_1.HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 6, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { cursor: "pointer", children: logo }), (0, jsx_runtime_1.jsx)(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText })] }), (0, jsx_runtime_1.jsx)(react_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" }, children: rightSlotWithApi }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 2, display: { base: "flex", md: "none" }, children: rightSlotWithApi }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { variant: "unstyled", icon: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), (0, jsx_runtime_1.jsx)(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlotWithApi, onClose: closeMobileMenu })] }));
 };
 exports.default = Header;

package/dist/Components/Header/HeaderActions.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { OptionProp } from "../Select/SelectProps";
 declare const HeaderActions: ({ select, edit, create, }: {
     select?: {
@@ -19,5 +18,6 @@ declare const HeaderActions: ({ select, edit, create, }: {
         onCreate?: () => void;
         label?: string;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default HeaderActions;
+//# sourceMappingURL=HeaderActions.d.ts.map

package/dist/Components/Header/HeaderActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderActions.d.ts","sourceRoot":"","sources":["../../../src/Components/Header/HeaderActions.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAInD,QAAA,MAAM,aAAa,GAAI,2BAIpB;IACD,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;QACvB,cAAc,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;QAC/C,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,4CA+DA,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Components/Header/HeaderActions.js

@@ -3,36 +3,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var Select_1 = __importDefault(require("../Select/Select"));
-var Divider_1 = __importDefault(require("../Divider/Divider"));
-var HeaderActions = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var select = _a.select, edit = _a.edit, create = _a.create;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var elements = [];
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = __importDefault(require("react"));
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Select_1 = __importDefault(require("../Select/Select"));
+const Divider_1 = __importDefault(require("../Divider/Divider"));
+const HeaderActions = ({ select, edit, create, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
-        elements.push(react_2.default.createElement(react_1.Box, { key: "select", width: (_b = select.width) !== null && _b !== void 0 ? _b : "12.5rem" },
-            react_2.default.createElement(Select_1.default, { key: "select", options: (_c = select.options) !== null && _c !== void 0 ? _c : [], placeholder: select.selectPlaceholderText, onChange: function (option) { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value })));
+        elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
-        elements.push(react_2.default.createElement(react_1.Box, { key: "edit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); } },
-            react_2.default.createElement(lucide_react_1.SquarePen, { size: 16, color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[500] }),
-            react_2.default.createElement(react_1.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _e === void 0 ? void 0 : _e[500] }, edit.label ? edit.label : "Edit Layout")));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[500] }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _d === void 0 ? void 0 : _d[500], children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push(react_2.default.createElement(react_1.Box, { key: "create", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); } },
-            react_2.default.createElement(lucide_react_1.CirclePlus, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[500] }),
-            react_2.default.createElement(react_1.Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _g === void 0 ? void 0 : _g[500] },
-                " ",
-                create.label ? create.label : "Create New",
-                " ")));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500] }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: (_f = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _f === void 0 ? void 0 : _f[500], children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
-    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem" }, elements.map(function (el, i) { return (react_2.default.createElement(react_2.default.Fragment, { key: i },
-        i > 0 && react_2.default.createElement(Divider_1.default, null),
-        el)); })));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), el] }, i))) }));
 };
 exports.default = HeaderActions;

package/dist/Components/Header/HeaderProps.d.ts

@@ -46,3 +46,4 @@ export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pic
     onClose?: () => void;
 };
 export {};
+//# sourceMappingURL=HeaderProps.d.ts.map

package/dist/Components/Header/HeaderProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Header/HeaderProps.ts"],"names":[],"mappings":"AAAA,KAAK,OAAO,GAAG;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,SAAS,CAAC;KACf,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,SAAS,CAAC;KACf,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG;IAC5E,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,EAAE,GAAG,SAAS,CAAC;IACtD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IAChJ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAA"}

package/dist/Components/Header/components/desktopMenu.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { DesktopMenuProps } from "../HeaderProps";
-declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }: DesktopMenuProps) => React.JSX.Element;
+declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }: DesktopMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DesktopMenu;
+//# sourceMappingURL=desktopMenu.d.ts.map

package/dist/Components/Header/components/desktopMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"desktopMenu.d.ts","sourceRoot":"","sources":["../../../../src/Components/Header/components/desktopMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAG,MAAM,gBAAgB,CAAC;AAGnD,QAAA,MAAM,WAAW,GAAI,2GAUlB,gBAAgB,4CAkHlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/Header/components/desktopMenu.js

@@ -1,43 +1,29 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-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");
-var DesktopMenu = function (_a) {
-    var menuItems = _a.menuItems, rightSlot = _a.rightSlot, setHoveredMenu = _a.setHoveredMenu, isActive = _a.isActive, activeBg = _a.activeBg, hoveredMenu = _a.hoveredMenu, hoverBg = _a.hoverBg, color = _a.color, hoverTextColor = _a.hoverTextColor;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    return (react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0, wrap: "wrap", padding: "0.5rem 1.5rem" }, menuItems.map(function (item) {
-        var _a, _b, _c, _d;
-        var hasChildren = !!item.children;
-        var isHovered = hoveredMenu === item.label;
-        return (react_2.default.createElement(react_1.Box, { key: item.label, position: "relative", onMouseEnter: function () { return hasChildren && setHoveredMenu(item.label); }, onMouseLeave: function () { return hasChildren && setHoveredMenu(null); } },
-            react_2.default.createElement(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 }) : undefined, 
-                // bg={isActive(item.href) ? activeBg : "transparent"}
-                borderBottom: "2px solid ".concat(isActive(item.href) ? activeBg : "transparent"), borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: isActive(item.href) ? activeBg : color },
-                react_2.default.createElement(react_1.VStack, { spacing: 0 },
-                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
-                        // backdropFilter="saturate(180%) blur(6px)"
-                        // bg="whiteAlpha.800"
-                        // color="gray.800"
-                        px: 2, py: 0.5 }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
-                    react_2.default.createElement(react_1.Text, null, item.label))),
-            hasChildren && (react_2.default.createElement(react_1.Collapse, { in: isHovered, animateOpacity: true },
-                react_2.default.createElement(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10 },
-                    react_2.default.createElement(react_1.Stack, { spacing: 1, p: 2 }, (_d = item.children) === null || _d === void 0 ? void 0 : _d.map(function (subItem) {
-                        var _a, _b, _c, _d;
-                        return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor } },
-                            react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                                subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "md", boxShadow: "sm", 
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0, wrap: "wrap", padding: "0.5rem 1.5rem", children: menuItems.map((item) => {
+            var _a, _b, _c, _d;
+            const hasChildren = !!item.children;
+            const isHovered = hoveredMenu === item.label;
+            return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", onMouseEnter: () => hasChildren && setHoveredMenu(item.label), onMouseLeave: () => hasChildren && setHoveredMenu(null), children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }) : undefined, 
+                        // bg={isActive(item.href) ? activeBg : "transparent"}
+                        borderBottom: `2px solid ${isActive(item.href) ? activeBg : "transparent"}`, borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: isActive(item.href) ? activeBg : color, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
                                     // backdropFilter="saturate(180%) blur(6px)"
                                     // bg="whiteAlpha.800"
                                     // color="gray.800"
-                                    px: 2, py: 0.5 }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
-                                react_2.default.createElement(react_1.Text, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[800], _hover: { color: hoverTextColor } }, subItem.label))));
-                    })))))));
-    })));
+                                    px: 2, py: 0.5, children: (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }), hasChildren && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isHovered, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: 1, p: 2, children: (_d = item.children) === null || _d === void 0 ? void 0 : _d.map((subItem) => {
+                                    var _a, _b, _c, _d;
+                                    return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "md", boxShadow: "sm", 
+                                                    // backdropFilter="saturate(180%) blur(6px)"
+                                                    // bg="whiteAlpha.800"
+                                                    // color="gray.800"
+                                                    px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));
+                                }) }) }) }))] }, item.label));
+        }) }));
 };
 exports.default = DesktopMenu;

package/dist/Components/Header/components/mobileMenu.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { MobileMenuProps } from "../HeaderProps";
-declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }: MobileMenuProps) => React.JSX.Element;
+declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MobileMenu;
+//# sourceMappingURL=mobileMenu.d.ts.map

package/dist/Components/Header/components/mobileMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobileMenu.d.ts","sourceRoot":"","sources":["../../../../src/Components/Header/components/mobileMenu.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,QAAA,MAAM,UAAU,GAAI,gFASjB,eAAe,4CAoJjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/Components/Header/components/mobileMenu.js

@@ -3,61 +3,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var lucide_react_1 = require("lucide-react");
-var MobileMenu = function (_a) {
-    var menuItems = _a.menuItems, isOpen = _a.isOpen, isActive = _a.isActive, hoverBg = _a.hoverBg, activeBg = _a.activeBg, color = _a.color, rightSlot = _a.rightSlot, onClose = _a.onClose;
-    var _b = react_2.default.useState(null), openMenuLabel = _b[0], setOpenMenuLabel = _b[1];
-    react_2.default.useEffect(function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = __importDefault(require("react"));
+const lucide_react_1 = require("lucide-react");
+const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }) => {
+    const [openMenuLabel, setOpenMenuLabel] = react_2.default.useState(null);
+    react_2.default.useEffect(() => {
         if (!isOpen)
             setOpenMenuLabel(null);
     }, [isOpen]);
-    return (react_2.default.createElement(react_1.Collapse, { in: isOpen, animateOpacity: true },
-        react_2.default.createElement(react_1.Box, { pb: 4, display: { md: "none" } },
-            react_2.default.createElement(react_1.Stack, { spacing: 4 },
-                menuItems.map(function (item) {
-                    var _a, _b, _c, _d, _e;
-                    return item.children ? (react_2.default.createElement(react_1.Box, { key: item.label, px: 2 },
-                        react_2.default.createElement(react_1.Button, { onClick: function () {
-                                return setOpenMenuLabel(function (prev) { return (prev === item.label ? null : item.label); });
-                            }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: item.children.some(function (subItem) { return isActive(subItem.href); })
-                                ? activeBg
-                                : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16 })), px: 2 },
-                            react_2.default.createElement(react_1.HStack, { w: "full", justify: "space-between", align: "center" },
-                                react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
+    return ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { pb: 4, display: { md: "none" }, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: 4, children: [menuItems.map((item) => {
+                        var _a, _b, _c, _d, _e;
+                        return item.children ? ((0, jsx_runtime_1.jsxs)(react_1.Box, { px: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: item.children.some((subItem) => isActive(subItem.href))
+                                        ? activeBg
+                                        : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
+                                                    // backdropFilter="saturate(180%) blur(6px)"
+                                                    // bg="whiteAlpha.800"
+                                                    // color="gray.800"
+                                                    px: 2, py: 0.5, children: item.badge.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                            var _a, _b, _c;
+                                            return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
+                                                    var _a;
+                                                    (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
+                                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
+                                                            // backdropFilter="saturate(180%) blur(6px)"
+                                                            // bg="whiteAlpha.800"
+                                                            // color="gray.800"
+                                                            px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                        }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
                                         // backdropFilter="saturate(180%) blur(6px)"
                                         // bg="whiteAlpha.800"
                                         // color="gray.800"
-                                        px: 2, py: 0.5 }, item.badge.label)),
-                                    react_2.default.createElement(react_1.Text, { fontWeight: "bold" }, item.label)))),
-                        react_2.default.createElement(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true },
-                            react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1, spacing: 1 }, item.children.map(function (subItem) {
-                                var _a, _b, _c;
-                                return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: function () {
-                                        var _a;
-                                        (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
-                                        onClose === null || onClose === void 0 ? void 0 : onClose();
-                                    }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
-                                    react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                                        subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
-                                            // backdropFilter="saturate(180%) blur(6px)"
-                                            // bg="whiteAlpha.800"
-                                            // color="gray.800"
-                                            px: 2, py: 0.5 }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
-                                        react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center" },
-                                            react_2.default.createElement(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }),
-                                            react_2.default.createElement(react_1.Text, { fontSize: "sm" }, subItem.label)))));
-                            }))))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
-                        react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                            item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
-                                // backdropFilter="saturate(180%) blur(6px)"
-                                // bg="whiteAlpha.800"
-                                // color="gray.800"
-                                px: 2, py: 0.5 }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
-                            react_2.default.createElement(react_1.Text, null, item.label))));
-                }),
-                rightSlot && react_2.default.createElement(react_1.Box, { mt: 4 }, rightSlot)))));
+                                        px: 2, py: 0.5, children: (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
+                    }), rightSlot && (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 4, children: rightSlot })] }) }) }));
 };
 exports.default = MobileMenu;

package/dist/Components/Input/Input/Input.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { InputProps } from "./InputProps";
-declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }: InputProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }: InputProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/Components/Input/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;uLAkBvC,UAAU;AA2Eb,wBAAiC"}

package/dist/Components/Input/Input/Input.js

@@ -36,44 +36,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var FormLabel_1 = require("../../Common/FormLabel");
-var fieldStyles_1 = require("../../Common/fieldStyles");
-var ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
-var Input = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    var label = _a.label, type = _a.type, value = _a.value, onChange = _a.onChange, error = _a.error, placeholder = _a.placeholder, className = _a.className, inputBoxClassName = _a.inputBoxClassName, isRequired = _a.isRequired, isInformation = _a.isInformation, informationMessage = _a.informationMessage;
-    var theme = (0, react_2.useTheme)();
-    var colors = theme.colors;
-    var _s = (0, react_1.useState)(false), showPassword = _s[0], setShowPassword = _s[1];
-    var isPassword = type === "password";
-    var inputType = isPassword ? (showPassword ? "text" : "password") : type;
-    var borderColor = error
-        ? (_c = (_b = colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500]
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const FormLabel_1 = require("../../Common/FormLabel");
+const fieldStyles_1 = require("../../Common/fieldStyles");
+const ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
+const Input = ({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const theme = (0, react_2.useTheme)();
+    const { colors } = theme;
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const isPassword = type === "password";
+    const inputType = isPassword ? (showPassword ? "text" : "password") : type;
+    const borderColor = error
+        ? (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]
         : value
-            ? (_d = colors.primary) === null || _d === void 0 ? void 0 : _d[500]
-            : (_e = colors.boxborder) === null || _e === void 0 ? void 0 : _e[500];
-    var shadowPrimary = (_f = colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary;
-    var shadowError = (_g = colors.boxShadow) === null || _g === void 0 ? void 0 : _g.error;
-    return (react_1.default.createElement(react_2.Box, { className: inputBoxClassName, mb: 4 },
-        react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }),
-        react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", overflow: "hidden" },
-            react_1.default.createElement(react_2.Input, { type: inputType, value: value, onChange: function (e) { return onChange(e.target.value); }, placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: fieldStyles_1.FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: (_h = colors.secondary) === null || _h === void 0 ? void 0 : _h[500], pr: isPassword ? 10 : 4, _hover: {
-                    borderColor: error
-                        ? (_k = (_j = colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[600]
-                        : value
-                            ? (_l = colors.primary) === null || _l === void 0 ? void 0 : _l[600]
-                            : (_m = colors.gray) === null || _m === void 0 ? void 0 : _m[400],
-                }, _focus: {
-                    borderColor: error ? (_p = (_o = colors.semantic) === null || _o === void 0 ? void 0 : _o.error) === null || _p === void 0 ? void 0 : _p[500] : (_q = colors.primary) === null || _q === void 0 ? void 0 : _q[500],
-                    boxShadow: error
-                        ? "0 0 0 0.125rem ".concat(shadowError)
-                        : "0 0 0 0.125rem ".concat(shadowPrimary),
-                    outline: "none",
-                }, required: isRequired }),
-            isPassword && (react_1.default.createElement(react_2.IconButton, { type: "button", "aria-label": showPassword ? "Hide password" : "Show password", variant: "ghost", size: "sm", position: "absolute", right: 2, top: "50%", transform: "translateY(-50%)", icon: showPassword ? react_1.default.createElement(lucide_react_1.Eye, { size: 20 }) : react_1.default.createElement(lucide_react_1.EyeOff, { size: 20 }), onClick: function () { return setShowPassword(function (prev) { return !prev; }); }, color: (_r = colors.gray) === null || _r === void 0 ? void 0 : _r[400] }))),
-        error && react_1.default.createElement(ErrorComponent_1.default, { error: error })));
+            ? (_c = colors.primary) === null || _c === void 0 ? void 0 : _c[500]
+            : (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[500];
+    const shadowPrimary = (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary;
+    const shadowError = (_f = colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { className: inputBoxClassName, mb: 4, children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: fieldStyles_1.FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: (_g = colors.secondary) === null || _g === void 0 ? void 0 : _g[500], pr: isPassword ? 10 : 4, _hover: {
+                            borderColor: error
+                                ? (_j = (_h = colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[600]
+                                : value
+                                    ? (_k = colors.primary) === null || _k === void 0 ? void 0 : _k[600]
+                                    : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[400],
+                        }, _focus: {
+                            borderColor: error ? (_o = (_m = colors.semantic) === null || _m === void 0 ? void 0 : _m.error) === null || _o === void 0 ? void 0 : _o[500] : (_p = colors.primary) === null || _p === void 0 ? void 0 : _p[500],
+                            boxShadow: error
+                                ? `0 0 0 0.125rem ${shadowError}`
+                                : `0 0 0 0.125rem ${shadowPrimary}`,
+                            outline: "none",
+                        }, required: isRequired }), isPassword && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { type: "button", "aria-label": showPassword ? "Hide password" : "Show password", variant: "ghost", size: "sm", position: "absolute", right: 2, top: "50%", transform: "translateY(-50%)", icon: showPassword ? (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 20 }), onClick: () => setShowPassword((prev) => !prev), color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[400] }))] }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
 };
 exports.default = react_1.default.memo(Input);

package/dist/Components/Input/Input/InputProps.d.ts

@@ -17,3 +17,4 @@ export type InputProps = {
     isInformation?: boolean;
     informationMessage?: string;
 };
+//# sourceMappingURL=InputProps.d.ts.map

package/dist/Components/Input/Input/InputProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputProps.d.ts","sourceRoot":"","sources":["../../../../src/Components/Input/Input/InputProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAE/B,CAAA"}

package/dist/Components/Input/PhoneNumberInput.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { PhoneNumberInputProps } from "./PhoneNumberInputProps";
-declare const PhoneNumberInput: ({ size, value, codeValueReturn, country, countries, placeholder, onChange, inputId, selectId, error, errorMessage, helperText, label, id, width, isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect, ref, name, minW, maxW, ...rest }: PhoneNumberInputProps) => React.JSX.Element;
+declare const PhoneNumberInput: ({ size, value, codeValueReturn, country, countries, placeholder, onChange, inputId, selectId, error, errorMessage, helperText, label, id, width, isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect, ref, name, minW, maxW, ...rest }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export default PhoneNumberInput;
+//# sourceMappingURL=PhoneNumberInput.d.ts.map

package/dist/Components/Input/PhoneNumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/Components/Input/PhoneNumberInput.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAkBhE,QAAA,MAAM,gBAAgB,GAAI,wSA8BvB,qBAAqB,4CA4HvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}