@anywayseo/tools 5.6.0 → 5.7.1

package/dist/{index-CyuHme_p.js → index-RL_4tl8T.js}

@@ -1,28 +1,56 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const react$1 = require("@chakra-ui/react");
+const react = require("@chakra-ui/react");
 const reactI18next = require("react-i18next");
-require("react-medium-image-zoom");
-const index = require("./index-CR5rM7at.js");
 const react$2 = require("@mdx-js/react");
-const react = require("react");
+const index = require("./index-CNyyTj_C.js");
 require("./index-C6MG_f24.js");
-const index$4 = require("./index-DMR4Ptkt.js");
-const index$1 = require("./index-B6wz_B9_.js");
-const index$6 = require("./index-DDg_PkD2.js");
-const index$5 = require("./index-C-ri0Fgy.js");
+const index$6 = require("./index-B-k9oWE7.js");
+require("react-medium-image-zoom");
+const react$1 = require("react");
 const icons = require("@chakra-ui/icons");
-const index$2 = require("./index-5J1CqqcW.js");
-const index$3 = require("./index-CkRY_NXp.js");
+const index$3 = require("./index-DDg_PkD2.js");
+const index$1 = require("./index-qR3kVjjs.js");
+const index$2 = require("./index-CzAt2Bs2.js");
+const index$4 = require("./index-D15SAjJc.js");
+const index$5 = require("./index-BfITsKAr.js");
 const i18next = require("i18next");
 const Markdown = require("react-markdown");
+const ArticleMetaItem = ({ label, value }) => {
+  const color = react.useColorModeValue("gray.600", "gray.400");
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color, children: label }),
+    value
+  ] });
+};
+const ArticleMeta = ({ createdAt, updatedAt, minutesToRead, author, variant = "full" }) => {
+  const { currentLocale } = index.usePageContext();
+  const { t } = reactI18next.useTranslation("article");
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { columnGap: 4, rowGap: 2, wrap: "wrap", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ArticleMetaItem,
+      {
+        label: variant === "full" ? `📅 ${t("meta.publicationDate")}` : "📅 ",
+        value: index$1.formatDate({ value: updatedAt ?? createdAt, locale: currentLocale.code })
+      }
+    ),
+    !!minutesToRead && /* @__PURE__ */ jsxRuntime.jsx(
+      ArticleMetaItem,
+      {
+        label: variant === "full" ? `⏳ ${t("meta.readingTime.label")}` : "⏳ ",
+        value: t("meta.readingTime.count", { count: minutesToRead })
+      }
+    ),
+    !!author && /* @__PURE__ */ jsxRuntime.jsx(ArticleMetaItem, { label: variant === "full" ? `🧑🏻‍💻 ${t("meta.author")}` : "🧑🏻‍💻 ", value: author.name })
+  ] });
+};
 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 ref = react$1.useRef(null);
+  const [showToggle, setShowToggle] = react$1.useState(false);
+  const [isExpanded, setIsExpanded] = react$1.useState(false);
   const { t } = reactI18next.useTranslation("author");
-  react.useLayoutEffect(() => {
+  react$1.useLayoutEffect(() => {
     if (ref.current) {
       const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
       const isClamped = scrollWidth > clientWidth || scrollHeight > clientHeight;
@@ -35,58 +63,95 @@ const Bio = ({ content, maxLines = 1 }) => {
   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") })
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isExpanded, startingHeight: ONE_LINE_HEIGHT * maxLines, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { ref, fontSize: "md", noOfLines: isExpanded ? void 0 : maxLines, children: content }) }),
+    showToggle && /* @__PURE__ */ jsxRuntime.jsx(react.Button, { size: "sm", variant: "link", colorScheme: "blue", onClick: handleClick, children: isExpanded ? t("action.collapse") : t("action.expand") })
   ] });
 };
 const Author = ({ author, variant }) => {
   const { name, role, bio, avatar, socialNetworks } = author;
   if (variant === "short") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { align: "center", gap: 4, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: 12, h: 12, children: /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: avatar, alt: name, rounded: "full" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { fontWeight: "semibold", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: name }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { color: "gray.500", children: role })
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { align: "center", gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { w: 12, h: 12, children: /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: avatar, alt: name, rounded: "full" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { fontWeight: "semibold", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { color: "gray.500", children: role })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { direction: { base: "column", sm: "row" }, align: { base: "center", sm: "flex-start" }, gap: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { flex: 1, maxW: { base: 48, sm: 32 }, children: /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: avatar, alt: name, rounded: "full" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { fontSize: "lg", fontWeight: 600, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { direction: { base: "column", sm: "row" }, align: { base: "center", sm: "flex-start" }, gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { flex: 1, maxW: { base: 48, sm: 32 }, children: /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: avatar, alt: name, rounded: "full" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "lg", fontWeight: 600, children: [
         `${name}, `,
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", display: "inline-block", color: "gray.500", children: role })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", display: "inline-block", color: "gray.500", children: role })
       ] }),
-      (socialNetworks == null ? void 0 : socialNetworks.length) && /* @__PURE__ */ jsxRuntime.jsx(index$1.SocialNetworks, { socialNetworks }),
+      (socialNetworks == null ? void 0 : socialNetworks.length) && /* @__PURE__ */ jsxRuntime.jsx(index$2.SocialNetworks, { socialNetworks }),
       /* @__PURE__ */ jsxRuntime.jsx(Bio, { content: bio })
     ] }) })
   ] });
 };
 const Center = ({ children, ...boxProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Center, { ...boxProps, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Center, { ...boxProps, children });
 };
 const defaultColumns = { base: 1, sm: 2, md: 3, lg: 4, xl: 5 };
 const Grid = ({ items, columns = defaultColumns, gap, render, getKey, ...boxProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.SimpleGrid, { as: "ul", columns, spacing: gap, p: 0, m: 0, listStyleType: "none", ...boxProps, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index2)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.SimpleGrid, { as: "ul", columns, spacing: gap, p: 0, m: 0, listStyleType: "none", ...boxProps, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "li", children: render(item) }, getKey ? getKey(item, index2) : index2)) });
