@anywayseo/tools 3.1.2 → 4.0.0

package/dist/components/base/grid/index.d.ts

@@ -1,9 +1,8 @@
-import { BoxPositionProps, KeyGetter, RenderFunction } from '../../../types';
-import { ColumnsConfig, SpacingConfig } from './types';
+import { BoxPositionProps, GridColumns, GridGap, KeyGetter, RenderFunction } from '../../../types';
 type GridProps<T> = {
     items: T[];
-    columns?: ColumnsConfig;
-    gap?: SpacingConfig;
+    columns?: GridColumns;
+    gap?: GridGap;
     getKey?: KeyGetter<T>;
     render: RenderFunction<T>;
 } & BoxPositionProps;

package/dist/components/base/grid/utils.d.ts

@@ -1,2 +1,2 @@
-import { ColumnsConfig } from './types';
-export declare const defaultColumns: ColumnsConfig;
+import { GridColumns } from '../../../types';
+export declare const defaultColumns: GridColumns;

package/dist/components/bonus-card/content/index.d.ts

@@ -1,7 +1,8 @@
 import { FC } from 'react';
-import { IBonusCard } from '../../../types';
+import { Color, IBonusCard } from '../../../types';
 type BonusCardContentProps = {
     content: IBonusCard['content'];
+    buttonColor?: Color;
 };
 declare const BonusCardContent: FC<BonusCardContentProps>;
 export default BonusCardContent;

package/dist/components/bonus-card/index.d.ts

@@ -1,6 +1,10 @@
 import { FC } from 'react';
-import { IBonusCard } from '../../types';
+import { IBonusCard, Color } from '../../types';
 type BonusCardProps = IBonusCard & {
+    color?: Color;
+    textColor?: Color;
+    titleColor?: Color;
+    titleTextColor?: Color;
     className?: string;
 };
 declare const BonusCard: FC<BonusCardProps>;

package/dist/components/bonus-card/title/index.d.ts

@@ -1,7 +1,9 @@
 import { FC } from 'react';
-import { IBonusCard } from '../../../types';
+import { IBonusCard, Color } from '../../../types';
 type BonusCardTitleProps = {
     content: IBonusCard['title'];
+    color?: Color;
+    textColor?: Color;
 };
 declare const BonusCardTitle: FC<BonusCardTitleProps>;
 export default BonusCardTitle;

package/dist/components/bonus-card-grid/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { BoxPositionProps, GridColumns, GridGap, IBonusCard } from '../../types';
+type BonusCardGridProps = {
+    items: IBonusCard[];
+    columns?: GridColumns;
+    gap?: GridGap;
+} & BoxPositionProps;
+declare const BonusCardGrid: FC<BonusCardGridProps>;
+export default BonusCardGrid;

package/dist/components/feature-card-grid/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { BoxPositionProps, GridColumns, GridGap, IFeature } from '../../types';
+type FeatureCardGridProps = {
+    items: IFeature[];
+    columns?: GridColumns;
+    gap?: GridGap;
+} & BoxPositionProps;
+declare const FeatureCardGrid: FC<FeatureCardGridProps>;
+export default FeatureCardGrid;

package/dist/components/game-card/index.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { IGameCard } from '../../types';
+import { GameCardHeight, IGameCard } from '../../types';
 type GameCardProps = IGameCard & {
-    height?: 'full' | 'auto';
+    height?: GameCardHeight;
 };
 declare const GameCard: FC<GameCardProps>;
 export default GameCard;

package/dist/components/game-card-grid/index.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { BoxPositionProps, GameCardHeight, GridColumns, GridGap, IGameCard } from '../../types';
+type GameCardGridProps = {
+    items: IGameCard[];
+    columns?: GridColumns;
+    gap?: GridGap;
+    cardHeight?: GameCardHeight;
+    order?: 'default' | 'random';
+    randomSeed?: number;
+} & BoxPositionProps;
+declare const GameCardGrid: FC<GameCardGridProps>;
+export default GameCardGrid;

package/dist/components/index.cjs

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-eta4hdHD.js");
+const index = require("../index-BmkMQFW1.js");
 exports.Author = index.Author;
 exports.AuthorCard = index.AuthorCard;
 exports.BonusCard = index.BonusCard;
+exports.BonusCardGrid = index.BonusCardGrid;
 exports.Center = index.Center;
 exports.ContactForm = index.ContactForm;
 exports.Faq = index.Faq;
 exports.FeatureCard = index.FeatureCard;
-exports.Features = index.Features;
+exports.FeatureCardGrid = index.FeatureCardGrid;
 exports.GameCard = index.GameCard;
+exports.GameCardGrid = index.GameCardGrid;
 exports.GameDemo = index.GameDemo;
 exports.GameInfo = index.GameInfo;
 exports.Grid = index.Grid;
@@ -20,8 +22,8 @@ exports.List = index.List;
 exports.NotFound = index.NotFound;
 exports.ProsCons = index.ProsCons;
 exports.PulseButton = index.PulseButton;
-exports.RichTextRenderer = index.RichTextRenderer;
 exports.Seo = index.Seo;
+exports.StrapiContentRenderer = index.StrapiContentRenderer;
 exports.Table = index.Table;
 exports.Tabs = index.Tabs;
 exports.Tip = index.Tip;

package/dist/components/index.d.ts

@@ -1,11 +1,13 @@
 export * from './base';
 export { default as AuthorCard } from './author-card';
 export { default as BonusCard } from './bonus-card';
+export { default as BonusCardGrid } from './bonus-card-grid';
 export { default as ContactForm } from './contact-form';
 export { default as Faq } from './faq';
 export { default as FeatureCard } from './feature-card';
-export { default as Features } from './features';
+export { default as FeatureCardGrid } from './feature-card-grid';
 export { default as GameCard } from './game-card';
+export { default as GameCardGrid } from './game-card-grid';
 export { default as GameDemo } from './game-demo';
 export { default as GameInfo } from './game-info';
 export { default as HowTo } from './how-to';
@@ -13,8 +15,8 @@ export { default as Layout } from './layout';
 export { default as List } from './list';
 export { default as NotFound } from './not-found';
 export { default as ProsCons } from './pros-cons';
