@anywayseo/tools 1.5.3 → 2.0.0

package/dist/index-C5pGuMKq.js

@@ -1,968 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react$1 = require("@chakra-ui/react");
-const reactI18next = require("react-i18next");
-const icons = require("@chakra-ui/icons");
-const gatsbyPluginImage = require("gatsby-plugin-image");
-require("@mdx-js/react");
-const index = require("./index-D96zh94V.js");
-const react = require("react");
-const index$1 = require("./index-IpSV-c71.js");
-const react$2 = require("@emotion/react");
-const i18n = require("./index-DCIXk-YH.js");
-const i18n$1 = require("i18next");
-const index$2 = require("./index-jvxaXXE3.js");
-require("@ctrl/tinycolor");
-const gatsby = require("gatsby");
-const ONE_LINE_HEIGHT = 24;
-const Bio = ({ content, maxLines = 1 }) => {
-  const ref = react.useRef(null);
-  const [showToggle, setShowToggle] = react.useState(false);
-  const [isExpanded, setIsExpanded] = react.useState(false);
-  const { t } = reactI18next.useTranslation("author");
-  react.useLayoutEffect(() => {
-    if (ref.current) {
-      const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
-      const isClamped = scrollWidth > clientWidth || scrollHeight > clientHeight;
-      setShowToggle(isClamped);
-    }
-    return () => {
-      setShowToggle(false);
-    };
-  }, []);
-  function handleClick() {
-    setIsExpanded((prev) => !prev);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Collapse, { in: isExpanded, startingHeight: ONE_LINE_HEIGHT * maxLines, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { ref, fontSize: "md", noOfLines: isExpanded ? void 0 : maxLines, children: content }) }),
-    showToggle && /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { size: "sm", variant: "link", colorScheme: "blue", onClick: handleClick, children: isExpanded ? t("action.collapse") : t("action.expand") })
-  ] });
-};
-const Expert = ({ expert, variant }) => {
-  const { firstName, lastName, jobTitle, bio } = expert;
-  const { expertImageData } = index.useSiteMetadataContext();
-  const image = gatsbyPluginImage.getImage(expertImageData);
-  const fullName = `${firstName} ${lastName}`;
-  if (variant === "short") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "article", align: "center", gap: 4, children: [
-      !!image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: 12, h: 12, children: /* @__PURE__ */ jsxRuntime.jsx(gatsbyPluginImage.GatsbyImage, { image, alt: fullName, style: { borderRadius: "50%" } }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { fontWeight: "semibold", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: fullName }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { color: "gray.500", children: expert.jobTitle })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    !!image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { grow: 1, maxW: { base: 48, sm: 32 }, children: /* @__PURE__ */ jsxRuntime.jsx(gatsbyPluginImage.GatsbyImage, { image, alt: fullName, style: { borderRadius: "50%" } }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { w: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { fontSize: "lg", fontWeight: 600, children: [
-        `${fullName}, `,
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", color: "gray.500", children: jobTitle })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Bio, { content: bio })
-    ] }) })
-  ] });
-};
-const Author = ({ author, ...cardProps }) => {
-  const { t } = reactI18next.useTranslation("author");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "filled", ...cardProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.CardHeader, { pb: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { size: "md", children: t("title") }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.CardBody,
-      {
-        display: "flex",
-        flexDirection: { base: "column", sm: "row" },
-        alignItems: { base: "center", sm: "flex-start" },
-        gap: 4,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Expert, { expert: author, variant: "full" })
-      }
-    )
-  ] });
-};
-const Center = ({ children, className, ...boxProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Center, { 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__ */ jsxRuntime.jsx(
-    react$1.SimpleGrid,
-    {
-      as: "ul",
-      columns,
-      spacing: gap,
-      p: 0,
-      m: 0,
-      listStyleType: "none",
-      className,
-      ...boxProps,
-      children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index2))
-    }
-  );
-};
-const LinkButton = ({ label, url, width = "auto" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Button,
-    {
-      as: react$1.Link,
-      href: url,
-      w: width,
-      bg: "brand.600",
-      textTransform: "uppercase",
-      _hover: { textDecoration: "none", bg: "brand.300" },
-      _active: { transform: "scale(0.95)" },
-      children: label
-    }
-  );
-};
-const BonusCardContent = ({ content }) => {
-  const { t } = reactI18next.useTranslation("author");
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Popover, { flip: false, matchWidth: false, placement: "bottom", children: ({ isOpen }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { size: "sm", variant: "link", color: "white", children: isOpen ? t("action.collapse") : t("action.expand") }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverContent, { w: 60, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverBody, { children: Array.isArray(content) ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { children: content.map((paragraph, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", children: paragraph }, index2)) }) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: content }) }) })
-  ] }) });
-};
-const BonusCardTitle = ({ content }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Text,
-    {
-      as: "h3",
-      display: "inline-block",
-      py: 1,
-      px: 2,
-      borderRadius: "md",
-      bg: "yellow",
-      color: "black",
-      fontWeight: "bold",
-      fontSize: "lg",
-      children: content
-    }
-  );
-};
-const BonusCard = ({ title, subtitle, content, link, image, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.Card,
-    {
-      as: "article",
-      h: "full",
-      bg: "linear-gradient(90deg, #3b1f47, #731d58)",
-      overflow: "hidden",
-      _before: image ? {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        w: "100%",
-        h: "100%",
-        bgImage: `url(${image})`,
-        bgSize: "cover",
-        bgPosition: "center",
-        filter: "blur(0.05em) opacity(50%)",
-        zIndex: 0
-      } : void 0,
-      className,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react$1.CardBody, { as: "section", pb: 0, flex: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(BonusCardTitle, { content: title }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "2xl", fontWeight: "bold", my: 2, children: subtitle }),
-          /* @__PURE__ */ jsxRuntime.jsx(BonusCardContent, { content })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { as: "footer", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { ...link, width: "full" }) })
-      ]
-    }
-  );
-};
-const ContactForm = () => {
-  const toast = react$1.useToast();
-  const { t } = reactI18next.useTranslation("contactForm");
-  function handleSubmit(event) {
-    event.preventDefault();
-    const form = event.currentTarget;
-    const formData = new FormData(form);
-    const name = formData.get("name");
-    const email = formData.get("email");
-    const message = formData.get("message");
-    if (name && email && message) {
-      form.reset();
-      toast({
-        title: t("notification.title", { name }),
-        description: t("notification.description", { email }),
-        colorScheme: "brand",
-        status: "success",
-        duration: 5e3,
-        isClosable: true
-      });
-    } else {
-      console.error("Please fill out both fields");
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
-    {
-      as: "form",
-      borderRadius: "lg",
-      p: 8,
-      color: react$1.useColorModeValue("gray.700", "whiteAlpha.900"),
-      bg: react$1.useColorModeValue("white", "gray.700"),
-      shadow: "base",
-      onSubmit: handleSubmit,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.VStack, { spacing: 4, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react$1.FormControl, { isRequired: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.FormLabel, { children: t("field.name.label") }),
-          /* @__PURE__ */ jsxRuntime.jsxs(react$1.InputGroup, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.InputLeftElement, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "16",
-                height: "16",
-                fill: "currentColor",
-                className: "bi bi-person-fill",
-                viewBox: "0 0 16 16",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.Input, { type: "text", name: "name", placeholder: t("field.name.placeholder") })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react$1.FormControl, { isRequired: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.FormLabel, { children: t("field.email.label") }),
-          /* @__PURE__ */ jsxRuntime.jsxs(react$1.InputGroup, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.InputLeftElement, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.EmailIcon, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.Input, { type: "email", name: "email", placeholder: t("field.email.placeholder") })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react$1.FormControl, { isRequired: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.FormLabel, { children: t("field.message.label") }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Textarea, { name: "message", placeholder: t("field.message.placeholder"), rows: 6, resize: "none" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { type: "submit", colorScheme: "brand", width: "full", children: t("action.send") })
-      ] })
-    }
-  );
-};
-const ExpertTip = ({ tip, expert, ...boxProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.Card,
-    {
-      variant: "filled",
-      p: 4,
-      borderLeft: "4px solid gray",
-      gap: 4,
-      _before: {
-        content: '"❛❛"',
-        position: "absolute",
-        top: -8,
-        left: -2,
-        fontSize: "6rem",
-        fontStyle: "italic",
-        color: react$1.useColorModeValue("blackAlpha.300", "whiteAlpha.300")
-      },
-      ...boxProps,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "blockquote", p: 0, fontStyle: "italic", children: tip }),
-        !!expert && /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { alignItems: "center", justify: "flex-end", p: 0, children: /* @__PURE__ */ jsxRuntime.jsx(Expert, { expert, variant: "short" }) })
-      ]
-    }
-  );
-};
-const Faq = ({ items, mb }) => {
-  const { bgColor, color } = index$1.usePrimaryColors();
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Accordion, { allowToggle: true, mb, children: items.map(({ question, answer }) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.AccordionItem, { border: 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "h3", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.AccordionButton, { _hover: { color, bgColor }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "bold", children: question }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.AccordionIcon, {})
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.AccordionPanel, { children: answer })
-    ] }, question);
-  }) });
-};
-const Features = ({ features, ...boxProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.SimpleGrid, { as: "ul", columns: { base: 1, md: 2, lg: 3 }, spacing: 10, p: 0, ...boxProps, children: features.map(({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "outline", textAlign: "center", h: "100%", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$1.CardHeader, { as: "header", display: "flex", alignItems: "center", justifyContent: "center", gap: 2, pb: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(icons.StarIcon, { w: 8, h: 8, color: "yellow.400" }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontWeight: 600, children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx(icons.StarIcon, { w: 8, h: 8, color: "yellow.400" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { color: "gray.600", children: description }) })
-  ] }) }, title)) });
-};
-const GameCard = ({ name, image, link, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.LinkBox,
-    {
-      as: "article",
-      rounded: "md",
-      borderWidth: 1,
-      transition: "transform 0.2s ease",
-      cursor: link ? "pointer" : "default",
-      overflow: "hidden",
-      bg: "blackAlpha.400",
-      _hover: { transform: "scale(1.1)" },
-      className,
-      children: [
-        typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: image, alt: name, w: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" }) : !!image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: "100%", aspectRatio: "16/9", children: image }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", rounded: "md", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", children: link ? /* @__PURE__ */ jsxRuntime.jsx(react$1.LinkOverlay, { href: link, children: name }) : name }) })
-      ]
-    }
-  );
-};
-const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscreen }) => {
-  const { t } = reactI18next.useTranslation("gameDemo");
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.Box,
-      {
-        as: "iframe",
-        src,
-        sandbox: "allow-scripts allow-same-origin",
-        loading: "lazy",
-        w: "100%",
-        h: "100%",
-        allowFullScreen: true,
-        onLoad,
-        children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("warning") })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.IconButton,
-      {
-        icon: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLinkIcon, { w: 4, h: 4 }),
-        size: "sm",
-        variant: "outline",
-        title: t(isFullscreen ? "action.deactivateFullscreen" : "action.activateFullscreen"),
-        "aria-label": "Fullscreen mode Toggle",
-        isRound: true,
-        disabled: !isLoaded,
-        position: "absolute",
-        top: 2,
-        left: 2,
-        border: "none",
-        color: "white",
-        _hover: { bgColor: "whiteAlpha.400" },
-        onClick: onToggleFullscreen
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
-  ] });
-};
-const pulse = react$2.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 } = index.useSiteMetadataContext();
-  const { t } = reactI18next.useTranslation("gameDemo");
-  const image = gatsbyPluginImage.getImage(gamePreviewImageData);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    !!image && /* @__PURE__ */ jsxRuntime.jsx(gatsbyPluginImage.GatsbyImage, { image, alt: `Play ${gameName} online`, objectFit: "contain" }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.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: t("action.playForFree")
-      }
-    ) })
-  ] });
-};
-const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
-  const [isRunning, setIsRunning] = react.useState(false);
-  const [isLoaded, setIsLoaded] = react.useState(false);
-  const { isOpen: isFullscreen, onToggle } = react$1.useDisclosure({ defaultIsOpen: false });
-  function handlePlay() {
-    setIsRunning(true);
-  }
-  function onLoad() {
-    setIsLoaded(true);
-  }
-  function handleToggleFullscreen() {
-    document.body.style.overflowY = isFullscreen ? "auto" : "hidden";
-    onToggle();
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
-    {
-      as: "article",
-      display: "grid",
-      w: "100%",
-      aspectRatio: "16/9 auto",
-      ...isFullscreen ? { zIndex: 100, inset: 0, position: "fixed", h: "100dvh" } : { position: "relative" },
-      ...boxProps,
-      children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(
-        GameDemoContent,
-        {
-          src,
-          isFullscreen,
-          isLoaded,
-          onLoad,
-          onToggleFullscreen: handleToggleFullscreen
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(GameDemoPreview, { gameName: name, previewImageFit, onPlay: handlePlay })
-    }
-  );
-};
-const GameInfoItem = ({ title, value }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { gap: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { w: "50%", color: "gray.500", textTransform: "capitalize", children: [
-      title,
-      ":"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { w: "50%", textTransform: "capitalize", children: value })
-  ] });
-};
-const VISIBLE_LANGUAGE_NUMBER = 5;
-function stringifyHasFeature(value) {
-  return i18n$1.t(`gameInfo:value.boolean.${value}`);
-}
-function stringifyVolatility(value) {
-  return i18n$1.t(`gameInfo:value.volatility.${value}`);
-}
-function stringifyArray(array) {
-  return array.join(", ");
-}
-function stringifyLanguageArray(languages) {
-  return languages.length > VISIBLE_LANGUAGE_NUMBER ? `${stringifyArray(languages.slice(0, VISIBLE_LANGUAGE_NUMBER))}, +${languages.length - VISIBLE_LANGUAGE_NUMBER}` : stringifyArray(languages);
-}
-function getGameInfoItemValue(key, value, currency) {
-  let formattedValue = "";
-  if (key === i18n.GameCharacteristic.Rtp) {
-    formattedValue = index$2.formatNumber(value, { percent: "real", precision: 3 });
-  }
-  if ((key === i18n.GameCharacteristic.MinBet || key === i18n.GameCharacteristic.MaxBet || key === i18n.GameCharacteristic.MaxWin) && typeof value === "number") {
-    if (Array.isArray(currency)) {
-      const [primary, ...secondaries] = currency || ["USD"];
-      const primaryValue = index$2.formatNumber(value, { currency: primary });
-      formattedValue = secondaries.length ? `${primaryValue} (${secondaries.map((currency2) => index$2.getCurrencySymbol(currency2)).join(", ")})` : primaryValue;
-    } else {
-      formattedValue = index$2.formatNumber(value, { currency });
-    }
-  }
-  if (key === i18n.GameCharacteristic.Compatibility || key === i18n.GameCharacteristic.BonusFeatures && typeof value !== "string") {
-    formattedValue = stringifyArray(value);
-  }
-  if (key === i18n.GameCharacteristic.Languages) {
-    formattedValue = stringifyLanguageArray(value);
-  }
-  if (key === i18n.GameCharacteristic.ReleaseDate) {
-    formattedValue = index$2.formatDate({ value, options: { year: "numeric", month: "long" } });
-  }
-  if (key === i18n.GameCharacteristic.Volatility) {
-    formattedValue = stringifyVolatility(value);
-  }
-  if (typeof value === "boolean") {
-    formattedValue = stringifyHasFeature(value);
-  }
-  if (!formattedValue) {
-    formattedValue = value.toLocaleString();
-  }
-  return formattedValue;
-}
-const GameInfo = ({ info }) => {
-  const { siteMetadata } = index.useSiteMetadataContext();
-  const { currency } = siteMetadata;
-  const { t } = reactI18next.useTranslation("gameInfo");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
-    {
-      as: "aside",
-      float: { base: "none", lg: "right" },
-      w: { base: "100%", lg: "xs" },
-      ml: { base: 0, lg: 4 },
-      mb: { base: 0, lg: 4 },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "outline", h: "100%", p: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardHeader, { as: "header", p: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h2", fontSize: "xl", children: t("title") }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "section", p: 0, children: Object.entries(info).map(([group, items]) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Divider, { my: 2 }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontWeight: "semibold", mb: 2, children: t(`group.${group}`) }),
-          Object.entries(items).map(([itemKey, itemValue]) => {
-            const feature = itemKey;
-            const value = getGameInfoItemValue(feature, itemValue, currency);
-            return /* @__PURE__ */ jsxRuntime.jsx(GameInfoItem, { title: t(`feature.${feature}`), value }, itemKey);
-          })
-        ] }, group)) })
-      ] })
-    }
-  );
-};
-const HowTo = ({ steps, ...boxProps }) => {
-  const { color, bgColor } = index$1.usePrimaryColors();
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description }, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Circle, { size: 12, bgColor, color, fontSize: "lg", fontWeight: "bold", children: String(index2 + 1) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { flex: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "lg", fontWeight: "bold", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: description })
-    ] })
-  ] }, index2)) });
-};
-const Container = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Container, { maxW: "container.xl", children });
-};
-const Content = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", py: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children }) });
-};
-const Logo = () => {
-  const { logoImageData } = index.useSiteMetadataContext();
-  const image = gatsbyPluginImage.getImage(logoImageData);
-  if (!image) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(gatsbyPluginImage.GatsbyImage, { image, objectFit: "contain", alt: "Logo" });
-};
-const Brand$1 = ({ brand }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { position: "relative", my: 2, py: 8, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Divider, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { display: "flex", bgColor: react$1.useColorModeValue("gray.50", "gray.900"), children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: gatsby.Link, to: "/", children: brand }) })
-  ] });
-};
-const Copyright = () => {
-  const { siteMetadata } = index.useSiteMetadataContext();
-  const { siteUrl } = siteMetadata;
-  const { t } = reactI18next.useTranslation("footer");
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "small", colorScheme: "gray", display: "flex", align: "center", justifyContent: "center", children: t("copyright", { year: index$2.getCurrentYear(), domain: index$2.getDomain(siteUrl) }) });
-};
-const Disclaimer = () => {
-  const { siteMetadata } = index.useSiteMetadataContext();
-  const { siteUrl } = siteMetadata;
-  const { t } = reactI18next.useTranslation("footer");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "small", colorScheme: "gray", fontSize: "sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", fontWeight: "bold", color: "red.600", children: t("disclaimer.title") }),
-    t("disclaimer.description", { domain: index$2.getDomain(siteUrl) })
-  ] });
-};
-const Navigation$1 = () => {
-  const { siteMetadata } = index.useSiteMetadataContext();
-  const { footerMenuLinks } = siteMetadata;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.SimpleGrid,
-    {
-      columns: { base: 1, sm: 2, md: 4 },
-      pt: 4,
-      pb: 6,
-      spacing: 4,
-      justifyItems: { base: "flex-start", md: "center" },
-      justifyContent: "space-between",
-      children: footerMenuLinks.map(({ url, title }) => /* @__PURE__ */ jsxRuntime.jsx(
-        react$1.Text,
-        {
-          as: gatsby.Link,
-          to: url,
-          fontSize: "md",
-          fontWeight: "semibold",
-          colorScheme: "gray",
-          _hover: { textDecoration: "none", color: "brand.400" },
-          children: title
-        },
-        url
-      ))
-    }
-  );
-};
-const Footer = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
-    {
-      as: "footer",
-      bg: react$1.useColorModeValue("gray.50", "gray.900"),
-      color: react$1.useColorModeValue("gray.700", "gray.200"),
-      py: 4,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Navigation$1, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(Disclaimer, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(Brand$1, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Copyright, {})
-      ] })
-    }
-  );
-};
-const Brand = ({ brand }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
-    {
-      as: gatsby.Link,
-      to: "/",
-      display: "flex",
-      h: { base: "40px", md: "60px" },
-      fontFamily: "heading",
-      color: react$1.useColorModeValue("gray.800", "white"),
-      children: brand
-    }
-  );
-};
-const DesktopNavItem = ({ title, url, children }) => {
-  const background = react$1.useColorModeValue("white", "gray.800");
-  const backgroundHover = react$1.useColorModeValue("brand.50", "gray.900");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Popover, { trigger: "hover", placement: "bottom-start", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.Text,
-      {
-        as: gatsby.Link,
-        to: url,
-        p: 2,
-        fontSize: "sm",
-        fontWeight: 500,
-        _hover: { textDecoration: "none", color: "brand.400" },
-        children: title
-      }
-    ) }),
-    !!children && /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverContent, { p: 4, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { as: "ul", children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.Box,
-      {
-        as: "li",
-        role: "group",
-        display: "block",
-        p: 2,
-        cursor: "pointer",
-        rounded: "md",
-        _hover: { bg: backgroundHover },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { direction: "row", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.title }),
-            !!child.subtitle && /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "sm", children: child.subtitle })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react$1.Flex,
-            {
-              flex: 1,
-              justify: "flex-end",
-              align: "center",
-              opacity: 0,
-              transition: "all .3s ease",
-              transform: "translateX(-10px)",
-              _groupHover: { opacity: 1, transform: "translateX(0)" },
-              children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { as: icons.ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
-            }
-          )
-        ] })
-      },
-      child.url
-    )) }) })
-  ] });
-};
-const DesktopNavigation = ({ menu }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { as: "ul", direction: "row", spacing: 4, children: menu.map((item) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(DesktopNavItem, { ...item }) }, item.url)) });
-};
-const MobileNavItem = ({ title, children, url }) => {
-  const { isOpen, onToggle } = react$1.useDisclosure();
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { w: "100%", p: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { align: "center", gap: 2, justify: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: gatsby.Link, to: url, isTruncated: true, fontWeight: 600, children: title }),
-      !!children && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "button", onClick: onToggle, children: /* @__PURE__ */ jsxRuntime.jsx(
-        react$1.Icon,
-        {
-          as: icons.ChevronDownIcon,
-          w: 6,
-          h: 6,
-          transform: isOpen ? "rotate(180deg)" : "",
-          transition: "all .25s ease-in-out"
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.Stack,
-      {
-        as: "ul",
-        pl: 2,
-        borderLeft: 1,
-        borderStyle: "solid",
-        borderColor: react$1.useColorModeValue("gray.200", "gray.700"),
-        children: !!children && children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: gatsby.Link, to: `${url}${child.url}`, py: 2, children: child.title }) }, child.url))
-      }
-    ) })
-  ] });
-};
-const MobileNavigation = ({ menu }) => {
-  const { isOpen, onToggle } = react$1.useDisclosure();
-  const background = react$1.useColorModeValue("white", "gray.800");
-  return menu.length ? /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.IconButton,
-      {
-        icon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.HamburgerIcon, {}),
-        size: "md",
-        variant: "ghost",
-        "aria-label": "Toggle Navigation",
-        onClick: onToggle
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { position: "absolute", top: 14, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { as: "ul", spacing: 2, p: 2, w: "100%", borderRadius: "md", boxShadow: "md", bg: background, children: menu.map((item) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { ...item }) }, item.url)) }) }) })
-  ] }) : null;
-};
-const Navigation = ({ menu }) => {
-  const isDesktop = react$1.useBreakpointValue({ base: false, md: true });
-  return isDesktop ? /* @__PURE__ */ jsxRuntime.jsx(DesktopNavigation, { menu }) : /* @__PURE__ */ jsxRuntime.jsx(MobileNavigation, { menu });
-};
-const Navbar = ({ brand }) => {
-  const menu = [];
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "nav", gap: 2, py: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Brand, { brand }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "section", flex: 1, align: "center", justifyContent: "flex-end", gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Navigation, { menu }) })
-  ] });
-};
-const Header = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
-    {
-      as: "header",
-      position: "sticky",
-      top: 0,
-      bg: react$1.useColorModeValue("white", "gray.900"),
-      color: react$1.useColorModeValue("gray.700", "gray.200"),
-      boxShadow: "sm",
-      zIndex: 100,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(Navbar, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }) })
-    }
-  );
-};
-const Hero = ({ title, subtitle, content, link, image }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", bg: "gray.900", children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { direction: { base: "column", md: "row" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { align: "center", justify: { base: "center", md: "flex-start" }, flex: 1, py: 8, pe: 8, children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { spacing: 6, w: "full", maxW: "lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react$1.Heading, { as: "h1", fontSize: { base: "3xl", md: "4xl", lg: "5xl" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "span", display: "block", children: [
-          title,
-          " —"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", display: "block", color: "brand.400", children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: { base: "md", lg: "lg" }, color: "gray.500", children: content }),
-      !!link && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { direction: { base: "column", md: "row" }, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { ...link }) })
-    ] }) }),
-    image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { display: { base: "none", md: "flex" }, flex: 1, children: image })
-  ] }) }) });
-};
-const Main = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Flex,
-    {
-      as: "main",
-      direction: "column",
-      flexGrow: 1,
-      bg: react$1.useColorModeValue("white", "gray.800"),
-      color: react$1.useColorModeValue("gray.700", "gray.200"),
-      children
-    }
-  );
-};
-const ScrollToTop = () => {
-  const [isVisible, setIsVisible] = react.useState(false);
-  react.useEffect(() => {
-    const toggleVisibility = () => {
-      setIsVisible(window.scrollY > 300);
-    };
-    window.addEventListener("scroll", toggleVisibility);
-    return () => {
-      window.removeEventListener("scroll", toggleVisibility);
-    };
-  }, []);
-  function handleClick() {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth"
-    });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
-    {
-      position: "fixed",
-      bottom: { base: 4, md: 8, lg: 16 },
-      right: { base: 4, md: 8, lg: 16 },
-      zIndex: "1000",
-      opacity: isVisible ? 1 : 0,
-      transform: isVisible ? "translateY(0)" : "translateY(0.5rem)",
-      transition: "opacity 0.4s ease, transform 0.4s ease",
-      pointerEvents: isVisible ? "auto" : "none",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        react$1.IconButton,
-        {
-          "aria-label": "Scroll to top",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, { w: 6, h: 6 }),
-          size: "lg",
-          shadow: "lg",
-          colorScheme: "brand",
-          isRound: true,
-          onClick: handleClick
-        }
-      )
-    }
-  );
-};
-const Layout = ({ children }) => {
-  const content = typeof children === "function" ? children({ Hero, Content }) : /* @__PURE__ */ jsxRuntime.jsx(Content, { children });
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { spacing: 0, position: "relative", w: "100%", minH: "100dvh", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(Main, { children: content }),
-    /* @__PURE__ */ jsxRuntime.jsx(Footer, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(ScrollToTop, {})
-  ] });
-};
-const List = ({ items, bullet = "—", render, className, ...boxProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { pl: 0, ml: 2, mb: 4, className, ...boxProps, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { display: "flex", gap: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { children: bullet }),
-    render ? render(item) : item
-  ] }, index2)) });
-};
-const TitleMap = {
-  pros: "advantages",
-  cons: "disadvantages"
-};
-const IconMap = {
-  pros: icons.CheckCircleIcon,
-  cons: icons.WarningIcon
-};
-const IconColorMap = {
-  pros: "green.500",
-  cons: "red.500"
-};
-const BgColorMap = {
-  pros: "green",
-  cons: "red"
-};
-const ProsConsCard = ({ itemType, items }) => {
-  const { t } = reactI18next.useTranslation("prosCons");
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.Card,
-    {
-      as: "article",
-      flex: 1,
-      p: 2,
-      bgColor: react$1.useColorModeValue(`${BgColorMap[itemType]}.100`, `${BgColorMap[itemType]}.800`),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react$1.CardHeader,
-          {
-            as: "header",
-            p: 2,
-            borderTopRadius: "md",
-            bgColor: react$1.useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h3", textTransform: "uppercase", fontSize: "xl", children: t(TitleMap[itemType]) })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react$1.CardBody,
-          {
-            as: "section",
-            p: 2,
-            borderBottomRadius: "md",
-            bgColor: react$1.useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { spacing: 4, p: 0, children: items.map(({ title, description }) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { display: "flex", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react$1.ListIcon, { as: IconMap[itemType], w: 6, h: 6, color: IconColorMap[itemType] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { fontWeight: "semibold", fontSize: "md", children: [
-                title,
-                !!description && /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "span", fontWeight: "normal", children: [
-                  ": ",
-                  description
-                ] })
-              ] })
-            ] }, title)) })
-          }
-        )
-      ]
-    }
-  );
-};
-const ProsCons = ({ items, ...boxProps }) => {
-  const { pros, cons } = items;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "section", direction: { base: "column", md: "row" }, gap: 4, ...boxProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ProsConsCard, { itemType: "pros", items: pros }),
-    /* @__PURE__ */ jsxRuntime.jsx(ProsConsCard, { itemType: "cons", items: cons })
-  ] });
-};
-const Seo = ({ children, siteMetadata, title, description, lang }) => {
-  const { title: defaultTitle, description: defaultDescription, lang: defaultLang, siteUrl } = siteMetadata;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("html", { lang: lang ?? defaultLang }),
-    /* @__PURE__ */ jsxRuntime.jsx("title", { children: title ? typeof title === "string" ? title : title({
-      domain: index$2.getDomain(siteUrl),
-      currentYear: index$2.getCurrentYear(),
-      currentMonth: index$2.getCurrentMonth()
-    }) : defaultTitle }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "meta",
-      {
-        name: "description",
-        content: description ? typeof description === "string" ? description : description({
-          domain: index$2.getDomain(siteUrl),
-          currentYear: index$2.getCurrentYear(),
-          currentMonth: index$2.getCurrentMonth()
-        }) : defaultDescription
-      }
-    ),
-    children
-  ] });
-};
-const Table = ({
-  columnNumber,
-  items,
-  caption,
-  bordered = false,
-  striped = true,
-  scrollable,
-  className,
-  ...boxProps
-}) => {
-  const headerItems = items.slice(0, columnNumber);
-  const bodyItems = items.slice(columnNumber);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.TableContainer,
-    {
-      border: bordered ? void 0 : "none",
-      ...scrollable ? { maxH: "50vh", overflowY: "auto" } : {},
-      className,
-      ...boxProps,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react$1.Table, { variant: striped ? "striped" : "simple", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Thead, { ...scrollable ? { position: "sticky", top: 0, zIndex: 1, bg: "gray.800" } : {}, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Tr, { children: headerItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Th, { children: item }, index2)) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Tbody, { children: Array.from({ length: Math.ceil(bodyItems.length / columnNumber) }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Tr, { children: Array.from({ length: columnNumber }, (_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Td, { children: bodyItems[rowIndex * columnNumber + colIndex] || "" }, colIndex)) }, rowIndex)) })
-        ] }),
-        !!caption && /* @__PURE__ */ jsxRuntime.jsx(react$1.TableCaption, { children: caption })
-      ]
-    }
-  );
-};
-const Tabs = ({ items, className, render, ...boxProps }) => {
-  const { tabs, panels } = react.useMemo(() => {
-    const tabs2 = [];
-    const panels2 = [];
-    items.forEach(({ content, ...tab }) => {
-      tabs2.push(tab);
-      panels2.push(content);
-    });
-    return { tabs: tabs2, panels: panels2 };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Tabs, { overflow: "hidden", colorScheme: "brand", className, ...boxProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Tab, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index2)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanel, { children: render(panel) }, index2)) })
-  ] });
-};
-exports.Author = Author;
-exports.BonusCard = BonusCard;
-exports.Center = Center;
-exports.ContactForm = ContactForm;
-exports.ExpertTip = ExpertTip;
-exports.Faq = Faq;
-exports.Features = Features;
-exports.GameCard = GameCard;
-exports.GameDemo = GameDemo;
-exports.GameInfo = GameInfo;
-exports.Grid = Grid;
-exports.HowTo = HowTo;
-exports.Layout = Layout;
-exports.LinkButton = LinkButton;
-exports.List = List;
-exports.ProsCons = ProsCons;
-exports.Seo = Seo;
-exports.Table = Table;
-exports.Tabs = Tabs;