+};
+const ActionButton = ({ label, href, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { justifyContent: "center", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.LinkButton, { label, href, textDecoration: "none" }) });
+};
+const ArticleCard = ({ title, image, meta, url }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Card, { as: index.Link, to: url, overflow: "hidden", _hover: { transform: "scale(1.02)", textDecoration: "none" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.CardBody, { as: "section", p: 0, children: [
+      !!image && /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: image, alt: title, mode: "thumbnail" }),
+      /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { size: "md", px: 4, children: title })
+    ] }),
+    !!meta && /* @__PURE__ */ jsxRuntime.jsx(react.CardFooter, { as: "footer", fontSize: "sm", pt: 0, px: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ArticleMeta, { ...meta, variant: "short" }) })
+  ] });
+};
+const ArticleCardGrid = ({
+  items,
+  columns = { base: 1, md: 2, lg: 3 },
+  gap = 4,
+  ...boxProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Grid,
+    {
+      items,
+      columns,
+      gap,
+      getKey: (_, index2) => index2,
+      render: (item) => /* @__PURE__ */ jsxRuntime.jsx(ArticleCard, { ...item }),
+      ...boxProps
+    }
+  );
+};
+const ArticleInfoCard = ({ title, description, meta, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Card, { as: "article", variant: "filled", ...boxProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.CardHeader, { as: "header", pb: 0, children: /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading1, { children: title }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.CardBody, { as: "section", py: 0, children: description }),
+    !!meta && /* @__PURE__ */ jsxRuntime.jsx(react.CardFooter, { as: "footer", children: /* @__PURE__ */ jsxRuntime.jsx(ArticleMeta, { ...meta }) })
+  ] });
 };
 const AuthorCard = ({ author, ...boxProps }) => {
   const { t } = reactI18next.useTranslation("author");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "filled", ...boxProps, 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, { children: /* @__PURE__ */ jsxRuntime.jsx(Author, { author, variant: "full" }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Card, { as: "article", variant: "filled", ...boxProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.CardHeader, { pb: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { size: "md", children: t("title") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.CardBody, { children: /* @__PURE__ */ jsxRuntime.jsx(Author, { author, variant: "full" }) })
   ] });
 };
 const BonusCardContent = ({ content, buttonColor }) => {
   const { t } = reactI18next.useTranslation("author");
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Popover, { autoFocus: false, isLazy: true, lazyBehavior: "keepMounted", 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: buttonColor, children: isOpen ? t("action.collapse") : t("action.expand") }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverContent, { 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 }) }) }) })
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Popover, { autoFocus: false, isLazy: true, lazyBehavior: "keepMounted", children: ({ isOpen }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Button, { size: "sm", variant: "link", color: buttonColor, children: isOpen ? t("action.collapse") : t("action.expand") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverContent, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverBody, { children: Array.isArray(content) ? /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { children: content.map((paragraph, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", children: paragraph }, index2)) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Text, { children: content }) }) }) })
   ] }) });
 };
 const BonusCardTitle = ({ content, color, textColor }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Text,
+    react.Text,
     {
       as: "h3",
       display: "inline-block",
@@ -114,7 +179,7 @@ const BonusCard = ({
   className
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.Card,
+    react.Card,
     {
       as: "article",
       h: "full",
@@ -135,12 +200,12 @@ const BonusCard = ({
       } : void 0,
       className,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react$1.CardBody, { as: "section", pb: 0, flex: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.CardBody, { as: "section", pb: 0, flex: 1, children: [
           /* @__PURE__ */ jsxRuntime.jsx(BonusCardTitle, { content: title, color: titleColor, textColor: titleTextColor }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "2xl", fontWeight: "bold", my: 2, children: subtitle }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xl", fontWeight: "bold", my: 2, children: subtitle }),
           /* @__PURE__ */ jsxRuntime.jsx(BonusCardContent, { content, buttonColor: textColor })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { as: "footer", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.LinkButton, { ...link, width: "full", size: "md", textDecoration: "none" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(react.CardFooter, { as: "footer", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.LinkButton, { ...link, width: "full", size: "md", textDecoration: "none" }) })
       ]
     }
   );
@@ -164,25 +229,25 @@ const BonusCardGrid = ({
   );
 };
 const Faq = ({ items, ...boxProps }) => {
-  const { bgColor, invertedColor } = index$2.usePrimaryColors();
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Accordion, { allowToggle: true, ...boxProps, 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: invertedColor, bgColor }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "bold", children: question }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.AccordionIcon, {})
+  const { bgColor, invertedColor } = index$4.usePrimaryColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Accordion, { allowToggle: true, ...boxProps, children: items.map(({ question, answer }) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.AccordionItem, { border: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "h3", children: /* @__PURE__ */ jsxRuntime.jsxs(react.AccordionButton, { _hover: { color: invertedColor, bgColor }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "bold", children: question }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.AccordionIcon, {})
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.AccordionPanel, { children: answer })
+      /* @__PURE__ */ jsxRuntime.jsx(react.AccordionPanel, { children: answer })
     ] }, question);
   }) });
 };
 const FeatureCard = ({ title, description }) => {
-  return /* @__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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Card, { as: "article", variant: "outline", textAlign: "center", h: "100%", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.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(react.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.500", children: description }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { color: "gray.500", children: description }) })
   ] });
 };
 const FeatureCardGrid = ({
@@ -197,7 +262,7 @@ const FeatureCardGrid = ({
       items,
       columns,
       gap,
-      getKey: ({ title }) => title,
+      getKey: (_, index2) => index2,
       render: (item) => /* @__PURE__ */ jsxRuntime.jsx(FeatureCard, { ...item }),
       ...boxProps
     }
@@ -205,7 +270,7 @@ const FeatureCardGrid = ({
 };
 const GameCard = ({ name, description, image, url, height = "auto" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.LinkBox,
+    react.LinkBox,
     {
       as: "article",
       rounded: "md",
@@ -218,9 +283,9 @@ const GameCard = ({ name, description, image, url, height = "auto" }) => {
       _hover: { transform: "scale(1.05)" },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: image, alt: name, mode: "thumbnail" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { as: "section", rounded: "md", p: 4, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", children: url ? /* @__PURE__ */ jsxRuntime.jsx(react$1.LinkOverlay, { as: index.Link, to: url, children: name }) : name }),
-          !!description && /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "sm", color: "gray.600", children: description })
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "section", rounded: "md", p: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", children: url ? /* @__PURE__ */ jsxRuntime.jsx(react.LinkOverlay, { as: index.Link, to: url, children: name }) : name }),
+          !!description && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "gray.600", children: description })
         ] })
       ]
     }