-export { default as RichTextRenderer } from './rich-text-renderer';
 export { default as Seo } from './seo';
+export { default as StrapiContentRenderer } from './strapi-content-renderer';
 export { default as Table } from './table';
 export { default as Tabs } from './tabs';
 export { default as Tip } from './tip';

package/dist/components/index.mjs

@@ -1,27 +1,29 @@
-import { h, A, B, i, C, F, a, b, G, c, d, j, H, L, k, e, N, P, l, R, S, T, f, g } from "../index-Cin-9-As.mjs";
+import { k, A, B, a, l, C, F, b, c, G, d, e, f, m, H, L, n, g, N, P, o, S, h, T, i, j } from "../index-DbwY2gVh.mjs";
 export {
-  h as Author,
+  k as Author,
   A as AuthorCard,
   B as BonusCard,
-  i as Center,
+  a as BonusCardGrid,
+  l as Center,
   C as ContactForm,
   F as Faq,
-  a as FeatureCard,
-  b as Features,
+  b as FeatureCard,
+  c as FeatureCardGrid,
   G as GameCard,
-  c as GameDemo,
-  d as GameInfo,
-  j as Grid,
+  d as GameCardGrid,
+  e as GameDemo,
+  f as GameInfo,
+  m as Grid,
   H as HowTo,
   L as Layout,
-  k as LinkButton,
-  e as List,
+  n as LinkButton,
+  g as List,
   N as NotFound,
   P as ProsCons,
-  l as PulseButton,
-  R as RichTextRenderer,
+  o as PulseButton,
   S as Seo,
+  h as StrapiContentRenderer,
   T as Table,
-  f as Tabs,
-  g as Tip
+  i as Tabs,
+  j as Tip
 };

package/dist/components/strapi-component/external-image/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { IGatsbyImageFile, ExternalImageComponent, ExternalImageComponentProps } from '../../../types';
+type ExternalImageProps = ExternalImageComponentProps<IGatsbyImageFile> & {
+    component: ExternalImageComponent;
+};
+declare const ExternalImage: FC<ExternalImageProps>;
+export default ExternalImage;

package/dist/components/strapi-component/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { StrapiComponentType, ExternalImageComponent } from '../../types';
+type StrapiComponentProps = {
+    type: StrapiComponentType;
+    props: any;
+    imageComponent: ExternalImageComponent;
+};
+declare const StrapiComponent: FC<StrapiComponentProps>;
+export default StrapiComponent;

package/dist/components/strapi-component/rich-text/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+type RichTextProps = {
+    content: string;
+};
+declare const RichText: FC<RichTextProps>;
+export default RichText;

package/dist/components/strapi-component/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function extractItemsFromJson(content: {
+    ['strapi_json_value']: string[];
+}): string[];

package/dist/components/strapi-content-renderer/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ExternalImageComponent } from '../../types';
+type StrapiContentRendererProps = {
+    content: unknown;
+    imageComponent: ExternalImageComponent;
+};
+declare const StrapiContentRenderer: FC<StrapiContentRendererProps>;
+export default StrapiContentRenderer;

package/dist/components/strapi-content-renderer/utils.d.ts

@@ -0,0 +1,2 @@
+import { IStrapiComponentFragment } from '../../types';
+export declare function isStrapiContent(array: unknown): array is IStrapiComponentFragment[];

package/dist/{index-eta4hdHD.js → index-BmkMQFW1.js}

@@ -2,16 +2,16 @@
 const jsxRuntime = require("react/jsx-runtime");
 const react$1 = require("@chakra-ui/react");
 const reactI18next = require("react-i18next");
-const index = require("./index-Cte2-g6s.js");
+const index = require("./index-Bw7vqsyw.js");
 const i18n = require("./index-Biz1dDqA.js");
 require("@ctrl/tinycolor");
 const react = require("react");
 const icons = require("@chakra-ui/icons");
-const index$1 = require("./index-IpSV-c71.js");
 const react$2 = require("@mdx-js/react");
 const index$2 = require("./index-BhsXlbd8.js");
-const i18n$1 = require("i18next");
 const gatsby = require("gatsby");
+const index$1 = require("./index-IpSV-c71.js");
+const i18n$1 = require("i18next");
 const Markdown = require("react-markdown");
 const ONE_LINE_HEIGHT = 24;
 const Bio = ({ content, maxLines = 1 }) => {
@@ -118,14 +118,14 @@ const AuthorCard = ({ author, ...boxProps }) => {
     )
   ] });
 };
-const BonusCardContent = ({ content }) => {
+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: "white", children: isOpen ? t("action.collapse") : t("action.expand") }) }),
+    /* @__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 }) }) }) })
   ] }) });
 };
-const BonusCardTitle = ({ content }) => {
+const BonusCardTitle = ({ content, color, textColor }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react$1.Text,
     {
@@ -134,22 +134,33 @@ const BonusCardTitle = ({ content }) => {
       py: 1,
       px: 2,
       borderRadius: "md",
-      bg: "yellow",
-      color: "black",
+      bg: color,
+      fontSize: "md",
       fontWeight: "bold",
-      fontSize: "lg",
+      color: textColor,
       children: content
     }
   );
 };
-const BonusCard = ({ title, subtitle, content, link, image, className }) => {
+const BonusCard = ({
+  title,
+  subtitle,
+  content,
+  link,
+  image,
+  color = "linear-gradient(90deg, #3b1f47, #731d58)",
+  textColor = "whiteAlpha.900",
+  titleColor = "yellow",
+  titleTextColor = "black",
+  className
+}) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react$1.Card,
     {
       as: "article",
       h: "full",
-      color: "whiteAlpha.900",
-      bg: "linear-gradient(90deg, #3b1f47, #731d58)",
+      color: textColor,
+      bg: color,
       _before: image ? {
         content: '""',
         position: "absolute",
@@ -166,15 +177,23 @@ const BonusCard = ({ title, subtitle, content, link, image, className }) => {
       className,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(react$1.CardBody, { as: "section", pb: 0, flex: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(BonusCardTitle, { content: title }),
+          /* @__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(BonusCardContent, { content })
+          /* @__PURE__ */ jsxRuntime.jsx(BonusCardContent, { content, buttonColor: textColor })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { as: "footer", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { ...link, width: "full" }) })
       ]
     }
   );
 };
