@anywayseo/tools 1.5.4 → 2.0.0

package/dist/{index-C95D6IAi.mjs → index-CHSIkTv7.mjs}

@@ -1,18 +1,19 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Box, Collapse, Text, Button, Flex, Stack, Card, CardHeader, Heading, CardBody, Center as Center$1, SimpleGrid, Link, Popover, PopoverTrigger, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, LinkBox, Image, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, Icon, useBreakpointValue, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Center as Center$1, Box, Collapse, Text, Button, Flex, Stack, Image, SimpleGrid, Link, Card, CardHeader, Heading, CardBody, Popover, PopoverTrigger, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, LinkBox, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, Icon, useBreakpointValue, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
-import { EmailIcon, StarIcon, CloseIcon, ExternalLinkIcon, ChevronRightIcon, ChevronDownIcon, HamburgerIcon, ChevronUpIcon, WarningIcon, CheckCircleIcon } from "@chakra-ui/icons";
-import { getImage, GatsbyImage } from "gatsby-plugin-image";
+import { A as Animation, b as formatNumber, c as getCurrencySymbol, f as formatDate, d as getDomain, g as getCurrentYear, a as getCurrentMonth } from "./index-j8Vo42fz.mjs";
+import { a as GameCharacteristic } from "./index-DxLcykuT.mjs";
+import "@ctrl/tinycolor";
 import "@mdx-js/react";
-import { u as useSiteMetadataContext } from "./index-Bs4zA1wD.mjs";
+import { u as useSiteContext } from "./index-BNb-P8a6.mjs";
 import { useRef, useState, useLayoutEffect, Fragment as Fragment$1, useEffect, useMemo } from "react";
+import { EmailIcon, StarIcon, CloseIcon, ExternalLinkIcon, ChevronRightIcon, ChevronDownIcon, HamburgerIcon, ChevronUpIcon, WarningIcon, CheckCircleIcon } from "@chakra-ui/icons";
 import { u as usePrimaryColors } from "./index-xuSxvz5z.mjs";
-import { keyframes } from "@emotion/react";
-import { a as GameCharacteristic } from "./index-DxLcykuT.mjs";
 import { t } from "i18next";
-import { b as formatNumber, c as getCurrencySymbol, f as formatDate, d as getDomain, g as getCurrentYear, a as getCurrentMonth } from "./index-CJvs4SfG.mjs";
-import "@ctrl/tinycolor";
 import { Link as Link$1 } from "gatsby";