@@ -237,7 +302,7 @@ const GameCardGrid = ({
 }) => {
   let sortedItems = items;
   if (order === "random") {
-    sortedItems = [...items].sort(randomSeed ? index$3.getSeededRandomComparator(randomSeed) : index$3.randomComparator);
+    sortedItems = [...items].sort(randomSeed ? index$5.getSeededRandomComparator(randomSeed) : index$5.randomComparator);
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     Grid,
@@ -261,7 +326,7 @@ const GameDemoContent = ({
   const { t } = reactI18next.useTranslation("gameDemo");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.Box,
+      react.Box,
       {
         as: "iframe",
         src,
@@ -274,9 +339,9 @@ const GameDemoContent = ({
         children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("warning") })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { position: "absolute", top: 2, left: 2, gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { position: "absolute", top: 2, left: 2, gap: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        react$1.IconButton,
+        react.IconButton,
         {
           icon: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: 3, h: 3 }),
           title: t("action.exit"),
@@ -290,7 +355,7 @@ const GameDemoContent = ({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        react$1.IconButton,
+        react.IconButton,
         {
           icon: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(icons.ViewOffIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.ViewIcon, { w: 4, h: 4 }),
           title: t(isFullscreen ? "action.deactivateFullscreen" : "action.activateFullscreen"),
@@ -304,23 +369,58 @@ const GameDemoContent = ({
         }
       )
     ] }),
-    /* @__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" }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
   ] });
 };
-const GameDemoPreview = ({ image, alt, href, imageFit = "contain", onPlayDemo }) => {
+const GameDemoAlert = () => {
   const { t } = reactI18next.useTranslation("gameDemo");
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: image, alt, objectFit: imageFit, w: "100%", h: "100%" }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { spacing: 4, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.LinkButton,
-        {
-          animation: { type: "pulse", params: { duration: 2, timingFunction: "ease-out", isInfinite: true } },
-          ...href ? { label: t("action.playForReal"), href } : { label: t("action.playForFree"), onClick: onPlayDemo }
-        }
-      ),
-      !!href && /* @__PURE__ */ jsxRuntime.jsx(
-        react$1.Button,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Alert,
+    {
+      status: "warning",
+      flexDirection: { base: "column", md: "row" },
+      justifyContent: { base: "center", md: "flex-start" },
+      alignItems: "center",
+      rounded: "lg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.AlertIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          react.Flex,
+          {
+            direction: { base: "column", md: "row" },
+            justifyContent: { base: "center", md: "flex-start" },
+            alignItems: { base: "center", md: "baseline" },
+            wrap: "wrap",
+            textAlign: { base: "center", md: "start" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.AlertTitle, { my: 1, fontSize: { base: "sm", sm: "md", md: "lg" }, lineHeight: "short", children: t("alert.title") }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.AlertDescription, { fontSize: { base: "sm", sm: "md", md: "lg" }, lineHeight: "short", children: t("alert.description") })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const buttonAnimationProps = {
+  type: "pulse",
+  params: { duration: 2, timingFunction: "ease-out", isInfinite: true }
+};
+const GameDemoPreview = ({ image, alt, src, refLink, imageFit = "contain", onPlayDemo }) => {
+  const { t } = reactI18next.useTranslation("gameDemo");
+  function getPrimaryButton() {
+    if (refLink) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$2.LinkButton, { animation: buttonAnimationProps, label: t("action.playForReal"), href: refLink });
+    } else if (src) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$2.LinkButton, { animation: buttonAnimationProps, label: t("action.playForFree"), onClick: onPlayDemo });
+    } else {
+      return null;
+    }
+  }
+  function getSecondaryButton() {
+    if (refLink && src) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        react.Button,
         {
           variant: "solid",
           colorScheme: "brand",
@@ -329,14 +429,26 @@ const GameDemoPreview = ({ image, alt, href, imageFit = "contain", onPlayDemo })
           onClick: onPlayDemo,
           children: t("action.playForFree")
         }
-      )
-    ] }) })
+      );
+    } else {
+      return null;
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { children: [
+    !src && /* @__PURE__ */ jsxRuntime.jsx(GameDemoAlert, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: image, alt, objectFit: imageFit, w: "100%", h: "100%" }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { spacing: 4, children: [
+        getPrimaryButton(),
+        getSecondaryButton()
+      ] }) })
+    ] })
   ] });
 };