+const BonusCardGrid = ({
+  items,
+  columns = { base: 1, md: 2, lg: 3 },
+  gap = 4,
+  ...boxProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid, { items, columns, gap, render: (item) => /* @__PURE__ */ jsxRuntime.jsx(BonusCard, { ...item }), ...boxProps });
+};
 const ContactForm = ({ ...boxProps }) => {
   const toast = react$1.useToast();
   const { t } = reactI18next.useTranslation("contactForm");
@@ -267,13 +286,18 @@ const FeatureCard = ({ title, description }) => {
     /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { color: "gray.500", children: description }) })
   ] });
 };
-const Features = ({ features, ...boxProps }) => {
+const FeatureCardGrid = ({
+  items,
+  columns = { base: 1, md: 2, lg: 3 },
+  gap = 4,
+  ...boxProps
+}) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Grid,
     {
-      items: features,
-      columns: { base: 1, md: 2, lg: 3 },
-      gap: 10,
+      items,
+      columns,
+      gap,
       getKey: ({ title }) => title,
       render: (item) => /* @__PURE__ */ jsxRuntime.jsx(FeatureCard, { ...item }),
       ...boxProps
@@ -303,6 +327,30 @@ const GameCard = ({ name, description, image, link, height = "auto" }) => {
     }
   );
 };
+const GameCardGrid = ({
+  items,
+  columns = { base: 1, md: 2, lg: 3 },
+  gap = 4,
+  cardHeight = "full",
+  order = "default",
+  randomSeed,
+  ...boxProps
+}) => {
+  let sortedItems = items;
+  if (order === "random") {
+    sortedItems = [...items].sort(randomSeed ? index.getSeedRandomComparator(randomSeed) : index.randomComparator);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Grid,
+    {
+      items: sortedItems,
+      columns,
+      gap,
+      render: (item) => /* @__PURE__ */ jsxRuntime.jsx(GameCard, { ...item, height: cardHeight }),
+      ...boxProps
+    }
+  );
+};
 const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscreen }) => {
   const { t } = reactI18next.useTranslation("gameDemo");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -913,10 +961,6 @@ const ProsCons = ({ items, ...boxProps }) => {
     /* @__PURE__ */ jsxRuntime.jsx(ProsConsCard, { itemType: "cons", items: cons })
   ] });
 };
-const RichTextRenderer = ({ content }) => {
-  const components = react$2.useMDXComponents();
-  return /* @__PURE__ */ jsxRuntime.jsx(Markdown, { components, children: content });
-};
 function replacePlaceholders(text, placeholders) {
   Object.entries(placeholders).forEach(([placeholder, replacement]) => {
     const regex = new RegExp(`{{${placeholder}}}`, "g");
@@ -973,21 +1017,6 @@ const Table = ({
     }
   );
 };
-const Tabs = ({ items, 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", ...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)) })
-  ] });
-};
 const Tip = ({ tip, author = null, ...boxProps }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react$1.Card,
@@ -1013,15 +1042,139 @@ const Tip = ({ tip, author = null, ...boxProps }) => {
     }
   );
 };
+const ExternalImage = ({ image, component: ImageComponent, alt = "", ...imageProps }) => {
+  var _a, _b;
+  const imageData = (_b = (_a = image == null ? void 0 : image.localFile) == null ? void 0 : _a.childImageSharp) == null ? void 0 : _b.gatsbyImageData;
+  return imageData ? /* @__PURE__ */ jsxRuntime.jsx(ImageComponent, { image: imageData, alt, ...imageProps }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+const RichText = ({ content }) => {
+  const components = react$2.useMDXComponents();
+  return /* @__PURE__ */ jsxRuntime.jsx(Markdown, { components, children: content });
+};
+function extractItemsFromJson(content) {
+  return content.strapi_json_value;
+}
+const StrapiComponent = ({ type, props, imageComponent }) => {
+  switch (type) {
+    case "STRAPI__COMPONENT_CONTENT_FAQ":
+      return /* @__PURE__ */ jsxRuntime.jsx(Faq, { items: props.items, mb: 4 });
+    case "STRAPI__COMPONENT_CONTENT_FEATURES":
+      return /* @__PURE__ */ jsxRuntime.jsx(FeatureCardGrid, { items: props.items, mb: 4 });
+    case "STRAPI__COMPONENT_CONTENT_GAME_DEMO":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        GameDemo,
+        {
+          name: props.name,
+          src: props.src,
+          previewImage: /* @__PURE__ */ jsxRuntime.jsx(ExternalImage, { image: props.previewImage, alt: props.name, component: imageComponent }),
+          mb: 4
+        }
+      );
+    case "STRAPI__COMPONENT_CONTENT_GAME_INFO":
+      return /* @__PURE__ */ jsxRuntime.jsx(GameInfo, { info: { ...props } });
+    case "STRAPI__COMPONENT_CONTENT_HOW_TO":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        HowTo,
+        {
+          steps: props.steps.map((step) => {
+            return {
+              ...step,
+              thumbnail: /* @__PURE__ */ jsxRuntime.jsx(ExternalImage, { image: step.thumbnail, alt: step.title, component: imageComponent })
+            };
+          }),
+          mb: 4
+        }
+      );
+    case "STRAPI__COMPONENT_CONTENT_LIST":
+      return /* @__PURE__ */ jsxRuntime.jsx(List, { bullet: props.bullet, items: extractItemsFromJson(props.content) });
+    case "STRAPI__COMPONENT_CONTENT_MEDIA":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ExternalImage,
+        {
+          component: imageComponent,
+          image: props.file,
+          alt: props.alternativeText,
+          style: { display: "inline-block", marginBottom: 16 }
+        }
+      );
+    case "STRAPI__COMPONENT_CONTENT_PROS_CONS":
+      return /* @__PURE__ */ jsxRuntime.jsx(ProsCons, { items: { ...props }, mb: 4 });
+    case "STRAPI__COMPONENT_CONTENT_RICH_TEXT":
+      return /* @__PURE__ */ jsxRuntime.jsx(RichText, { content: props.content.data.content });
+    case "STRAPI__COMPONENT_CONTENT_TABLE":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Table,
+        {
+          columnNumber: props.columnNumber,
+          items: extractItemsFromJson(props.content),
+          caption: props.caption,
+          bordered: props.bordered,
+          scrollable: props.scrollable,
+          striped: props.striped,
+          mb: 4
+        }
+      );
+    case "STRAPI__COMPONENT_CONTENT_TIP":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Tip,
+        {
+          tip: props.tip,
+          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
+        }
+      );
+    default:
+      return null;
+  }
+};
+function isStrapiContent(array) {
+  return Array.isArray(array) && array.every(
+    (item) => typeof item === "object" && item !== null && "__typename" in item && typeof item.__typename === "string"
+  );
+}
+const StrapiContentRenderer = ({ content, imageComponent }) => {
+  if (!isStrapiContent(content)) {
+    return null;
+  }
+  return content.map(({ __typename: type, ...props }, index2) => /* @__PURE__ */ jsxRuntime.jsx(StrapiComponent, { type, props, imageComponent }, index2));
+};
+const Tabs = ({ items, 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", ...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)) })
+  ] });
+};
 exports.Author = Author;
 exports.AuthorCard = AuthorCard;
 exports.BonusCard = BonusCard;