+const Center = ({ children, ...boxProps }) => {
+  return /* @__PURE__ */ jsx(Center$1, { ...boxProps, children });
+};
 const ONE_LINE_HEIGHT = 24;
 const Bio = ({ content, maxLines = 1 }) => {
   const ref = useRef(null);
@@ -38,13 +39,15 @@ const Bio = ({ content, maxLines = 1 }) => {
   ] });
 };
 const Expert = ({ expert, variant }) => {
+  var _a;
   const { firstName, lastName, jobTitle, bio } = expert;
-  const { expertImageData } = useSiteMetadataContext();
-  const image = getImage(expertImageData);
+  const { assets } = useSiteContext();
   const fullName = `${firstName} ${lastName}`;
+  const image = (_a = assets == null ? void 0 : assets.images) == null ? void 0 : _a.expert;
+  const imageComponent = typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt: fullName, rounded: "full" }) : image;
   if (variant === "short") {
     return /* @__PURE__ */ jsxs(Flex, { as: "article", align: "center", gap: 4, children: [
-      !!image && /* @__PURE__ */ jsx(Box, { w: 12, h: 12, children: /* @__PURE__ */ jsx(GatsbyImage, { image, alt: fullName, style: { borderRadius: "50%" } }) }),
+      !!imageComponent && /* @__PURE__ */ jsx(Box, { w: 12, h: 12, children: imageComponent }),
       /* @__PURE__ */ jsxs(Box, { fontWeight: "semibold", children: [
         /* @__PURE__ */ jsx(Text, { children: fullName }),
         /* @__PURE__ */ jsx(Text, { color: "gray.500", children: expert.jobTitle })
@@ -52,7 +55,7 @@ const Expert = ({ expert, variant }) => {
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !!image && /* @__PURE__ */ jsx(Flex, { grow: 1, maxW: { base: 48, sm: 32 }, children: /* @__PURE__ */ jsx(GatsbyImage, { image, alt: fullName, style: { borderRadius: "50%" } }) }),
+    !!imageComponent && /* @__PURE__ */ jsx(Flex, { grow: 1, maxW: { base: 48, sm: 32 }, children: imageComponent }),
     /* @__PURE__ */ jsx(Flex, { w: "100%", children: /* @__PURE__ */ jsxs(Stack, { children: [
       /* @__PURE__ */ jsxs(Text, { fontSize: "lg", fontWeight: 600, children: [
         `${fullName}, `,
@@ -62,43 +65,11 @@ const Expert = ({ expert, variant }) => {
     ] }) })
   ] });
 };
-const Author = ({ author, ...cardProps }) => {
-  const { t: t2 } = useTranslation("author");
-  return /* @__PURE__ */ jsxs(Card, { as: "article", variant: "filled", ...cardProps, children: [
-    /* @__PURE__ */ jsx(CardHeader, { pb: 0, children: /* @__PURE__ */ jsx(Heading, { size: "md", children: t2("title") }) }),
-    /* @__PURE__ */ jsx(
-      CardBody,
-      {
-        display: "flex",
-        flexDirection: { base: "column", sm: "row" },
-        alignItems: { base: "center", sm: "flex-start" },
-        gap: 4,
-        children: /* @__PURE__ */ jsx(Expert, { expert: author, variant: "full" })
-      }
-    )
-  ] });
-};
-const Center = ({ children, className, ...boxProps }) => {
-  return /* @__PURE__ */ jsx(Center$1, { className, ...boxProps, children });
-};
 const defaultColumns = { base: 1, sm: 2, md: 3, lg: 4, xl: 5 };
-const Grid = ({ items, columns = defaultColumns, gap, render, getKey, className, ...boxProps }) => {
-  return /* @__PURE__ */ jsx(
-    SimpleGrid,
-    {
-      as: "ul",
-      columns,
-      spacing: gap,
-      p: 0,
-      m: 0,
-      listStyleType: "none",
-      className,
-      ...boxProps,
-      children: items.map((item, index) => /* @__PURE__ */ jsx(Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index))
-    }
-  );
+const Grid = ({ items, columns = defaultColumns, gap, render, getKey, ...boxProps }) => {
+  return /* @__PURE__ */ jsx(SimpleGrid, { as: "ul", columns, spacing: gap, p: 0, m: 0, listStyleType: "none", ...boxProps, children: items.map((item, index) => /* @__PURE__ */ jsx(Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index)) });
 };
-const LinkButton = ({ label, url, width = "auto" }) => {
+const LinkButton = ({ label, url, width = "auto", ...boxProps }) => {
   return /* @__PURE__ */ jsx(
     Button,
     {
@@ -109,10 +80,41 @@ const LinkButton = ({ label, url, width = "auto" }) => {
       textTransform: "uppercase",
       _hover: { textDecoration: "none", bg: "brand.300" },
       _active: { transform: "scale(0.95)" },
+      ...boxProps,
+      children: label
+    }
+  );
+};
+const PulseButton = ({ label, onClick }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: { base: "sm", md: "lg" },
+      color: "gray.200",
+      bgColor: "brand.500",
+      animation: `${Animation.pulse} 2s infinite linear`,
+      _hover: { bgColor: "brand.200", color: "gray.700" },
+      onClick,
       children: label
     }
   );
 };
+const Author = ({ author, ...cardProps }) => {
+  const { t: t2 } = useTranslation("author");
+  return /* @__PURE__ */ jsxs(Card, { as: "article", variant: "filled", ...cardProps, children: [
+    /* @__PURE__ */ jsx(CardHeader, { pb: 0, children: /* @__PURE__ */ jsx(Heading, { size: "md", children: t2("title") }) }),
+    /* @__PURE__ */ jsx(
+      CardBody,
+      {
+        display: "flex",
+        flexDirection: { base: "column", sm: "row" },
+        alignItems: { base: "center", sm: "flex-start" },
+        gap: 4,
+        children: /* @__PURE__ */ jsx(Expert, { expert: author, variant: "full" })
+      }
+    )
+  ] });
+};
 const BonusCardContent = ({ content }) => {
   const { t: t2 } = useTranslation("author");
   return /* @__PURE__ */ jsx(Popover, { flip: false, matchWidth: false, placement: "bottom", children: ({ isOpen }) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -137,7 +139,7 @@ const BonusCardTitle = ({ content }) => {
     }
   );
 };
-const BonusCard = ({ title, subtitle, content, link, image, className }) => {
+const BonusCard = ({ title, subtitle, content, link, image }) => {
   return /* @__PURE__ */ jsxs(
     Card,
     {
@@ -157,7 +159,6 @@ const BonusCard = ({ title, subtitle, content, link, image, className }) => {
         filter: "blur(0.05em) opacity(50%)",
         zIndex: 0
       } : void 0,
-      className,
       children: [
         /* @__PURE__ */ jsxs(CardBody, { as: "section", pb: 0, flex: 1, children: [
           /* @__PURE__ */ jsx(BonusCardTitle, { content: title }),
@@ -169,7 +170,7 @@ const BonusCard = ({ title, subtitle, content, link, image, className }) => {
     }
   );
 };
-const ContactForm = () => {
+const ContactForm = ({ ...boxProps }) => {
   const toast = useToast();
   const { t: t2 } = useTranslation("contactForm");
   function handleSubmit(event) {
@@ -203,6 +204,7 @@ const ContactForm = () => {
       bg: useColorModeValue("white", "gray.700"),
       shadow: "base",
       onSubmit: handleSubmit,
+      ...boxProps,
       children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
         /* @__PURE__ */ jsxs(FormControl, { isRequired: true, children: [
           /* @__PURE__ */ jsx(FormLabel, { children: t2("field.name.label") }),
@@ -263,9 +265,9 @@ const ExpertTip = ({ tip, expert, ...boxProps }) => {
     }
   );
 };
-const Faq = ({ items, mb }) => {
+const Faq = ({ items, ...boxProps }) => {
   const { bgColor, color } = usePrimaryColors();
-  return /* @__PURE__ */ jsx(Accordion, { allowToggle: true, mb, children: items.map(({ question, answer }) => {
+  return /* @__PURE__ */ jsx(Accordion, { allowToggle: true, ...boxProps, children: items.map(({ question, answer }) => {
     return /* @__PURE__ */ jsxs(AccordionItem, { border: 0, children: [
       /* @__PURE__ */ jsx(Box, { as: "h3", children: /* @__PURE__ */ jsxs(AccordionButton, { _hover: { color, bgColor }, children: [
         /* @__PURE__ */ jsx(Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "bold", children: question }),
@@ -275,17 +277,30 @@ const Faq = ({ items, mb }) => {
     ] }, question);
   }) });
 };
-const Features = ({ features, ...boxProps }) => {
-  return /* @__PURE__ */ jsx(SimpleGrid, { as: "ul", columns: { base: 1, md: 2, lg: 3 }, spacing: 10, p: 0, ...boxProps, children: features.map(({ title, description }) => /* @__PURE__ */ jsx(Stack, { as: "li", children: /* @__PURE__ */ jsxs(Card, { as: "article", variant: "outline", textAlign: "center", h: "100%", children: [
+const FeatureCard = ({ title, description }) => {
+  return /* @__PURE__ */ jsxs(Card, { as: "article", variant: "outline", textAlign: "center", h: "100%", children: [
     /* @__PURE__ */ jsxs(CardHeader, { as: "header", display: "flex", alignItems: "center", justifyContent: "center", gap: 2, pb: 2, children: [
       /* @__PURE__ */ jsx(StarIcon, { w: 8, h: 8, color: "yellow.400" }),
       /* @__PURE__ */ jsx(Text, { fontWeight: 600, children: title }),
       /* @__PURE__ */ jsx(StarIcon, { w: 8, h: 8, color: "yellow.400" })
     ] }),
-    /* @__PURE__ */ jsx(CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray.600", children: description }) })
-  ] }) }, title)) });
+    /* @__PURE__ */ jsx(CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray.200", children: description }) })
+  ] });
+};
+const Features = ({ features, ...boxProps }) => {
+  return /* @__PURE__ */ jsx(
+    Grid,
+    {
+      items: features,
+      columns: { base: 1, md: 2, lg: 3 },
+      gap: 10,
+      getKey: ({ title }) => title,
+      render: (item) => /* @__PURE__ */ jsx(FeatureCard, { ...item }),
+      ...boxProps
+    }
+  );
 };
-const GameCard = ({ name, image, link, className }) => {
+const GameCard = ({ name, image, link }) => {
   return /* @__PURE__ */ jsxs(
     LinkBox,
     {
@@ -297,7 +312,6 @@ const GameCard = ({ name, image, link, className }) => {
       overflow: "hidden",
       bg: "blackAlpha.400",
       _hover: { transform: "scale(1.1)" },
-      className,
       children: [
         typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt: name, w: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" }) : !!image && /* @__PURE__ */ jsx(Box, { w: "100%", aspectRatio: "16/9", children: image }),
         /* @__PURE__ */ jsx(Box, { as: "section", rounded: "md", p: 4, children: /* @__PURE__ */ jsx(Text, { as: "span", children: link ? /* @__PURE__ */ jsx(LinkOverlay, { href: link, children: name }) : name }) })
@@ -344,37 +358,15 @@ const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscre
     /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsx(Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
   ] });
 };
-const pulse = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 var(--chakra-colors-brand-100);
-  }
-
-  50% {
-    box-shadow: 0 0 0 0.8rem rgba(0, 0, 0, 0);
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-  }
-`;
-const GameDemoPreview = ({ gameName, onPlay }) => {
-  const { gamePreviewImageData } = useSiteMetadataContext();
+const GameDemoPreview = ({ alt, imageFit = "contain", onPlay }) => {
+  var _a;
+  const { assets } = useSiteContext();
   const { t: t2 } = useTranslation("gameDemo");
-  const image = getImage(gamePreviewImageData);
+  const gamePreviewImage = (_a = assets == null ? void 0 : assets.images) == null ? void 0 : _a.gamePreview;
+  const gamePreviewImageComponent = typeof gamePreviewImage === "string" ? /* @__PURE__ */ jsx(Image, { src: gamePreviewImage, alt, objectFit: imageFit }) : gamePreviewImage;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !!image && /* @__PURE__ */ jsx(GatsbyImage, { image, alt: `Play ${gameName} online`, objectFit: "contain" }),
-    /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: { base: "sm", md: "lg" },
-        color: "gray.200",
-        bgColor: "brand.500",
-        animation: `${pulse} 2s infinite linear`,
-        _hover: { bgColor: "brand.200", color: "gray.700" },
-        onClick: onPlay,
-        children: t2("action.playForFree")
-      }
-    ) })
+    gamePreviewImageComponent,
+    /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsx(PulseButton, { label: t2("action.playForFree"), onClick: onPlay }) })
   ] });
 };
 const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
@@ -409,7 +401,7 @@ const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
           onLoad,
           onToggleFullscreen: handleToggleFullscreen
         }
-      ) : /* @__PURE__ */ jsx(GameDemoPreview, { gameName: name, previewImageFit, onPlay: handlePlay })
+      ) : /* @__PURE__ */ jsx(GameDemoPreview, { alt: name, imageFit: previewImageFit, onPlay: handlePlay })
     }
   );
 };
@@ -470,8 +462,8 @@ function getGameInfoItemValue(key, value, currency) {
   return formattedValue;
 }
 const GameInfo = ({ info }) => {
-  const { siteMetadata } = useSiteMetadataContext();
-  const { currency } = siteMetadata;
+  const { metadata } = useSiteContext();
+  const { currency } = metadata;
   const { t: t2 } = useTranslation("gameInfo");
   return /* @__PURE__ */ jsx(
     Box,
@@ -513,37 +505,36 @@ const Content = ({ children }) => {
   return /* @__PURE__ */ jsx(Box, { as: "section", py: 4, children: /* @__PURE__ */ jsx(Container, { children }) });
 };
 const Logo = () => {
-  const { logoImageData } = useSiteMetadataContext();
-  const image = getImage(logoImageData);
+  var _a;
+  const { assets } = useSiteContext();
+  const image = (_a = assets == null ? void 0 : assets.images) == null ? void 0 : _a.logo;
   if (!image) {
     return null;
   }
-  return /* @__PURE__ */ jsx(GatsbyImage, { image, objectFit: "contain", alt: "Logo" });
+  return /* @__PURE__ */ jsx(Box, { display: "flex", h: { base: 10, md: 14 }, overflow: "hidden", children: typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt: "Logo", objectFit: "contain" }) : image });
 };
 const Brand$1 = ({ brand }) => {
   return /* @__PURE__ */ jsxs(Box, { position: "relative", my: 2, py: 8, children: [
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(AbsoluteCenter, { display: "flex", bgColor: useColorModeValue("gray.50", "gray.900"), children: /* @__PURE__ */ jsx(Box, { as: Link$1, to: "/", children: brand }) })
+    /* @__PURE__ */ jsx(AbsoluteCenter, { display: "flex", bgColor: useColorModeValue("gray.50", "gray.900"), children: /* @__PURE__ */ jsx(Link$1, { to: "/", children: brand }) })
   ] });
 };
 const Copyright = () => {
-  const { siteMetadata } = useSiteMetadataContext();
-  const { siteUrl } = siteMetadata;
+  const { metadata } = useSiteContext();
+  const { siteUrl } = metadata;
   const { t: t2 } = useTranslation("footer");
   return /* @__PURE__ */ jsx(Text, { as: "small", colorScheme: "gray", display: "flex", align: "center", justifyContent: "center", children: t2("copyright", { year: getCurrentYear(), domain: getDomain(siteUrl) }) });
 };
 const Disclaimer = () => {
-  const { siteMetadata } = useSiteMetadataContext();
-  const { siteUrl } = siteMetadata;
+  const { metadata } = useSiteContext();
+  const { siteUrl } = metadata;
   const { t: t2 } = useTranslation("footer");
   return /* @__PURE__ */ jsxs(Text, { as: "small", colorScheme: "gray", fontSize: "sm", children: [
     /* @__PURE__ */ jsx(Text, { as: "span", fontWeight: "bold", color: "red.600", children: t2("disclaimer.title") }),
     t2("disclaimer.description", { domain: getDomain(siteUrl) })
   ] });
 };
-const Navigation$1 = () => {
-  const { siteMetadata } = useSiteMetadataContext();
-  const { footerMenuLinks } = siteMetadata;
+const Navigation$1 = ({ menu }) => {
   return /* @__PURE__ */ jsx(
     SimpleGrid,
     {
@@ -553,7 +544,7 @@ const Navigation$1 = () => {
       spacing: 4,
       justifyItems: { base: "flex-start", md: "center" },
       justifyContent: "space-between",
-      children: footerMenuLinks.map(({ url, title }) => /* @__PURE__ */ jsx(
+      children: menu.map(({ url, title }) => /* @__PURE__ */ jsx(
         Text,
         {
           as: Link$1,
@@ -570,6 +561,9 @@ const Navigation$1 = () => {
   );
 };
 const Footer = () => {
+  var _a;
+  const { configs } = useSiteContext();
+  const navigation = ((_a = configs == null ? void 0 : configs.footer) == null ? void 0 : _a.navigation) ?? [];
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -578,7 +572,7 @@ const Footer = () => {
       color: useColorModeValue("gray.700", "gray.200"),
       py: 4,
       children: /* @__PURE__ */ jsxs(Container, { children: [
-        /* @__PURE__ */ jsx(Navigation$1, {}),
+        /* @__PURE__ */ jsx(Navigation$1, { menu: navigation }),
         /* @__PURE__ */ jsx(Disclaimer, {}),
         /* @__PURE__ */ jsx(Brand$1, { brand: /* @__PURE__ */ jsx(Logo, {}) }),
         /* @__PURE__ */ jsx(Copyright, {})
@@ -587,18 +581,7 @@ const Footer = () => {
   );
 };
 const Brand = ({ brand }) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      as: Link$1,
-      to: "/",
-      display: "flex",
-      h: { base: "40px", md: "60px" },
-      fontFamily: "heading",
-      color: useColorModeValue("gray.800", "white"),
-      children: brand
-    }
-  );
+  return /* @__PURE__ */ jsx(Link$1, { to: "/", children: brand });
 };
 const DesktopNavItem = ({ title, url, children }) => {
   const background = useColorModeValue("white", "gray.800");
@@ -616,7 +599,7 @@ const DesktopNavItem = ({ title, url, children }) => {
         children: title
       }
     ) }),
-    !!children && /* @__PURE__ */ jsx(PopoverContent, { p: 4, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsx(Stack, { as: "ul", children: children.map((child) => /* @__PURE__ */ jsx(
+    !!children && /* @__PURE__ */ jsx(PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsx(Stack, { as: "ul", p: 0, children: children.map((child) => /* @__PURE__ */ jsx(
       Box,
       {
         as: "li",
@@ -651,7 +634,7 @@ const DesktopNavItem = ({ title, url, children }) => {
   ] });
 };
 const DesktopNavigation = ({ menu }) => {
-  return /* @__PURE__ */ jsx(Stack, { as: "ul", direction: "row", spacing: 4, children: menu.map((item) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(DesktopNavItem, { ...item }) }, item.url)) });
+  return /* @__PURE__ */ jsx(Flex, { as: "ul", direction: "row", gap: 4, p: 0, children: menu.map((item) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(DesktopNavItem, { ...item }) }, item.url)) });
 };
 const MobileNavItem = ({ title, children, url }) => {
   const { isOpen, onToggle } = useDisclosure();
@@ -703,14 +686,11 @@ const Navigation = ({ menu }) => {
   const isDesktop = useBreakpointValue({ base: false, md: true });
   return isDesktop ? /* @__PURE__ */ jsx(DesktopNavigation, { menu }) : /* @__PURE__ */ jsx(MobileNavigation, { menu });
 };
-const Navbar = ({ brand }) => {
-  const menu = [];
-  return /* @__PURE__ */ jsxs(Flex, { as: "nav", gap: 2, py: 1, children: [
-    /* @__PURE__ */ jsx(Brand, { brand }),
-    /* @__PURE__ */ jsx(Flex, { as: "section", flex: 1, align: "center", justifyContent: "flex-end", gap: 2, children: /* @__PURE__ */ jsx(Navigation, { menu }) })
-  ] });
-};
 const Header = () => {
+  var _a, _b;
+  const { configs } = useSiteContext();
+  const navigation = ((_a = configs == null ? void 0 : configs.header) == null ? void 0 : _a.navigation) ?? [];
+  const toolbar = (_b = configs == null ? void 0 : configs.header) == null ? void 0 : _b.toolbar;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -721,7 +701,24 @@ const Header = () => {
       color: useColorModeValue("gray.700", "gray.200"),
       boxShadow: "sm",
       zIndex: 100,
-      children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Navbar, { brand: /* @__PURE__ */ jsx(Logo, {}) }) })
+      children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Flex, { as: "nav", gap: 2, py: 1, children: [
+        /* @__PURE__ */ jsx(Brand, { brand: /* @__PURE__ */ jsx(Logo, {}) }),
+        (!!navigation.length || !!toolbar) && /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            as: "section",
+            flex: 1,
+            flexDir: { base: "row-reverse", md: "row" },
+            justifyContent: { base: "flex-end", md: "flex-start" },
+            align: "center",
+            gap: 2,
+            children: [
+              !!navigation.length && /* @__PURE__ */ jsx(Flex, { flex: { base: 0, md: 1 }, children: /* @__PURE__ */ jsx(Navigation, { menu: navigation }) }),
+              !!toolbar && /* @__PURE__ */ jsx(Flex, { gap: 2, flex: { base: 1, md: 0 }, justifyContent: "flex-end", children: toolbar })
+            ]
+          }
+        )
+      ] }) })
     }
   );
 };
@@ -806,8 +803,8 @@ const Layout = ({ children }) => {
     /* @__PURE__ */ jsx(ScrollToTop, {})
   ] });
 };
-const List = ({ items, bullet = "—", render, className, ...boxProps }) => {
-  return /* @__PURE__ */ jsx(List$1, { pl: 0, ml: 2, mb: 4, className, ...boxProps, children: items.map((item, index) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", gap: 1, children: [
+const List = ({ items, bullet = "—", render, ...boxProps }) => {
+  return /* @__PURE__ */ jsx(List$1, { pl: 0, ml: 2, mb: 4, ...boxProps, children: items.map((item, index) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", gap: 1, children: [
     /* @__PURE__ */ jsx(Box, { children: bullet }),
     render ? render(item) : item
   ] }, index)) });
@@ -908,7 +905,6 @@ const Table = ({
   bordered = false,
   striped = true,
   scrollable,
-  className,
   ...boxProps
 }) => {
   const headerItems = items.slice(0, columnNumber);
@@ -918,7 +914,6 @@ const Table = ({
     {
       border: bordered ? void 0 : "none",
       ...scrollable ? { maxH: "50vh", overflowY: "auto" } : {},
-      className,
       ...boxProps,
       children: [
         /* @__PURE__ */ jsxs(Table$1, { variant: striped ? "striped" : "simple", children: [
@@ -930,7 +925,7 @@ const Table = ({
     }
   );
 };
-const Tabs = ({ items, className, render, ...boxProps }) => {
+const Tabs = ({ items, render, ...boxProps }) => {
   const { tabs, panels } = useMemo(() => {
     const tabs2 = [];
     const panels2 = [];
@@ -940,7 +935,7 @@ const Tabs = ({ items, className, render, ...boxProps }) => {
     });
     return { tabs: tabs2, panels: panels2 };
   }, []);
-  return /* @__PURE__ */ jsxs(Tabs$1, { overflow: "hidden", colorScheme: "brand", className, ...boxProps, children: [
+  return /* @__PURE__ */ jsxs(Tabs$1, { overflow: "hidden", colorScheme: "brand", ...boxProps, children: [
     /* @__PURE__ */ jsx(TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index) => /* @__PURE__ */ jsx(Tab, { children: /* @__PURE__ */ jsx(Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index)) }),
     /* @__PURE__ */ jsx(TabPanels, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(TabPanel, { children: render(panel) }, index)) })
   ] });
@@ -957,12 +952,15 @@ export {
   ProsCons as P,
   Seo as S,
   Table as T,
-  Features as a,
-  GameDemo as b,
-  GameInfo as c,
-  List as d,
-  Tabs as e,
-  Center as f,
-  Grid as g,
-  LinkButton as h
+  FeatureCard as a,
+  Features as b,
+  GameDemo as c,
+  GameInfo as d,
+  List as e,
+  Tabs as f,
+  Center as g,
+  Expert as h,
+  Grid as i,
+  LinkButton as j,
+  PulseButton as k
 };