-const GameDemo = ({ name, src, href, previewImage, previewImageFit, ...boxProps }) => {
-  const [isRunning, setIsRunning] = react.useState(false);
-  const [isLoaded, setIsLoaded] = react.useState(false);
-  const { isOpen: isFullscreen, onToggle, onClose } = react$1.useDisclosure({ defaultIsOpen: false });
+const GameDemo = ({ name, src, refLink, previewImage, previewImageFit, ...boxProps }) => {
+  const [isRunning, setIsRunning] = react$1.useState(false);
+  const [isLoaded, setIsLoaded] = react$1.useState(false);
+  const { isOpen: isFullscreen, onToggle, onClose } = react.useDisclosure({ defaultIsOpen: false });
   function handleLoad() {
     setIsLoaded(true);
   }
@@ -353,7 +465,7 @@ const GameDemo = ({ name, src, href, previewImage, previewImageFit, ...boxProps
     setIsRunning(true);
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
+    react.Box,
     {
       as: "article",
       display: "grid",
@@ -376,7 +488,8 @@ const GameDemo = ({ name, src, href, previewImage, previewImageFit, ...boxProps
         {
           image: previewImage,
           alt: name,
-          href,
+          src,
+          refLink,
           imageFit: previewImageFit,
           onPlayDemo: handlePlayDemo
         }
@@ -385,12 +498,12 @@ const GameDemo = ({ name, src, href, previewImage, previewImageFit, ...boxProps
   );
 };
 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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { w: "50%", color: "gray.500", textTransform: "capitalize", children: [
       title,
       ":"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { w: "50%", textTransform: "capitalize", children: value })
+    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { w: "50%", textTransform: "capitalize", children: value })
   ] });
 };
 const MAX_VISIBLE_LANGUAGE = 5;
@@ -410,26 +523,26 @@ function stringifyArray(array, max) {
 function getGameInfoItemValue(key, value, locale) {
   let formattedValue = "";
   if (typeof value !== "string") {
-    if (key === index$4.GameCharacteristic.Rtp) {
-      formattedValue = index$3.formatNumber(value, { percent: "real", precision: 3 });
+    if (key === index$6.GameCharacteristic.Rtp) {
+      formattedValue = index$1.formatNumber(value, { percent: "real", precision: 3 });
     }
-    if (key === index$4.GameCharacteristic.MinBet || key === index$4.GameCharacteristic.MaxBet || key === index$4.GameCharacteristic.MaxWin) {
-      formattedValue = index$3.formatNumber(value, { locale });
+    if (key === index$6.GameCharacteristic.MinBet || key === index$6.GameCharacteristic.MaxBet || key === index$6.GameCharacteristic.MaxWin) {
+      formattedValue = index$1.formatNumber(value, { locale });
     }
-    if (key === index$4.GameCharacteristic.Compatibility || key === index$4.GameCharacteristic.BonusFeatures) {
+    if (key === index$6.GameCharacteristic.Compatibility || key === index$6.GameCharacteristic.BonusFeatures) {
       formattedValue = stringifyArray(value);
     }
-    if (key === index$4.GameCharacteristic.Languages) {
+    if (key === index$6.GameCharacteristic.Languages) {
       formattedValue = stringifyArray(value, MAX_VISIBLE_LANGUAGE);
     }
     if (typeof value === "boolean") {
       formattedValue = stringifyHasFeature(value);
     }
   }
-  if (key === index$4.GameCharacteristic.ReleaseDate) {
-    formattedValue = index$5.formatDate({ value, locale, options: { year: "numeric", month: "long" } });
+  if (key === index$6.GameCharacteristic.ReleaseDate) {
+    formattedValue = index$1.formatDate({ value, locale, options: { year: "numeric", month: "long" } });
   }
-  if (key === index$4.GameCharacteristic.Volatility && Object.values(index$4.GameVolatility).includes(value)) {
+  if (key === index$6.GameCharacteristic.Volatility && Object.values(index$6.GameVolatility).includes(value)) {
     formattedValue = stringifyVolatility(value);
   }
   if (!formattedValue) {
@@ -439,7 +552,7 @@ function getGameInfoItemValue(key, value, locale) {
 }
 const DEFAULT_CURRENCY = "$, €, £";
 function getGameInfoCurrency(currency, locale) {
-  const currencies = Array.isArray(currency) ? currency.map((code) => index$3.getCurrencySymbol(code, locale)) : [index$3.getCurrencySymbol(currency, locale)];
+  const currencies = Array.isArray(currency) ? currency.map((code) => index$5.getCurrencySymbol(code, locale)) : [index$5.getCurrencySymbol(currency, locale)];
   return stringifyArray(currencies);
 }
 const GameInfo = ({ info, currencies }) => {
@@ -447,18 +560,18 @@ const GameInfo = ({ info, currencies }) => {
   const { currentLocale } = index.usePageContext();
   const currency = (currencies == null ? void 0 : currencies.length) ? getGameInfoCurrency(currencies, currentLocale.code) : DEFAULT_CURRENCY;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
+    react.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}`) }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(react.Card, { as: "article", variant: "outline", h: "100%", p: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.CardHeader, { as: "header", p: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { as: "h2", fontSize: "xl", children: t("title") }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.CardBody, { as: "section", p: 0, children: Object.entries(info).map(([group, items]) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Divider, { my: 2 }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontWeight: "semibold", mb: 2, children: t(`group.${group}`) }),
           Object.entries(items).map(([itemKey, itemValue]) => {
             if (!itemValue) {
               return null;
@@ -473,30 +586,78 @@ const GameInfo = ({ info, currencies }) => {
   );
 };
 const HowTo = ({ steps, ...boxProps }) => {
-  const { bgColor, invertedColor } = index$2.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, thumbnail }, index$12) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Circle, { size: 12, bgColor, color: invertedColor, fontSize: "lg", fontWeight: "bold", children: String(index$12 + 1) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { flex: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "lg", fontWeight: "bold", children: title }),
+  const { bgColor, invertedColor } = index$4.usePrimaryColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(react.SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description, thumbnail }, index$12) => /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: 12, bgColor, color: invertedColor, fontSize: "lg", fontWeight: "bold", children: String(index$12 + 1) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { flex: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "lg", fontWeight: "bold", children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: thumbnail, alt: title, mode: "thumbnail", hasZoom: true }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: description })
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { children: description })
     ] })
   ] }, index$12)) });
 };
+function getQuotePseudoElement(color) {
+  return {
+    content: '"❛❛"',
+    position: "absolute",
+    top: -8,
+    left: -2,
+    fontSize: "6rem",
+    fontStyle: "italic",
+    color
+  };
+}
+const PrefixMap = {
+  advice: "🚀",
+  fact: "💡",
+  quote: ""
+};
+const BorderColorMap = {
+  advice: "red.400",
+  fact: "yellow.400",
+  quote: "gray"
+};
+const Informer = ({ type, text, author = null, ...boxProps }) => {
+  const { t } = reactI18next.useTranslation("informer");
+  const quotePseudoElementColor = react.useColorModeValue("blackAlpha.300", "whiteAlpha.300");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Card,
+    {
+      variant: "filled",
+      p: 4,
+      borderLeft: "4px solid",
+      borderLeftColor: BorderColorMap[type],
+      gap: 4,
+      ...type === "quote" && { _before: getQuotePseudoElement(quotePseudoElementColor) },
+      ...boxProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.CardBody, { as: "blockquote", p: 0, fontStyle: "italic", children: [
+          type !== "quote" && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", fontStyle: "normal", fontWeight: "semibold", mr: 2, children: [
+            PrefixMap[type],
+            t(type),
+            ":"
+          ] }),
+          text
+        ] }),
+        !!author && /* @__PURE__ */ jsxRuntime.jsx(react.CardFooter, { alignItems: "center", justify: "flex-end", p: 0, children: /* @__PURE__ */ jsxRuntime.jsx(Author, { author, variant: "short" }) })
+      ]
+    }
+  );
+};
 const List = ({ items, bullet = "—", render, ...boxProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { pl: 0, ml: 2, ...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 }),
+  return /* @__PURE__ */ jsxRuntime.jsx(react.List, { pl: 0, ml: 2, ...boxProps, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react.ListItem, { display: "flex", gap: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: bullet }),
     render ? render(item) : item
   ] }, index2)) });
 };
 const NotFound = () => {
   const { t } = reactI18next.useTranslation("pageNotFound");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading1, { children: t("title") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(index$6.Paragraph, { fontSize: "xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading1, { children: t("title") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(index$3.Paragraph, { fontSize: "xl", children: [
       t("description"),
       " ",
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { as: index.Link, to: "/", variant: "link", colorScheme: "brand", fontSize: "xl", children: t("action") })
+      /* @__PURE__ */ jsxRuntime.jsx(react.Button, { as: index.Link, to: "/", variant: "link", colorScheme: "brand", fontSize: "xl", children: t("action") })
     ] })
   ] });
 };
@@ -505,31 +666,31 @@ const CookiePolicy = () => {
   const { metadata } = index.useSiteContext();
   const { name: siteName } = metadata;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading1, { children: t("title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("text", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionOne.title", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionOne.textOne", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionOne.textTwo") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionTwo.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionTwo.textOne", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(index$6.Unordered, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading1, { children: t("title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("text", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionOne.title", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionOne.textOne", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionOne.textTwo") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionTwo.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionTwo.textOne", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(index$3.Unordered, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("sectionTwo.list.itemOne") }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("sectionTwo.list.itemTwo") }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("sectionTwo.list.itemThree") })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionTwo.textTwo") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionThree.title") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(index$6.Ordered, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionTwo.textTwo") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionThree.title") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(index$3.Ordered, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("sectionThree.list.itemOne") }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("sectionThree.list.itemTwo") }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("sectionThree.list.itemThree") }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("sectionThree.list.itemFour") })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionThree.text", { siteName }) })
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionThree.text", { siteName }) })
   ] });
 };
 const ContactForm = ({ ...boxProps }) => {
-  const toast = react$1.useToast();
+  const toast = react.useToast();
   const { t } = reactI18next.useTranslation("contactForm");
   function handleSubmit(event) {
     event.preventDefault();
@@ -553,21 +714,21 @@ const ContactForm = ({ ...boxProps }) => {
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Box,
+    react.Box,
     {
       as: "form",
       borderRadius: "lg",
       p: 8,
-      color: react$1.useColorModeValue("gray.700", "whiteAlpha.900"),
-      bg: react$1.useColorModeValue("white", "gray.700"),
+      color: react.useColorModeValue("gray.700", "whiteAlpha.900"),
+      bg: react.useColorModeValue("white", "gray.700"),
       shadow: "base",
       onSubmit: handleSubmit,
       ...boxProps,
-      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(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { isRequired: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { children: t("field.name.label") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(react.InputGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.InputLeftElement, { children: /* @__PURE__ */ jsxRuntime.jsx(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -579,21 +740,21 @@ const ContactForm = ({ ...boxProps }) => {
                 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.jsx(react.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.FormControl, { isRequired: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { children: t("field.email.label") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(react.InputGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.InputLeftElement, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.EmailIcon, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.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.jsxs(react.FormControl, { isRequired: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { children: t("field.message.label") }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.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") })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Button, { type: "submit", colorScheme: "brand", width: "full", children: t("action.send") })
       ] })
     }
   );
@@ -601,8 +762,8 @@ const ContactForm = ({ ...boxProps }) => {
 const Contacts = () => {
   const { t } = reactI18next.useTranslation("pageContacts");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading1, { children: t("title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("text") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading1, { children: t("title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("text") }),
     /* @__PURE__ */ jsxRuntime.jsx(ContactForm, {})
   ] });
 };
@@ -611,29 +772,29 @@ const PrivacyPolicy = ({ contactsSlug }) => {
   const { metadata } = index.useSiteContext();
   const { name: siteName } = metadata;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading1, { children: t("title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("text") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionOne.title", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionOne.text", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionTwo.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionTwo.textOne") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(index$6.Unordered, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading1, { children: t("title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("text") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionOne.title", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionOne.text", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionTwo.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionTwo.textOne") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(index$3.Unordered, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("sectionTwo.list.itemOne") }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("sectionTwo.list.itemTwo") })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionTwo.textTwo") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionThree.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionThree.text") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionFour.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionFour.text") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionFive.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionFive.text", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionSix.title") }),
-    contactsSlug ? /* @__PURE__ */ jsxRuntime.jsxs(index$6.Paragraph, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionTwo.textTwo") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionThree.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionThree.text") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionFour.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionFour.text") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionFive.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionFive.text", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionSix.title") }),
+    contactsSlug ? /* @__PURE__ */ jsxRuntime.jsxs(index$3.Paragraph, { children: [
       t("sectionSix.textWithLink.contentStart"),
       /* @__PURE__ */ jsxRuntime.jsx(index.Link, { color: "brand.400", to: contactsSlug, children: t("sectionSix.textWithLink.link") }),
       t("sectionSix.textWithLink.contentEnd", { siteName })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionSix.text", { siteName }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionSix.text", { siteName }) })
   ] });
 };
 const TermsAndConditions = ({ privacyPolicySlug }) => {
@@ -641,11 +802,11 @@ const TermsAndConditions = ({ privacyPolicySlug }) => {
   const { metadata } = index.useSiteContext();
   const { name: siteName } = metadata;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading1, { children: t("title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("text", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionOne.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionOne.text", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Unordered, { children: ["One", "Two", "Three", "Four"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(index$6.Paragraph, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading1, { children: t("title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("text", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionOne.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionOne.text", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Unordered, { children: ["One", "Two", "Three", "Four"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(index$3.Paragraph, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
         t(`sectionOne.list.item${i}.title`),
         ":"
@@ -653,8 +814,8 @@ const TermsAndConditions = ({ privacyPolicySlug }) => {
       /* @__PURE__ */ jsxRuntime.jsx("br", {}),
       t(`sectionOne.list.item${i}.description`, { siteName })
     ] }) }, index2)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionTwo.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Ordered, { children: ["One", "Two", "Three", "Four"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(index$6.Paragraph, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionTwo.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Ordered, { children: ["One", "Two", "Three", "Four"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(index$3.Paragraph, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
         t(`sectionTwo.list.item${i}.title`),
         ":"
@@ -662,11 +823,11 @@ const TermsAndConditions = ({ privacyPolicySlug }) => {
       /* @__PURE__ */ jsxRuntime.jsx("br", {}),
       t(`sectionTwo.list.item${i}.description`, { siteName })
     ] }) }, index2)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionThree.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionThree.text", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionFour.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionFour.text", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Unordered, { children: ["One", "Two"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(index$6.Paragraph, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionThree.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionThree.text", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionFour.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionFour.text", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Unordered, { children: ["One", "Two"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(index$3.Paragraph, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
         t(`sectionFour.list.item${i}.title`),
         ":"
@@ -674,18 +835,18 @@ const TermsAndConditions = ({ privacyPolicySlug }) => {
       /* @__PURE__ */ jsxRuntime.jsx("br", {}),
       t(`sectionFour.list.item${i}.description`, { siteName })
     ] }) }, index2)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionFive.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionFive.text", { siteName }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionSix.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionSix.textOne") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Unordered, { children: ["One", "Two", "Three"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: t(`sectionSix.list.item${i}`) }, index2)) }),
-    privacyPolicySlug ? /* @__PURE__ */ jsxRuntime.jsxs(index$6.Paragraph, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionFive.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionFive.text", { siteName }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionSix.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionSix.textOne") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Unordered, { children: ["One", "Two", "Three"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: t(`sectionSix.list.item${i}`) }, index2)) }),
+    privacyPolicySlug ? /* @__PURE__ */ jsxRuntime.jsxs(index$3.Paragraph, { children: [
       t("sectionSix.textTwoWithLink.contentStart"),
       /* @__PURE__ */ jsxRuntime.jsx(index.Link, { color: "brand.400", to: privacyPolicySlug, children: t("sectionSix.textTwoWithLink.link") }),
       t("sectionSix.textTwoWithLink.contentEnd")
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(index$6.Paragraph, { children: t("sectionSix.textTwo") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Heading2, { children: t("sectionSeven.title") }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$6.Ordered, { children: ["One", "Two"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(index$6.Paragraph, { children: [
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(index$3.Paragraph, { children: t("sectionSix.textTwo") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Heading2, { children: t("sectionSeven.title") }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.Ordered, { children: ["One", "Two"].map((i, index2) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(index$3.Paragraph, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
         t(`sectionSeven.list.item${i}.title`),
         ":"
@@ -714,35 +875,35 @@ const BgColorMap = {
 const ProsConsCard = ({ itemType, items }) => {
   const { t } = reactI18next.useTranslation("prosCons");
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.Card,
+    react.Card,
     {
       as: "article",
       flex: 1,
       p: 2,
-      bgColor: react$1.useColorModeValue(`${BgColorMap[itemType]}.100`, `${BgColorMap[itemType]}.800`),
+      bgColor: react.useColorModeValue(`${BgColorMap[itemType]}.100`, `${BgColorMap[itemType]}.800`),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          react$1.CardHeader,
+          react.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]) })
+            bgColor: react.useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { as: "h3", textTransform: "uppercase", fontSize: "xl", children: t(TitleMap[itemType]) })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          react$1.CardBody,
+          react.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: [
+            bgColor: react.useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.List, { spacing: 4, p: 0, children: items.map(({ title, description }) => /* @__PURE__ */ jsxRuntime.jsxs(react.ListItem, { display: "flex", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.ListIcon, { as: IconMap[itemType], w: 6, h: 6, color: IconColorMap[itemType] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontWeight: "semibold", fontSize: "md", children: [
                 title,
-                !!description && /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "span", fontWeight: "normal", children: [
+                !!description && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", fontWeight: "normal", children: [
                   ": ",
                   description
                 ] })
@@ -756,7 +917,7 @@ const ProsConsCard = ({ itemType, items }) => {
 };
 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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.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 })
   ] });
@@ -773,11 +934,11 @@ const Seo = ({ children, title, description, lang }) => {
   const { name: siteName, lang: defaultLang, seo } = metadata;
   const { title: defaultTitle, description: defaultDescription } = seo;
   const siteLang = lang || defaultLang;
-  const placeholders = react.useMemo(
+  const placeholders = react$1.useMemo(
     () => ({
       siteName,
-      currentYear: index$5.getCurrentYear(siteLang),
-      currentMonth: index$5.getCurrentMonth(siteLang)
+      currentYear: index$1.getCurrentYear(siteLang),
+      currentMonth: index$1.getCurrentMonth(siteLang)
     }),
     [siteName, siteLang]
   );
@@ -806,21 +967,21 @@ const Table = ({
   const headerItems = items.slice(0, columnNumber);
   const bodyItems = items.slice(columnNumber);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.TableContainer,
+    react.TableContainer,
     {
       border: bordered ? void 0 : "none",
       ...scrollable ? { maxH: "50vh", overflowY: "auto" } : {},
       ...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 })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(react.Table, { variant: striped ? "striped" : "simple", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Thead, { ...scrollable ? { position: "sticky", top: 0, zIndex: 1, bg: "gray.800" } : {}, children: /* @__PURE__ */ jsxRuntime.jsx(react.Tr, { children: headerItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.Th, { children: item }, index2)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Tbody, { children: Array.from({ length: Math.ceil(bodyItems.length / columnNumber) }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(react.Tr, { children: Array.from({ length: columnNumber }, (_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(react.Td, { children: bodyItems[rowIndex * columnNumber + colIndex] || "" }, colIndex)) }, rowIndex)) }),
+        !!caption && /* @__PURE__ */ jsxRuntime.jsx(react.TableCaption, { children: caption })
       ] })
     }
   );
 };
 const Tabs = ({ items, render, ...boxProps }) => {
-  const { tabs, panels } = react.useMemo(() => {
+  const { tabs, panels } = react$1.useMemo(() => {
     const tabs2 = [];
     const panels2 = [];
     items.forEach(({ content, ...tab }) => {
@@ -829,35 +990,13 @@ const Tabs = ({ items, render, ...boxProps }) => {
     });
     return { tabs: tabs2, panels: panels2 };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Tabs, { overflow: "hidden", colorScheme: "brand", ...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 ? render(panel) : panel }, index2)) })
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Tabs, { overflow: "hidden", colorScheme: "brand", ...boxProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.Tab, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index2)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.TabPanel, { children: render ? render(panel) : panel }, index2)) })
   ] });
 };
 const Tip = ({ tip, author = null, ...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 }),
-        !!author && /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { alignItems: "center", justify: "flex-end", p: 0, children: /* @__PURE__ */ jsxRuntime.jsx(Author, { author, variant: "short" }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Informer, { type: "quote", text: tip, author, ...boxProps });
 };
 const ExternalImage = ({ image, component: ImageComponent, alt = "", ...imageProps }) => {
   var _a, _b;
@@ -878,7 +1017,10 @@ function extractCurrencies(currencyList) {
   return [...new Set(currencyList.items.map(({ code }) => code))];
 }
 const StrapiComponent = ({ type, props, imageComponent }) => {
+  var _a;
   switch (type) {
+    case "STRAPI__COMPONENT_CONTENT_ACTION_BUTTON":
+      return /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { label: props.label, href: props.url, mb: 4 });
     case "STRAPI__COMPONENT_CONTENT_FAQ":
       return /* @__PURE__ */ jsxRuntime.jsx(Faq, { items: props.items, mb: 4 });
     case "STRAPI__COMPONENT_CONTENT_FEATURES":
@@ -933,8 +1075,8 @@ const StrapiComponent = ({ type, props, imageComponent }) => {
         GameDemo,
         {
           name: props.name,
-          src: props.src,
-          href: props.href,
+          src: props == null ? void 0 : props.src,
+          refLink: ((_a = props == null ? void 0 : props.partner) == null ? void 0 : _a.refLink) ?? (props == null ? void 0 : props.href),
           previewImage: /* @__PURE__ */ jsxRuntime.jsx(ExternalImage, { image: props.previewImage, alt: props.name, component: imageComponent }),
           mb: 4
         }
@@ -960,6 +1102,27 @@ const StrapiComponent = ({ type, props, imageComponent }) => {
           mb: 4
         }
       );
+    case "STRAPI__COMPONENT_CONTENT_INFORMER":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Informer,
+        {
+          type: props.type,
+          text: props.text,
+          author: props.author ? {
+            ...props.author,
+            avatar: /* @__PURE__ */ jsxRuntime.jsx(
+              ExternalImage,
+              {
+                component: imageComponent,
+                image: props.author.avatar,
+                alt: props.author.name,
+                style: { borderRadius: "50%" }
+              }
+            )
+          } : null,
+          mb: 4
+        }
+      );
     case "STRAPI__COMPONENT_CONTENT_LIST":
       return /* @__PURE__ */ jsxRuntime.jsx(List, { bullet: props.bullet, items: extractItemsFromJson(props.content), mb: 4 });
     case "STRAPI__COMPONENT_CONTENT_MEDIA":
@@ -1031,6 +1194,11 @@ const StrapiContentRenderer = ({ content, imageComponent }) => {
   }
   return content.map(({ __typename: type, ...props }, index2) => /* @__PURE__ */ jsxRuntime.jsx(StrapiComponent, { type, props, imageComponent }, index2));
 };
+exports.ActionButton = ActionButton;
+exports.ArticleCard = ArticleCard;
+exports.ArticleCardGrid = ArticleCardGrid;
+exports.ArticleInfoCard = ArticleInfoCard;
+exports.ArticleMeta = ArticleMeta;
 exports.Author = Author;
 exports.AuthorCard = AuthorCard;
 exports.BonusCard = BonusCard;
@@ -1047,6 +1215,7 @@ exports.GameDemo = GameDemo;
 exports.GameInfo = GameInfo;
 exports.Grid = Grid;
 exports.HowTo = HowTo;
+exports.Informer = Informer;
 exports.List = List;
 exports.NotFound = NotFound;
 exports.PrivacyPolicy = PrivacyPolicy;