+exports.BonusCardGrid = BonusCardGrid;
 exports.Center = Center;
 exports.ContactForm = ContactForm;
 exports.Faq = Faq;
 exports.FeatureCard = FeatureCard;
-exports.Features = Features;
+exports.FeatureCardGrid = FeatureCardGrid;
 exports.GameCard = GameCard;
+exports.GameCardGrid = GameCardGrid;
 exports.GameDemo = GameDemo;
 exports.GameInfo = GameInfo;
 exports.Grid = Grid;
@@ -1032,8 +1185,8 @@ exports.List = List;
 exports.NotFound = NotFound;
 exports.ProsCons = ProsCons;
 exports.PulseButton = PulseButton;
-exports.RichTextRenderer = RichTextRenderer;
 exports.Seo = Seo;
+exports.StrapiContentRenderer = StrapiContentRenderer;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Tip = Tip;

package/dist/{index-Cte2-g6s.js → index-Bw7vqsyw.js}

@@ -91,12 +91,27 @@ function getCurrencySymbol(currencyCode) {
   }).replace(/\d/g, "").trim();
   return symbol;
 }
+function randomComparator() {
+  return Math.random() - 0.5;
+}
+function lcg(seed) {
+  const a = 1664525;
+  const c = 1013904223;
+  const m = 2 ** 31;
+  return (a * seed + c) % m / m;
+}
+function getSeedRandomComparator(seed) {
+  const safeSeed = Math.abs(seed) % Number.MAX_SAFE_INTEGER;
+  return () => lcg(safeSeed) - 0.5;
+}
 exports.Animation = Animation;
 exports.formatDate = formatDate;
 exports.formatNumber = formatNumber;
 exports.getCurrencySymbol = getCurrencySymbol;
 exports.getCurrentMonth = getCurrentMonth;
 exports.getCurrentYear = getCurrentYear;
+exports.getSeedRandomComparator = getSeedRandomComparator;
 exports.parseNumber = parseNumber;
+exports.randomComparator = randomComparator;
 exports.round = round;
 exports.toFixedTwo = toFixedTwo;

package/dist/{index-25M8hPOF.mjs → index-DLy2LYCD.mjs}

@@ -90,11 +90,26 @@ function getCurrencySymbol(currencyCode) {
   }).replace(/\d/g, "").trim();
   return symbol;
 }
+function randomComparator() {
+  return Math.random() - 0.5;
+}
+function lcg(seed) {
+  const a = 1664525;
+  const c = 1013904223;
+  const m = 2 ** 31;
+  return (a * seed + c) % m / m;
+}
+function getSeedRandomComparator(seed) {
+  const safeSeed = Math.abs(seed) % Number.MAX_SAFE_INTEGER;
+  return () => lcg(safeSeed) - 0.5;
+}
 export {
   Animation as A,
   getCurrentMonth as a,
   formatNumber as b,
   getCurrencySymbol as c,
+  randomComparator as d,
+  getSeedRandomComparator as e,
   formatDate as f,
   getCurrentYear as g,
   parseNumber as p,

package/dist/{index-Cin-9-As.mjs → index-DbwY2gVh.mjs}

@@ -1,16 +1,16 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Box, Collapse, Text, Button, Flex, Stack, Image, Center as Center$1, SimpleGrid, Link, Card, CardHeader, Heading, CardBody, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, LinkBox, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, List as List$1, ListItem, Icon, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
-import { A as Animation, b as formatNumber, c as getCurrencySymbol, f as formatDate, g as getCurrentYear, a as getCurrentMonth } from "./index-25M8hPOF.mjs";
+import { A as Animation, e as getSeedRandomComparator, d as randomComparator, b as formatNumber, c as getCurrencySymbol, f as formatDate, g as getCurrentYear, a as getCurrentMonth } from "./index-DLy2LYCD.mjs";
 import { a as GameCharacteristic } from "./index-DoBCANwf.mjs";
 import "@ctrl/tinycolor";
 import { useRef, useState, useLayoutEffect, Fragment as Fragment$1, forwardRef, useEffect, useMemo } from "react";
 import { EmailIcon, StarIcon, CloseIcon, ExternalLinkIcon, ChevronRightIcon, ChevronDownIcon, HamburgerIcon, ChevronUpIcon, WarningIcon, CheckCircleIcon } from "@chakra-ui/icons";
-import { u as usePrimaryColors } from "./index-xuSxvz5z.mjs";
 import { useMDXComponents } from "@mdx-js/react";
 import { u as useSiteContext } from "./index-BNb-P8a6.mjs";
-import { t } from "i18next";
 import { Link as Link$1 } from "gatsby";
+import { u as usePrimaryColors } from "./index-xuSxvz5z.mjs";
+import { t } from "i18next";
 import Markdown from "react-markdown";
 const ONE_LINE_HEIGHT = 24;
 const Bio = ({ content, maxLines = 1 }) => {
@@ -117,14 +117,14 @@ const AuthorCard = ({ author, ...boxProps }) => {
     )
   ] });
 };
