@anywayseo/tools 2.2.2 → 2.2.4

package/dist/components/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-BkW3HmFj.js");
+const index = require("../index-DWa1ea5F.js");
 exports.Author = index.Author;
 exports.BonusCard = index.BonusCard;
 exports.Center = index.Center;

package/dist/components/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "../index-BOs_12nr.mjs";
+import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "../index-COCjNsCL.mjs";
 export {
   A as Author,
   B as BonusCard,

package/dist/components/layout/header/navigation/mobile/nav-list/index.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { INavItem } from '../../../../../../types';
 type NavListProps = INavItem & {
     isExpanded: boolean;
-    onExpand: (id: INavItem['path']) => void;
+    onExpand: VoidFunction;
 };
 declare const NavList: FC<NavListProps>;
 export default NavList;

package/dist/{index-BOs_12nr.mjs → index-COCjNsCL.mjs}

@@ -617,7 +617,7 @@ const NavList$1 = ({ path, label, children }) => {
         children: label
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsx(List$1, { spacing: 2, p: 0, children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(ListItem, { rounded: "md", _hover: { bg: backgroundHover }, children: /* @__PURE__ */ jsxs(Flex, { as: Link$1, to: `${path}${child.path}`, p: 2, role: "group", children: [
+    /* @__PURE__ */ jsx(PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsx(List$1, { spacing: 2, p: 0, children: children == null ? void 0 : children.map((child, index) => /* @__PURE__ */ jsx(ListItem, { rounded: "md", _hover: { bg: backgroundHover }, children: /* @__PURE__ */ jsxs(Flex, { as: Link$1, to: `${path}${child.path}`, p: 2, role: "group", children: [
       /* @__PURE__ */ jsx(Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.label }),
       /* @__PURE__ */ jsx(
         Flex,
@@ -632,37 +632,35 @@ const NavList$1 = ({ path, label, children }) => {
           children: /* @__PURE__ */ jsx(Icon, { as: ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
         }
       )
-    ] }) }, child.path)) }) })
+    ] }) }, index)) }) })
   ] });
 };
 const DesktopNavigation = ({ menu }) => {
   return /* @__PURE__ */ jsx(Flex, { as: "ul", role: "list", gap: 2, p: 0, display: { base: "none", md: "flex" }, children: menu.map((item, index) => {
     var _a;
-    return /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(NavList$1, { ...item }) : /* @__PURE__ */ jsx(NavLink, { ...item }) }, item.path || index);
+    return /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(NavList$1, { ...item }) : /* @__PURE__ */ jsx(NavLink, { ...item }) }, index);
   }) });
 };