-const BonusCardContent = ({ content }) => {
+const BonusCardContent = ({ content, buttonColor }) => {
   const { t: t2 } = useTranslation("author");
   return /* @__PURE__ */ jsx(Popover, { autoFocus: false, isLazy: true, lazyBehavior: "keepMounted", children: ({ isOpen }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "link", color: "white", children: isOpen ? t2("action.collapse") : t2("action.expand") }) }),
+    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "link", color: buttonColor, children: isOpen ? t2("action.collapse") : t2("action.expand") }) }),
     /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(PopoverBody, { children: Array.isArray(content) ? /* @__PURE__ */ jsx(Stack, { children: content.map((paragraph, index) => /* @__PURE__ */ jsx(Text, { as: "span", children: paragraph }, index)) }) : /* @__PURE__ */ jsx(Text, { children: content }) }) }) })
   ] }) });
 };
-const BonusCardTitle = ({ content }) => {
+const BonusCardTitle = ({ content, color, textColor }) => {
   return /* @__PURE__ */ jsx(
     Text,
     {
@@ -133,22 +133,33 @@ const BonusCardTitle = ({ content }) => {
       py: 1,
       px: 2,
       borderRadius: "md",
-      bg: "yellow",
-      color: "black",
+      bg: color,
+      fontSize: "md",
       fontWeight: "bold",
-      fontSize: "lg",
+      color: textColor,
       children: content
     }
   );
 };
-const BonusCard = ({ title, subtitle, content, link, image, className }) => {
+const BonusCard = ({
+  title,
+  subtitle,
+  content,
+  link,
+  image,
+  color = "linear-gradient(90deg, #3b1f47, #731d58)",
+  textColor = "whiteAlpha.900",
+  titleColor = "yellow",
+  titleTextColor = "black",
+  className
+}) => {
   return /* @__PURE__ */ jsxs(
     Card,
     {
       as: "article",
       h: "full",
-      color: "whiteAlpha.900",
-      bg: "linear-gradient(90deg, #3b1f47, #731d58)",
+      color: textColor,
+      bg: color,
       _before: image ? {
         content: '""',
         position: "absolute",
@@ -165,15 +176,23 @@ const BonusCard = ({ title, subtitle, content, link, image, className }) => {
       className,
       children: [
         /* @__PURE__ */ jsxs(CardBody, { as: "section", pb: 0, flex: 1, children: [
-          /* @__PURE__ */ jsx(BonusCardTitle, { content: title }),
+          /* @__PURE__ */ jsx(BonusCardTitle, { content: title, color: titleColor, textColor: titleTextColor }),
           /* @__PURE__ */ jsx(Text, { fontSize: "2xl", fontWeight: "bold", my: 2, children: subtitle }),
-          /* @__PURE__ */ jsx(BonusCardContent, { content })
+          /* @__PURE__ */ jsx(BonusCardContent, { content, buttonColor: textColor })
         ] }),
         /* @__PURE__ */ jsx(CardFooter, { as: "footer", p: 4, children: /* @__PURE__ */ jsx(LinkButton, { ...link, width: "full" }) })
       ]
     }
   );
 };
+const BonusCardGrid = ({
+  items,
+  columns = { base: 1, md: 2, lg: 3 },
+  gap = 4,
+  ...boxProps
+}) => {
+  return /* @__PURE__ */ jsx(Grid, { items, columns, gap, render: (item) => /* @__PURE__ */ jsx(BonusCard, { ...item }), ...boxProps });
+};
 const ContactForm = ({ ...boxProps }) => {
   const toast = useToast();
   const { t: t2 } = useTranslation("contactForm");
@@ -266,13 +285,18 @@ const FeatureCard = ({ title, description }) => {
     /* @__PURE__ */ jsx(CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray.500", children: description }) })
   ] });
 };
-const Features = ({ features, ...boxProps }) => {
+const FeatureCardGrid = ({
+  items,
+  columns = { base: 1, md: 2, lg: 3 },
+  gap = 4,
+  ...boxProps
+}) => {
   return /* @__PURE__ */ jsx(
     Grid,
     {
-      items: features,
-      columns: { base: 1, md: 2, lg: 3 },
-      gap: 10,
+      items,
+      columns,
+      gap,
       getKey: ({ title }) => title,
       render: (item) => /* @__PURE__ */ jsx(FeatureCard, { ...item }),
       ...boxProps
@@ -302,6 +326,30 @@ const GameCard = ({ name, description, image, link, height = "auto" }) => {
     }
   );
 };
+const GameCardGrid = ({
+  items,
+  columns = { base: 1, md: 2, lg: 3 },
+  gap = 4,
+  cardHeight = "full",
+  order = "default",
+  randomSeed,
+  ...boxProps
+}) => {
+  let sortedItems = items;
+  if (order === "random") {
+    sortedItems = [...items].sort(randomSeed ? getSeedRandomComparator(randomSeed) : randomComparator);
+  }
+  return /* @__PURE__ */ jsx(
+    Grid,
+    {
+      items: sortedItems,
+      columns,
+      gap,
+      render: (item) => /* @__PURE__ */ jsx(GameCard, { ...item, height: cardHeight }),
+      ...boxProps
+    }
+  );
+};
 const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscreen }) => {
   const { t: t2 } = useTranslation("gameDemo");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -912,10 +960,6 @@ const ProsCons = ({ items, ...boxProps }) => {
     /* @__PURE__ */ jsx(ProsConsCard, { itemType: "cons", items: cons })
   ] });
 };
-const RichTextRenderer = ({ content }) => {
-  const components = useMDXComponents();
-  return /* @__PURE__ */ jsx(Markdown, { components, children: content });
-};
 function replacePlaceholders(text, placeholders) {
   Object.entries(placeholders).forEach(([placeholder, replacement]) => {
     const regex = new RegExp(`{{${placeholder}}}`, "g");
@@ -972,21 +1016,6 @@ const Table = ({
     }
   );
 };
-const Tabs = ({ items, render, ...boxProps }) => {
-  const { tabs, panels } = useMemo(() => {
-    const tabs2 = [];
-    const panels2 = [];
-    items.forEach(({ content, ...tab }) => {
-      tabs2.push(tab);
-      panels2.push(content);
-    });
-    return { tabs: tabs2, panels: panels2 };
-  }, []);
-  return /* @__PURE__ */ jsxs(Tabs$1, { overflow: "hidden", colorScheme: "brand", ...boxProps, children: [
-    /* @__PURE__ */ jsx(TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index) => /* @__PURE__ */ jsx(Tab, { children: /* @__PURE__ */ jsx(Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index)) }),
-    /* @__PURE__ */ jsx(TabPanels, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(TabPanel, { children: render ? render(panel) : panel }, index)) })
-  ] });
-};
 const Tip = ({ tip, author = null, ...boxProps }) => {
   return /* @__PURE__ */ jsxs(
     Card,
@@ -1012,6 +1041,128 @@ const Tip = ({ tip, author = null, ...boxProps }) => {
     }
   );
 };
+const ExternalImage = ({ image, component: ImageComponent, alt = "", ...imageProps }) => {
+  var _a, _b;
+  const imageData = (_b = (_a = image == null ? void 0 : image.localFile) == null ? void 0 : _a.childImageSharp) == null ? void 0 : _b.gatsbyImageData;
+  return imageData ? /* @__PURE__ */ jsx(ImageComponent, { image: imageData, alt, ...imageProps }) : /* @__PURE__ */ jsx(Fragment, {});
+};
+const RichText = ({ content }) => {
+  const components = useMDXComponents();
+  return /* @__PURE__ */ jsx(Markdown, { components, children: content });
+};
+function extractItemsFromJson(content) {
+  return content.strapi_json_value;
+}
+const StrapiComponent = ({ type, props, imageComponent }) => {
+  switch (type) {
+    case "STRAPI__COMPONENT_CONTENT_FAQ":
+      return /* @__PURE__ */ jsx(Faq, { items: props.items, mb: 4 });
+    case "STRAPI__COMPONENT_CONTENT_FEATURES":
+      return /* @__PURE__ */ jsx(FeatureCardGrid, { items: props.items, mb: 4 });
+    case "STRAPI__COMPONENT_CONTENT_GAME_DEMO":
+      return /* @__PURE__ */ jsx(
+        GameDemo,
+        {
+          name: props.name,
+          src: props.src,
+          previewImage: /* @__PURE__ */ jsx(ExternalImage, { image: props.previewImage, alt: props.name, component: imageComponent }),
+          mb: 4
+        }
+      );
+    case "STRAPI__COMPONENT_CONTENT_GAME_INFO":
+      return /* @__PURE__ */ jsx(GameInfo, { info: { ...props } });
+    case "STRAPI__COMPONENT_CONTENT_HOW_TO":
+      return /* @__PURE__ */ jsx(
+        HowTo,
+        {
+          steps: props.steps.map((step) => {
+            return {
+              ...step,
+              thumbnail: /* @__PURE__ */ jsx(ExternalImage, { image: step.thumbnail, alt: step.title, component: imageComponent })
+            };
+          }),
+          mb: 4
+        }
+      );
+    case "STRAPI__COMPONENT_CONTENT_LIST":
+      return /* @__PURE__ */ jsx(List, { bullet: props.bullet, items: extractItemsFromJson(props.content) });
+    case "STRAPI__COMPONENT_CONTENT_MEDIA":
+      return /* @__PURE__ */ jsx(
+        ExternalImage,
+        {
+          component: imageComponent,
+          image: props.file,
+          alt: props.alternativeText,
+          style: { display: "inline-block", marginBottom: 16 }
+        }
+      );
+    case "STRAPI__COMPONENT_CONTENT_PROS_CONS":
+      return /* @__PURE__ */ jsx(ProsCons, { items: { ...props }, mb: 4 });
+    case "STRAPI__COMPONENT_CONTENT_RICH_TEXT":
+      return /* @__PURE__ */ jsx(RichText, { content: props.content.data.content });
+    case "STRAPI__COMPONENT_CONTENT_TABLE":
+      return /* @__PURE__ */ jsx(
+        Table,
+        {
+          columnNumber: props.columnNumber,
+          items: extractItemsFromJson(props.content),
+          caption: props.caption,
+          bordered: props.bordered,
+          scrollable: props.scrollable,
+          striped: props.striped,
+          mb: 4
+        }
+      );
+    case "STRAPI__COMPONENT_CONTENT_TIP":
+      return /* @__PURE__ */ jsx(
+        Tip,
+        {
+          tip: props.tip,
+          author: props.author ? {
+            ...props.author,
+            avatar: /* @__PURE__ */ jsx(
+              ExternalImage,
+              {
+                component: imageComponent,
+                image: props.author.avatar,
+                alt: props.author.name,
+                style: { borderRadius: "50%" }
+              }
+            )
+          } : null,
+          mb: 4
+        }
+      );
+    default:
+      return null;
+  }
+};
+function isStrapiContent(array) {
+  return Array.isArray(array) && array.every(
+    (item) => typeof item === "object" && item !== null && "__typename" in item && typeof item.__typename === "string"
+  );
+}
+const StrapiContentRenderer = ({ content, imageComponent }) => {
+  if (!isStrapiContent(content)) {
+    return null;
+  }
+  return content.map(({ __typename: type, ...props }, index) => /* @__PURE__ */ jsx(StrapiComponent, { type, props, imageComponent }, index));
+};
+const Tabs = ({ items, render, ...boxProps }) => {
+  const { tabs, panels } = useMemo(() => {
+    const tabs2 = [];
+    const panels2 = [];
+    items.forEach(({ content, ...tab }) => {
+      tabs2.push(tab);
+      panels2.push(content);
+    });
+    return { tabs: tabs2, panels: panels2 };
+  }, []);
+  return /* @__PURE__ */ jsxs(Tabs$1, { overflow: "hidden", colorScheme: "brand", ...boxProps, children: [
+    /* @__PURE__ */ jsx(TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index) => /* @__PURE__ */ jsx(Tab, { children: /* @__PURE__ */ jsx(Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index)) }),
+    /* @__PURE__ */ jsx(TabPanels, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(TabPanel, { children: render ? render(panel) : panel }, index)) })
+  ] });
+};
 export {
   AuthorCard as A,
   BonusCard as B,
@@ -1022,19 +1173,21 @@ export {
   Layout as L,
   NotFound as N,
   ProsCons as P,
-  RichTextRenderer as R,
   Seo as S,
   Table as T,
-  FeatureCard as a,
-  Features as b,
-  GameDemo as c,
-  GameInfo as d,
-  List as e,
-  Tabs as f,
-  Tip as g,
-  Author as h,
-  Center as i,
-  Grid as j,
-  LinkButton as k,
-  PulseButton as l
+  BonusCardGrid as a,
+  FeatureCard as b,
+  FeatureCardGrid as c,
+  GameCardGrid as d,
+  GameDemo as e,
+  GameInfo as f,
+  List as g,
+  StrapiContentRenderer as h,
+  Tabs as i,
+  Tip as j,
+  Author as k,
+  Center as l,
+  Grid as m,
+  LinkButton as n,
+  PulseButton as o
 };

package/dist/index.cjs

@@ -1,22 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-eta4hdHD.js");
+const index = require("./index-BmkMQFW1.js");
 const index$1 = require("./index-IpSV-c71.js");
 const i18n$1 = require("./index-Biz1dDqA.js");
 const index$2 = require("./index-d3V0A4lN.js");
 const index$3 = require("./index-BhsXlbd8.js");
-const index$4 = require("./index-Cte2-g6s.js");
+const index$4 = require("./index-Bw7vqsyw.js");
 const index$5 = require("./index-NsIHOkeN.js");
 const i18n = require("i18next");
 exports.Author = index.Author;
 exports.AuthorCard = index.AuthorCard;
 exports.BonusCard = index.BonusCard;
+exports.BonusCardGrid = index.BonusCardGrid;
 exports.Center = index.Center;
 exports.ContactForm = index.ContactForm;
 exports.Faq = index.Faq;
 exports.FeatureCard = index.FeatureCard;
-exports.Features = index.Features;
+exports.FeatureCardGrid = index.FeatureCardGrid;
 exports.GameCard = index.GameCard;
+exports.GameCardGrid = index.GameCardGrid;
 exports.GameDemo = index.GameDemo;
 exports.GameInfo = index.GameInfo;
 exports.Grid = index.Grid;
@@ -27,8 +29,8 @@ exports.List = index.List;
 exports.NotFound = index.NotFound;
 exports.ProsCons = index.ProsCons;
 exports.PulseButton = index.PulseButton;
-exports.RichTextRenderer = index.RichTextRenderer;
 exports.Seo = index.Seo;
+exports.StrapiContentRenderer = index.StrapiContentRenderer;
 exports.Table = index.Table;
 exports.Tabs = index.Tabs;
 exports.Tip = index.Tip;
@@ -45,7 +47,9 @@ exports.formatNumber = index$4.formatNumber;
 exports.getCurrencySymbol = index$4.getCurrencySymbol;
 exports.getCurrentMonth = index$4.getCurrentMonth;
 exports.getCurrentYear = index$4.getCurrentYear;
+exports.getSeedRandomComparator = index$4.getSeedRandomComparator;
 exports.parseNumber = index$4.parseNumber;
+exports.randomComparator = index$4.randomComparator;
 exports.round = index$4.round;
 exports.toFixedTwo = index$4.toFixedTwo;
 exports.extractTheme = index$5.extractTheme;

package/dist/index.mjs

@@ -1,50 +1,54 @@
-import { h, A, B, i, C, F, a, b, G, c, d, j, H, L, k, e, N, P, l, R, S, T, f, g } from "./index-Cin-9-As.mjs";
+import { k, A, B, a, l, C, F, b, c, G, d, e, f, m, H, L, n, g, N, P, o, S, h, T, i, j } from "./index-DbwY2gVh.mjs";
 import { u } from "./index-xuSxvz5z.mjs";
 import { a as a2, G as G2, r } from "./index-DoBCANwf.mjs";
 import { M } from "./index-Bx3B21Dh.mjs";
 import { S as S2, u as u2 } from "./index-BNb-P8a6.mjs";
-import { A as A2, f as f2, b as b2, c as c2, a as a3, g as g2, p, r as r2, t } from "./index-25M8hPOF.mjs";
-import { e as e2, g as g3, t as t2 } from "./index-DzEvPZny.mjs";
+import { A as A2, f as f2, b as b2, c as c2, a as a3, g as g2, e as e2, p, d as d2, r as r2, t } from "./index-DLy2LYCD.mjs";
+import { e as e3, g as g3, t as t2 } from "./index-DzEvPZny.mjs";
 import { default as default2 } from "i18next";
 export {
   A2 as Animation,
-  h as Author,
+  k as Author,
   A as AuthorCard,
   B as BonusCard,
-  i as Center,
+  a as BonusCardGrid,
+  l as Center,
   C as ContactForm,
   F as Faq,
-  a as FeatureCard,
-  b as Features,
+  b as FeatureCard,
+  c as FeatureCardGrid,
   G as GameCard,
+  d as GameCardGrid,
   a2 as GameCharacteristic,
-  c as GameDemo,
-  d as GameInfo,
+  e as GameDemo,
+  f as GameInfo,
   G2 as GameVolatility,
-  j as Grid,
+  m as Grid,
   H as HowTo,
   L as Layout,
-  k as LinkButton,
-  e as List,
+  n as LinkButton,
+  g as List,
   M as MdxProvider,
   N as NotFound,
   P as ProsCons,
-  l as PulseButton,
-  R as RichTextRenderer,
+  o as PulseButton,
   S as Seo,
   S2 as SiteProvider,
+  h as StrapiContentRenderer,
   T as Table,
-  f as Tabs,
-  g as Tip,
-  e2 as extractTheme,
+  i as Tabs,
+  j as Tip,
+  e3 as extractTheme,
   f2 as formatDate,
   b2 as formatNumber,
   g3 as generateColorPalette,
   c2 as getCurrencySymbol,
   a3 as getCurrentMonth,
   g2 as getCurrentYear,
+  e2 as getSeedRandomComparator,
   default2 as i18n,
   p as parseNumber,
+  d2 as randomComparator,
   r as resources,
   r2 as round,
   t as toFixedTwo,

package/dist/types/components/common/index.d.ts

@@ -1,8 +1,9 @@
 import { Key, ReactElement } from 'react';
-import { BoxProps } from '@chakra-ui/react';
+import { BoxProps, ColorProps } from '@chakra-ui/react';
 export type KeyGetter<T> = (item: T) => Key;
 export type RenderFunction<T> = (item: T) => ReactElement;
 type BoxPaddingProps = Pick<BoxProps, 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'ps' | 'pe'>;
 type BoxMarginProps = Pick<BoxProps, 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'ms' | 'me'>;
 export type BoxPositionProps = BoxMarginProps & BoxPaddingProps;
+export type Color = ColorProps['color'];
 export {};

package/dist/types/components/external-image/index.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { GatsbyImageProps, IGatsbyImageData } from 'gatsby-plugin-image';
+export { type IGatsbyImageData };
+export interface IGatsbyImageFile {
+    localFile?: {
+        childImageSharp?: {
+            gatsbyImageData?: unknown;
+        };
+    };
+}
+export type ExternalImageComponentProps<T> = Omit<GatsbyImageProps, 'image'> & {
+    image: T;
+};
+export type ExternalImageComponent = FC<ExternalImageComponentProps<IGatsbyImageData>>;

package/dist/types/components/game-card/index.d.ts

@@ -4,3 +4,4 @@ export interface IGameCard extends IGame {
     link?: ILink['url'];
     image?: string | ReactElement;
 }
+export type GameCardHeight = 'full' | 'auto';

package/dist/types/components/grid/index.d.ts

@@ -0,0 +1,3 @@
+import { ResponsiveObject } from '@chakra-ui/react';
+export type GridColumns = ResponsiveObject<number>;
+export type GridGap = ResponsiveObject<number> | number;

package/dist/types/components/index.d.ts

@@ -1,10 +1,13 @@
 export * from './bonus-card';
 export * from './common';
+export * from './external-image';
 export * from './faq';
 export * from './game-card';
 export * from './game-info';
+export * from './grid';
 export * from './how-to';
 export * from './image';
 export * from './navigation';
 export * from './pros-cons';
+export * from './strapi-component';
 export * from './tabs';

package/dist/types/components/strapi-component/index.d.ts

@@ -0,0 +1,5 @@
+export type StrapiComponentType = 'STRAPI__COMPONENT_CONTENT_FAQ' | 'STRAPI__COMPONENT_CONTENT_FEATURES' | 'STRAPI__COMPONENT_CONTENT_GAME_DEMO' | 'STRAPI__COMPONENT_CONTENT_GAME_INFO' | 'STRAPI__COMPONENT_CONTENT_HOW_TO' | 'STRAPI__COMPONENT_CONTENT_LIST' | 'STRAPI__COMPONENT_CONTENT_MEDIA' | 'STRAPI__COMPONENT_CONTENT_PROS_CONS' | 'STRAPI__COMPONENT_CONTENT_RICH_TEXT' | 'STRAPI__COMPONENT_CONTENT_TABLE' | 'STRAPI__COMPONENT_CONTENT_TIP';
+export interface IStrapiComponentFragment {
+    __typename: StrapiComponentType;
+    [prop: string]: unknown;
+}

package/dist/utils/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-Cte2-g6s.js");
+const index = require("../index-Bw7vqsyw.js");
 const index$1 = require("../index-NsIHOkeN.js");
 exports.Animation = index.Animation;
 exports.formatDate = index.formatDate;
@@ -8,7 +8,9 @@ exports.formatNumber = index.formatNumber;
 exports.getCurrencySymbol = index.getCurrencySymbol;
 exports.getCurrentMonth = index.getCurrentMonth;
 exports.getCurrentYear = index.getCurrentYear;
+exports.getSeedRandomComparator = index.getSeedRandomComparator;
 exports.parseNumber = index.parseNumber;
+exports.randomComparator = index.randomComparator;
 exports.round = index.round;
 exports.toFixedTwo = index.toFixedTwo;
 exports.extractTheme = index$1.extractTheme;

package/dist/utils/index.d.ts

@@ -2,4 +2,5 @@ export * from './animation';
 export * from './date';
 export * from './navigation';
 export * from './numbers';
+export * from './sorting';
 export * from './theme';

package/dist/utils/index.mjs

@@ -1,15 +1,17 @@
-import { A, f, b, c, a, g, p, r, t } from "../index-25M8hPOF.mjs";
-import { e, g as g2, t as t2 } from "../index-DzEvPZny.mjs";
+import { A, f, b, c, a, g, e, p, d, r, t } from "../index-DLy2LYCD.mjs";
+import { e as e2, g as g2, t as t2 } from "../index-DzEvPZny.mjs";
 export {
   A as Animation,
-  e as extractTheme,
+  e2 as extractTheme,
   f as formatDate,
   b as formatNumber,
   g2 as generateColorPalette,
   c as getCurrencySymbol,
   a as getCurrentMonth,
   g as getCurrentYear,
+  e as getSeedRandomComparator,
   p as parseNumber,
+  d as randomComparator,
   r as round,
   t as toFixedTwo,
   t2 as transformSiteNavigation

package/dist/utils/sorting/index.d.ts

@@ -0,0 +1,2 @@
+export declare function randomComparator(): number;
+export declare function getSeedRandomComparator(seed: number): () => number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@anywayseo/tools",
   "description": "Shared UI Components and Modules",
-  "version": "3.1.2",
+  "version": "4.0.0",
   "keywords": [
     "react",
     "ui",
@@ -97,6 +97,7 @@
     "@mdx-js/react": "^2.0.0",
     "framer-motion": "^12.0.6",
     "gatsby": "^5.0.0",
+    "gatsby-plugin-image": "^3.14.0",
     "i18next": "^24.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/dist/components/base/grid/types.d.ts

@@ -1,3 +0,0 @@
-import { ResponsiveObject } from '@chakra-ui/react';
-export type ColumnsConfig = ResponsiveObject<number>;
-export type SpacingConfig = ResponsiveObject<number> | number;

package/dist/components/features/index.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import { BoxPositionProps, IFeature } from '../../types';
-type FeaturesProps = {
-    features: IFeature[];
-} & BoxPositionProps;
-declare const Features: FC<FeaturesProps>;
-export default Features;

package/dist/components/rich-text-renderer/index.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-type RichTextRendererProps = {
-    content: string;
-};
-declare const RichTextRenderer: FC<RichTextRendererProps>;
-export default RichTextRenderer;