+const CHEVRON_DOWN_ICON_SIZE = "1.5rem";
 const NavList = ({ path, label, children, isExpanded, onExpand }) => {
-  function handleClick() {
-    onExpand(path);
-  }
-  return /* @__PURE__ */ jsxs(Stack, { w: "full", children: [
+  return /* @__PURE__ */ jsxs(Stack, { flex: 1, children: [
     /* @__PURE__ */ jsxs(
       Flex,
       {
         as: "button",
         p: 2,
-        pe: 1,
+        pr: "3px",
         align: "center",
         justifyContent: "space-between",
         _hover: { textDecoration: "none", color: "brand.400" },
-        onClick: handleClick,
+        onClick: onExpand,
         children: [
           /* @__PURE__ */ jsx(Text, { isTruncated: true, fontWeight: 600, children: label }),
           /* @__PURE__ */ jsx(
             ChevronDownIcon,
             {
-              w: 24,
-              h: 24,
+              w: CHEVRON_DOWN_ICON_SIZE,
+              h: CHEVRON_DOWN_ICON_SIZE,
               transform: isExpanded ? "rotate(180deg)" : "",
               transition: "all .25s ease-in-out"
             }
@@ -670,25 +668,29 @@ const NavList = ({ path, label, children, isExpanded, onExpand }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Collapse, { in: isExpanded, transition: { enter: { ease: "easeIn" }, exit: { duration: 0.2 } }, children: /* @__PURE__ */ jsx(List$1, { ml: 2, pl: 0, borderLeft: 1, borderStyle: "solid", borderColor: useColorModeValue("gray.200", "gray.700"), children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: /* @__PURE__ */ jsx(Text, { as: Link$1, to: `${path}${child.path}`, p: 2, fontSize: "sm", children: child.label }) }, child.path)) }) })
+    /* @__PURE__ */ jsx(Collapse, { in: isExpanded, transition: { enter: { ease: "easeIn" }, exit: { duration: 0.2 } }, children: /* @__PURE__ */ jsx(List$1, { ml: 2, pl: 0, borderLeft: 1, borderStyle: "solid", borderColor: useColorModeValue("gray.200", "gray.700"), children: children == null ? void 0 : children.map((child, index) => /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: /* @__PURE__ */ jsx(Text, { as: Link$1, to: `${path}${child.path}`, p: 2, fontSize: "sm", children: child.label }) }, index)) }) })
   ] });
 };
+const CLOSE_ICON_SIZE = "0.75rem";
+const HAMBURGER_ICON_SIZE = "1rem";
 const MobileNavigation = ({ menu }) => {
-  const [selected, setSelected] = useState(null);
+  const [expanded, setExpanded] = useState(null);
   const { isOpen, onToggle } = useDisclosure();
   const background = useColorModeValue("gray.50", "gray.900");
-  function handleExpand(id) {
-    setSelected((prev) => prev === id ? null : id);
+  function handleExpand(index) {
+    return () => {
+      setExpanded((prev) => prev === index ? null : index);
+    };
   }
   function handleClick() {
-    setSelected(null);
+    setExpanded(null);
     onToggle();
   }
   return /* @__PURE__ */ jsxs(Box, { display: { base: "block", md: "none" }, children: [
     /* @__PURE__ */ jsx(
       IconButton,
       {
-        icon: isOpen ? /* @__PURE__ */ jsx(CloseIcon, { w: 12, h: 12 }) : /* @__PURE__ */ jsx(HamburgerIcon, { w: 18, h: 18 }),
+        icon: isOpen ? /* @__PURE__ */ jsx(CloseIcon, { w: CLOSE_ICON_SIZE, h: CLOSE_ICON_SIZE }) : /* @__PURE__ */ jsx(HamburgerIcon, { w: HAMBURGER_ICON_SIZE, h: HAMBURGER_ICON_SIZE }),
         size: "sm",
         variant: "ghost",
         "aria-label": `${isOpen ? "Close" : "Open"} navigation menu`,
@@ -696,10 +698,22 @@ const MobileNavigation = ({ menu }) => {
         onClick: handleClick
       }
     ),
-    /* @__PURE__ */ jsx(Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(Box, { position: "absolute", top: 16, left: 0, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsx(List$1, { spacing: 2, p: 2, w: "full", borderRadius: "md", boxShadow: "md", bg: background, children: menu.map((item, index) => {
-      var _a;
-      return /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(NavList, { ...item, isExpanded: item.path === selected, onExpand: handleExpand }) : /* @__PURE__ */ jsx(NavLink, { ...item }) }, item.path || index);
-    }) }) }) })
+    /* @__PURE__ */ jsx(Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(Box, { position: "absolute", top: 16, left: 0, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsx(
+      List$1,
+      {
+        spacing: 2,
+        p: 2,
+        boxShadow: "md",
+        borderWidth: "1px",
+        borderColor: useColorModeValue("gray.200", "gray.700"),
+        borderRadius: "md",
+        bg: background,
+        children: menu.map((item, index) => {
+          var _a;
+          return /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(NavList, { ...item, isExpanded: index === expanded, onExpand: handleExpand(index) }) : /* @__PURE__ */ jsx(NavLink, { ...item }) }, index);
+        })
+      }
+    ) }) })
   ] });
 };
 const Navigation = ({ menu }) => {

package/dist/{index-BkW3HmFj.js → index-DWa1ea5F.js}

@@ -618,7 +618,7 @@ const NavList$1 = ({ path, label, children }) => {
         children: label
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsxRuntime.jsx(react.List, { spacing: 2, p: 0, children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(react.ListItem, { rounded: "md", _hover: { bg: backgroundHover }, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { as: gatsby.Link, to: `${path}${child.path}`, p: 2, role: "group", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsxRuntime.jsx(react.List, { spacing: 2, p: 0, children: children == null ? void 0 : children.map((child, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.ListItem, { rounded: "md", _hover: { bg: backgroundHover }, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { as: gatsby.Link, to: `${path}${child.path}`, p: 2, role: "group", children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.label }),
       /* @__PURE__ */ jsxRuntime.jsx(
         react.Flex,
@@ -633,37 +633,35 @@ const NavList$1 = ({ path, label, children }) => {
           children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: icons.ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
         }
       )
-    ] }) }, child.path)) }) })
+    ] }) }, index2)) }) })
   ] });
 };
 const DesktopNavigation = ({ menu }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "ul", role: "list", gap: 2, p: 0, display: { base: "none", md: "flex" }, children: menu.map((item, index2) => {
     var _a;
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx(NavList$1, { ...item }) : /* @__PURE__ */ jsxRuntime.jsx(NavLink, { ...item }) }, item.path || index2);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx(NavList$1, { ...item }) : /* @__PURE__ */ jsxRuntime.jsx(NavLink, { ...item }) }, index2);
   }) });
 };
+const CHEVRON_DOWN_ICON_SIZE = "1.5rem";
 const NavList = ({ path, label, children, isExpanded, onExpand }) => {
-  function handleClick() {
-    onExpand(path);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { w: "full", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { flex: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       react.Flex,
       {
         as: "button",
         p: 2,
-        pe: 1,
+        pr: "3px",
         align: "center",
         justifyContent: "space-between",
         _hover: { textDecoration: "none", color: "brand.400" },
-        onClick: handleClick,
+        onClick: onExpand,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.Text, { isTruncated: true, fontWeight: 600, children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
             icons.ChevronDownIcon,
             {
-              w: 24,
-              h: 24,
+              w: CHEVRON_DOWN_ICON_SIZE,
+              h: CHEVRON_DOWN_ICON_SIZE,
               transform: isExpanded ? "rotate(180deg)" : "",
               transition: "all .25s ease-in-out"
             }
@@ -671,25 +669,29 @@ const NavList = ({ path, label, children, isExpanded, onExpand }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isExpanded, transition: { enter: { ease: "easeIn" }, exit: { duration: 0.2 } }, children: /* @__PURE__ */ jsxRuntime.jsx(react.List, { ml: 2, pl: 0, borderLeft: 1, borderStyle: "solid", borderColor: react.useColorModeValue("gray.200", "gray.700"), children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", role: "listitem", children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: gatsby.Link, to: `${path}${child.path}`, p: 2, fontSize: "sm", children: child.label }) }, child.path)) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isExpanded, transition: { enter: { ease: "easeIn" }, exit: { duration: 0.2 } }, children: /* @__PURE__ */ jsxRuntime.jsx(react.List, { ml: 2, pl: 0, borderLeft: 1, borderStyle: "solid", borderColor: react.useColorModeValue("gray.200", "gray.700"), children: children == null ? void 0 : children.map((child, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", role: "listitem", children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: gatsby.Link, to: `${path}${child.path}`, p: 2, fontSize: "sm", children: child.label }) }, index2)) }) })
   ] });
 };
+const CLOSE_ICON_SIZE = "0.75rem";
+const HAMBURGER_ICON_SIZE = "1rem";
 const MobileNavigation = ({ menu }) => {
-  const [selected, setSelected] = react$1.useState(null);
+  const [expanded, setExpanded] = react$1.useState(null);
   const { isOpen, onToggle } = react.useDisclosure();
   const background = react.useColorModeValue("gray.50", "gray.900");
-  function handleExpand(id) {
-    setSelected((prev) => prev === id ? null : id);
+  function handleExpand(index2) {
+    return () => {
+      setExpanded((prev) => prev === index2 ? null : index2);
+    };
   }
   function handleClick() {
-    setSelected(null);
+    setExpanded(null);
     onToggle();
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { display: { base: "block", md: "none" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       react.IconButton,
       {
-        icon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: 12, h: 12 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.HamburgerIcon, { w: 18, h: 18 }),
+        icon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: CLOSE_ICON_SIZE, h: CLOSE_ICON_SIZE }) : /* @__PURE__ */ jsxRuntime.jsx(icons.HamburgerIcon, { w: HAMBURGER_ICON_SIZE, h: HAMBURGER_ICON_SIZE }),
         size: "sm",
         variant: "ghost",
         "aria-label": `${isOpen ? "Close" : "Open"} navigation menu`,
@@ -697,10 +699,22 @@ const MobileNavigation = ({ menu }) => {
         onClick: handleClick
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { position: "absolute", top: 16, left: 0, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react.List, { spacing: 2, p: 2, w: "full", borderRadius: "md", boxShadow: "md", bg: background, children: menu.map((item, index2) => {
-      var _a;
-      return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx(NavList, { ...item, isExpanded: item.path === selected, onExpand: handleExpand }) : /* @__PURE__ */ jsxRuntime.jsx(NavLink, { ...item }) }, item.path || index2);
-    }) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { position: "absolute", top: 16, left: 0, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.List,
+      {
+        spacing: 2,
+        p: 2,
+        boxShadow: "md",
+        borderWidth: "1px",
+        borderColor: react.useColorModeValue("gray.200", "gray.700"),
+        borderRadius: "md",
+        bg: background,
+        children: menu.map((item, index2) => {
+          var _a;
+          return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx(NavList, { ...item, isExpanded: index2 === expanded, onExpand: handleExpand(index2) }) : /* @__PURE__ */ jsxRuntime.jsx(NavLink, { ...item }) }, index2);
+        })
+      }
+    ) }) })
   ] });
 };
 const Navigation = ({ menu }) => {

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-BkW3HmFj.js");
+const index = require("./index-DWa1ea5F.js");
 const index$1 = require("./index-IpSV-c71.js");
 const i18n$1 = require("./index-DCIXk-YH.js");
 const index$2 = require("./index-BWuTDC6H.js");

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "./index-BOs_12nr.mjs";
+import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "./index-COCjNsCL.mjs";
 import { u } from "./index-xuSxvz5z.mjs";
 import { a as a2, G as G2, r } from "./index-DxLcykuT.mjs";
 import { M } from "./index-wbMOJRW_.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@anywayseo/tools",
   "description": "Shared UI Components and Modules",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "keywords": [
     "react",
     "ui",