@anywayseo/tools 5.2.0 → 5.3.0

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ImageType } from '../../../types';
+import { ImageProps as ChakraImageProps } from '@chakra-ui/react';
+type ImageProps = Omit<ChakraImageProps, 'src'> & {
+    src?: ImageType;
+    mode?: 'thumbnail' | 'default';
+    hasZoom?: boolean;
+};
+declare const Image: FC<ImageProps>;
+export default Image;

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

@@ -1,5 +1,6 @@
 export { default as Author } from './author';
 export { default as Center } from './center';
 export { default as Grid } from './grid';
+export { default as Image } from './image';
 export { default as Link } from './link';
 export { default as LinkButton } from './link-button';

package/dist/components/game-demo/preview/index.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { Image as TImage, ImageFit } from '../../../types';
+import { ImageType, ImageFit } from '../../../types';
 type GameDemoPreviewProps = {
-    image: TImage;
+    image: ImageType;
     alt: string;
     href?: string;
     imageFit?: ImageFit;

package/dist/components/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-bNvgXBvA.js");
-const index$1 = require("../index-Cn8RI_2O.js");
+const index = require("../index-BGMR4f6W.js");
+const index$1 = require("../index-BltrZp3R.js");
 exports.Author = index.Author;
 exports.AuthorCard = index.AuthorCard;
 exports.BonusCard = index.BonusCard;
@@ -27,4 +27,5 @@ exports.StrapiContentRenderer = index.StrapiContentRenderer;
 exports.Table = index.Table;
 exports.Tabs = index.Tabs;
 exports.Tip = index.Tip;
+exports.Image = index$1.Image;
 exports.Link = index$1.Link;

package/dist/components/index.mjs

@@ -1,5 +1,5 @@
-import { k, A, B, a, l, C, F, b, c, G, d, e, f, m, H, L, n, g, N, P, S, h, T, i, j } from "../index-CtmxlomQ.mjs";
-import { L as L2 } from "../index-DA6TBpuE.mjs";
+import { k, A, B, a, l, C, F, b, c, G, d, e, f, m, H, L, n, g, N, P, S, h, T, i, j } from "../index-CjaAcLJf.mjs";
+import { I, L as L2 } from "../index-Bwlxdh5F.mjs";
 export {
   k as Author,
   A as AuthorCard,
@@ -16,6 +16,7 @@ export {
   f as GameInfo,
   m as Grid,
   H as HowTo,
+  I as Image,
   L as Layout,
   L2 as Link,
   n as LinkButton,

package/dist/{index-bNvgXBvA.js → index-BGMR4f6W.js}

@@ -2,7 +2,8 @@
 const jsxRuntime = require("react/jsx-runtime");
 const react$1 = require("@chakra-ui/react");
 const reactI18next = require("react-i18next");
-const index = require("./index-Cn8RI_2O.js");
+require("react-medium-image-zoom");
+const index = require("./index-BltrZp3R.js");
 const react = require("react");
 const index$3 = require("./index-C6MG_f24.js");
 const index$5 = require("./index-CJVr79Z2.js");
@@ -39,22 +40,20 @@ const Bio = ({ content, maxLines = 1 }) => {
 };
 const Author = ({ author, variant }) => {
   const { name, role, bio, avatar } = author;
-  const imageComponent = typeof avatar === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: avatar, alt: name, rounded: "full" }) : avatar;
   if (variant === "short") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "article", align: "center", gap: 4, children: [
-      !!imageComponent && /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: 12, h: 12, children: imageComponent }),
+    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(jsxRuntime.Fragment, { children: [
-    !!imageComponent && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { grow: 1, maxW: { base: 48, sm: 32 }, children: imageComponent }),
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { w: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { children: [
+  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: [
-        name,
-        ", ",
+        `${name}, `,
         /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", color: "gray.500", children: role })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Bio, { content: bio })
@@ -116,16 +115,7 @@ 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,
-      {
-        display: "flex",
-        flexDirection: { base: "column", sm: "row" },
-        alignItems: { base: "center", sm: "flex-start" },
-        gap: 4,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Author, { author, variant: "full" })
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { children: /* @__PURE__ */ jsxRuntime.jsx(Author, { author, variant: "full" }) })
   ] });
 };
 const BonusCardContent = ({ content, buttonColor }) => {
@@ -338,7 +328,7 @@ const GameCard = ({ name, description, image, href, height = "auto" }) => {
       height,
       _hover: { transform: "scale(1.05)" },
       children: [
-        typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: image, alt: name, w: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" }) : !!image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: "100%", aspectRatio: "16/9", children: image }),
+        /* @__PURE__ */ jsxRuntime.jsx(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: href ? /* @__PURE__ */ jsxRuntime.jsx(react$1.LinkOverlay, { href, children: name }) : name }),
           !!description && /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "sm", color: "gray.600", children: description })
@@ -430,9 +420,8 @@ const GameDemoContent = ({
 };
 const GameDemoPreview = ({ image, alt, href, imageFit = "contain", onPlayDemo }) => {
   const { t } = reactI18next.useTranslation("gameDemo");
-  const imageComponent = typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: image, alt, objectFit: imageFit, w: "100%", h: "100%" }) : image;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    imageComponent,
+    /* @__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(
         LinkButton,
@@ -596,14 +585,14 @@ const GameInfo = ({ info, currencies }) => {
 };
 const HowTo = ({ steps, ...boxProps }) => {
   const { bgColor, invertedColor } = index$1.usePrimaryColors();
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description, thumbnail }, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Circle, { size: 12, bgColor, color: invertedColor, fontSize: "lg", fontWeight: "bold", children: String(index2 + 1) }),
+  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 }),
-      typeof thumbnail === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: thumbnail, alt: title, aspectRatio: "16/9", objectFit: "cover" }) : thumbnail,
+      /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: thumbnail, alt: title, mode: "thumbnail", hasZoom: true }),
       /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: description })
     ] })
-  ] }, index2)) });
+  ] }, index$12)) });
 };
 const Container = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react$1.Container, { maxW: "container.xl", children });
@@ -614,7 +603,7 @@ const Content = ({ children }) => {
 const Logo = () => {
   const { metadata } = index.useSiteContext();
   const { logo } = metadata;
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { display: "flex", h: { base: 10, md: 14 }, overflow: "hidden", children: typeof logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: logo, alt: "Logo", objectFit: "contain" }) : logo });
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { display: "flex", h: { base: 10, md: 14 }, overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(index.Image, { src: logo, alt: "Logo", objectFit: "contain" }) });
 };
 const Brand$1 = ({ brand }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { position: "relative", my: 2, py: 8, children: [
@@ -1081,7 +1070,7 @@ const Layout = ({ children }) => {
   ] });
 };
 const List = ({ items, bullet = "—", render, ...boxProps }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { pl: 0, ml: 2, mb: 4, ...boxProps, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { display: "flex", gap: 1, children: [
+  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 }),
     render ? render(item) : item
   ] }, index2)) });
@@ -1249,7 +1238,7 @@ 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, {});
+  return imageData ? /* @__PURE__ */ jsxRuntime.jsx(ImageComponent, { image: imageData, alt, ...imageProps }) : null;
 };
 const RichText = ({ content }) => {
   const components = react$2.useMDXComponents();
@@ -1303,15 +1292,14 @@ const StrapiComponent = ({ type, props, imageComponent }) => {
         }
       );
     case "STRAPI__COMPONENT_CONTENT_LIST":
-      return /* @__PURE__ */ jsxRuntime.jsx(List, { bullet: props.bullet, items: extractItemsFromJson(props.content) });
+      return /* @__PURE__ */ jsxRuntime.jsx(List, { bullet: props.bullet, items: extractItemsFromJson(props.content), mb: 4 });
     case "STRAPI__COMPONENT_CONTENT_MEDIA":
       return /* @__PURE__ */ jsxRuntime.jsx(
-        ExternalImage,
+        index.Image,
         {
-          component: imageComponent,
-          image: props.file,
-          alt: props.alternativeText,
-          style: { display: "inline-block", marginBottom: 16 }
+          src: /* @__PURE__ */ jsxRuntime.jsx(ExternalImage, { component: imageComponent, image: props.file, alt: props.alternativeText }),
+          mb: 4,
+          hasZoom: true
         }
       );
     case "STRAPI__COMPONENT_CONTENT_PROS_CONS":

package/dist/{index-BFhrFJqB.js → index-BbxOP7UY.js}

@@ -2,12 +2,12 @@
 const jsxRuntime = require("react/jsx-runtime");
 const react$1 = require("@chakra-ui/react");
 const react = require("@mdx-js/react");
+const index = require("./index-BltrZp3R.js");
 require("react");
 require("react-i18next");
-const index$1 = require("./index-Cn8RI_2O.js");
 require("./index-C6MG_f24.js");
 require("./index-CJVr79Z2.js");
-const index = require("./index-At00w6EN.js");
+const index$1 = require("./index-At00w6EN.js");
 function omitProps(props, omittedKeys) {
   const result = { ...props };
   omittedKeys.forEach((key) => {
@@ -25,7 +25,7 @@ function renderLink({
   href,
   ...props
 }) {
-  return index.isRelativePath(href) ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Link, { as: index$1.Link, to: href, color: "brand.400", ...props }) : /* @__PURE__ */ jsxRuntime.jsx(
+  return index$1.isRelativePath(href) ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Link, { as: index.Link, to: href, color: "brand.400", ...props }) : /* @__PURE__ */ jsxRuntime.jsx(
     react$1.Link,
     {
       href,
@@ -37,6 +37,9 @@ function renderLink({
     }
   );
 }
+function renderImage(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Image, { ...props, mt: 4, mb: 4, hasZoom: true });
+}
 const components = {
   h1: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h1", size: "xl", mb: 4, ...props })),
   h2: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h2", size: "lg", mt: 6, mb: 4, ...props })),
@@ -44,7 +47,8 @@ const components = {
   ol: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.OrderedList, { mb: 4, ...props })),
   ul: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.UnorderedList, { mb: 4, ...props })),
   p: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { mb: 4, ...props })),
-  a: preprocessProps((props) => renderLink(props))
+  a: preprocessProps((props) => renderLink(props)),
+  img: preprocessProps((props) => renderImage(props))
 };
 const MdxProvider = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.MDXProvider, { components, children });

package/dist/{index-Cn8RI_2O.js → index-BltrZp3R.js}

@@ -1,35 +1,57 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const react = require("@chakra-ui/react");
+const Zoom = require("react-medium-image-zoom");
+const react$1 = require("react");
 const gatsby = require("gatsby");
-require("@chakra-ui/react");
 require("@mdx-js/react");
 require("react-i18next");
 require("./index-C6MG_f24.js");
 require("./index-CJVr79Z2.js");
 const index = require("./index-WFgDSB1A.js");
 const index$1 = require("./index-At00w6EN.js");
-const SiteContext = react.createContext(null);
+const Image = ({ src, mode = "default", hasZoom, ...plainImageProps }) => {
+  if (!src) {
+    return null;
+  }
+  let image;
+  if (typeof src === "string") {
+    image = /* @__PURE__ */ jsxRuntime.jsx(
+      react.Image,
+      {
+        src,
+        ...mode === "thumbnail" && { aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" },
+        ...plainImageProps
+      }
+    );
+  } else if (src.props.image) {
+    image = mode === "thumbnail" ? /* @__PURE__ */ jsxRuntime.jsx(react.Box, { aspectRatio: "16/9", children: src }) : src;
+  } else {
+    return null;
+  }
+  return hasZoom ? /* @__PURE__ */ jsxRuntime.jsx(Zoom, { wrapElement: "span", zoomMargin: 40, children: image }) : image;
+};
+const SiteContext = react$1.createContext(null);
 const SiteProvider = ({ children, ...context }) => {
-  const value = react.useMemo(() => context, []);
+  const value = react$1.useMemo(() => context, []);
   return /* @__PURE__ */ jsxRuntime.jsx(SiteContext.Provider, { value, children });
 };
 function useSiteContext() {
-  const context = react.useContext(SiteContext);
+  const context = react$1.useContext(SiteContext);
   if (!context) {
     throw new Error("useSiteContext must be used within SiteProvider");
   }
   return context;
 }
-const PageContext = react.createContext(null);
+const PageContext = react$1.createContext(null);
 const PageProvider = ({ children, location }) => {
   const { localization } = useSiteContext();
   const { currentLocale } = index.useLocalization({ location, ...localization });
-  const value = react.useMemo(() => ({ currentLocale }), [currentLocale]);
+  const value = react$1.useMemo(() => ({ currentLocale }), [currentLocale]);
   return /* @__PURE__ */ jsxRuntime.jsx(PageContext.Provider, { value, children });
 };
 function usePageContext() {
-  const context = react.useContext(PageContext);
+  const context = react$1.useContext(PageContext);
   if (!context) {
     throw new Error("usePageContext must be used within PageProvider");
   }
@@ -49,13 +71,14 @@ function getLocalizedPath(path, currentLocaleCode, defaultLocaleCode) {
   }
   return `${localePrefix}${normalizePath(path)}`;
 }
-const Link = react.forwardRef(({ to, ...props }, ref) => {
+const Link = react$1.forwardRef(({ to, ...props }, ref) => {
   const { localization } = useSiteContext();
   const { currentLocale } = usePageContext();
   const defaultLocale = localization.defaultLocale;
   const path = getLocalizedPath(to, currentLocale.code, defaultLocale.code);
   return /* @__PURE__ */ jsxRuntime.jsx(gatsby.Link, { ref, to: path, ...props });
 });
+exports.Image = Image;
 exports.Link = Link;
 exports.PageProvider = PageProvider;
 exports.SiteProvider = SiteProvider;

package/dist/{index-DA6TBpuE.mjs → index-Bwlxdh5F.mjs}

@@ -1,13 +1,35 @@
 import { jsx } from "react/jsx-runtime";
+import { Image as Image$1, Box } from "@chakra-ui/react";
+import Zoom from "react-medium-image-zoom";
 import { createContext, useContext, useMemo, forwardRef } from "react";
 import { Link as Link$1 } from "gatsby";
-import "@chakra-ui/react";
 import "@mdx-js/react";
 import "react-i18next";
 import "./index-BJRvnR8Q.mjs";
 import "./index-Bts2DBYS.mjs";
 import { u as useLocalization } from "./index-BzbpMLDD.mjs";
 import { i as isRelativePath } from "./index-BmaWfWLV.mjs";
+const Image = ({ src, mode = "default", hasZoom, ...plainImageProps }) => {
+  if (!src) {
+    return null;
+  }
+  let image;
+  if (typeof src === "string") {
+    image = /* @__PURE__ */ jsx(
+      Image$1,
+      {
+        src,
+        ...mode === "thumbnail" && { aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" },
+        ...plainImageProps
+      }
+    );
+  } else if (src.props.image) {
+    image = mode === "thumbnail" ? /* @__PURE__ */ jsx(Box, { aspectRatio: "16/9", children: src }) : src;
+  } else {
+    return null;
+  }
+  return hasZoom ? /* @__PURE__ */ jsx(Zoom, { wrapElement: "span", zoomMargin: 40, children: image }) : image;
+};
 const SiteContext = createContext(null);
 const SiteProvider = ({ children, ...context }) => {
   const value = useMemo(() => context, []);
@@ -56,6 +78,7 @@ const Link = forwardRef(({ to, ...props }, ref) => {
   return /* @__PURE__ */ jsx(Link$1, { ref, to: path, ...props });
 });
 export {
+  Image as I,
   Link as L,
   PageProvider as P,
   SiteProvider as S,

package/dist/{index-BJQgELmZ.mjs → index-C4sJXfkN.mjs}

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Text, UnorderedList, OrderedList, Heading, Link } from "@chakra-ui/react";
 import { MDXProvider } from "@mdx-js/react";
+import { I as Image, L as Link$1 } from "./index-Bwlxdh5F.mjs";
 import "react";
 import "react-i18next";
-import { L as Link$1 } from "./index-DA6TBpuE.mjs";
 import "./index-BJRvnR8Q.mjs";
 import "./index-Bts2DBYS.mjs";
 import { i as isRelativePath } from "./index-BmaWfWLV.mjs";
@@ -36,6 +36,9 @@ function renderLink({
     }
   );
 }
+function renderImage(props) {
+  return /* @__PURE__ */ jsx(Image, { ...props, mt: 4, mb: 4, hasZoom: true });
+}
 const components = {
   h1: preprocessProps((props) => /* @__PURE__ */ jsx(Heading, { as: "h1", size: "xl", mb: 4, ...props })),
   h2: preprocessProps((props) => /* @__PURE__ */ jsx(Heading, { as: "h2", size: "lg", mt: 6, mb: 4, ...props })),
@@ -43,7 +46,8 @@ const components = {
   ol: preprocessProps((props) => /* @__PURE__ */ jsx(OrderedList, { mb: 4, ...props })),
   ul: preprocessProps((props) => /* @__PURE__ */ jsx(UnorderedList, { mb: 4, ...props })),
   p: preprocessProps((props) => /* @__PURE__ */ jsx(Text, { mb: 4, ...props })),
-  a: preprocessProps((props) => renderLink(props))
+  a: preprocessProps((props) => renderLink(props)),
+  img: preprocessProps((props) => renderImage(props))
 };
 const MdxProvider = ({ children }) => {
   return /* @__PURE__ */ jsx(MDXProvider, { components, children });

package/dist/{index-CtmxlomQ.mjs → index-CjaAcLJf.mjs}

@@ -1,7 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Box, Collapse, Text, Button, Flex, Stack, Image, Center as Center$1, SimpleGrid, Link as Link$1, 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, Menu, MenuButton, HStack, Icon, MenuList, MenuItem, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
+import { Box, Collapse, Text, Button, Flex, Stack, Center as Center$1, SimpleGrid, Link as Link$1, 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, Menu, MenuButton, HStack, Icon, MenuList, MenuItem, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
-import { a as useSiteContext, L as Link, u as usePageContext } from "./index-DA6TBpuE.mjs";
+import "react-medium-image-zoom";
+import { I as Image, a as useSiteContext, L as Link, u as usePageContext } from "./index-Bwlxdh5F.mjs";
 import { useRef, useState, useLayoutEffect, Fragment as Fragment$1, useMemo, forwardRef, useEffect } from "react";
 import { A as Animation } from "./index-BJRvnR8Q.mjs";
 import { a as GameCharacteristic } from "./index-Bts2DBYS.mjs";
@@ -38,22 +39,20 @@ const Bio = ({ content, maxLines = 1 }) => {
 };
 const Author = ({ author, variant }) => {
   const { name, role, bio, avatar } = author;
-  const imageComponent = typeof avatar === "string" ? /* @__PURE__ */ jsx(Image, { src: avatar, alt: name, rounded: "full" }) : avatar;
   if (variant === "short") {
-    return /* @__PURE__ */ jsxs(Flex, { as: "article", align: "center", gap: 4, children: [
-      !!imageComponent && /* @__PURE__ */ jsx(Box, { w: 12, h: 12, children: imageComponent }),
+    return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+      /* @__PURE__ */ jsx(Box, { w: 12, h: 12, children: /* @__PURE__ */ jsx(Image, { src: avatar, alt: name, rounded: "full" }) }),
       /* @__PURE__ */ jsxs(Box, { fontWeight: "semibold", children: [
         /* @__PURE__ */ jsx(Text, { children: name }),
         /* @__PURE__ */ jsx(Text, { color: "gray.500", children: role })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !!imageComponent && /* @__PURE__ */ jsx(Flex, { grow: 1, maxW: { base: 48, sm: 32 }, children: imageComponent }),
-    /* @__PURE__ */ jsx(Flex, { w: "100%", children: /* @__PURE__ */ jsxs(Stack, { children: [
+  return /* @__PURE__ */ jsxs(Flex, { direction: { base: "column", sm: "row" }, align: { base: "center", sm: "flex-start" }, gap: 4, children: [
+    /* @__PURE__ */ jsx(Flex, { flex: 1, maxW: { base: 48, sm: 32 }, children: /* @__PURE__ */ jsx(Image, { src: avatar, alt: name, rounded: "full" }) }),
+    /* @__PURE__ */ jsx(Flex, { flex: 1, children: /* @__PURE__ */ jsxs(Stack, { children: [
       /* @__PURE__ */ jsxs(Text, { fontSize: "lg", fontWeight: 600, children: [
-        name,
-        ", ",
+        `${name}, `,
         /* @__PURE__ */ jsx(Text, { as: "span", color: "gray.500", children: role })
       ] }),
       /* @__PURE__ */ jsx(Bio, { content: bio })
@@ -115,16 +114,7 @@ const AuthorCard = ({ author, ...boxProps }) => {
   const { t: t2 } = useTranslation("author");
   return /* @__PURE__ */ jsxs(Card, { as: "article", variant: "filled", ...boxProps, children: [
     /* @__PURE__ */ jsx(CardHeader, { pb: 0, children: /* @__PURE__ */ jsx(Heading, { size: "md", children: t2("title") }) }),
-    /* @__PURE__ */ jsx(
-      CardBody,
-      {
-        display: "flex",
-        flexDirection: { base: "column", sm: "row" },
-        alignItems: { base: "center", sm: "flex-start" },
-        gap: 4,
-        children: /* @__PURE__ */ jsx(Author, { author, variant: "full" })
-      }
-    )
+    /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(Author, { author, variant: "full" }) })
   ] });
 };
 const BonusCardContent = ({ content, buttonColor }) => {
@@ -337,7 +327,7 @@ const GameCard = ({ name, description, image, href, height = "auto" }) => {
       height,
       _hover: { transform: "scale(1.05)" },
       children: [
-        typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt: name, w: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" }) : !!image && /* @__PURE__ */ jsx(Box, { w: "100%", aspectRatio: "16/9", children: image }),
+        /* @__PURE__ */ jsx(Image, { src: image, alt: name, mode: "thumbnail" }),
         /* @__PURE__ */ jsxs(Box, { as: "section", rounded: "md", p: 4, children: [
           /* @__PURE__ */ jsx(Text, { as: "span", children: href ? /* @__PURE__ */ jsx(LinkOverlay, { href, children: name }) : name }),
           !!description && /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "gray.600", children: description })
@@ -429,9 +419,8 @@ const GameDemoContent = ({
 };
 const GameDemoPreview = ({ image, alt, href, imageFit = "contain", onPlayDemo }) => {
   const { t: t2 } = useTranslation("gameDemo");
-  const imageComponent = typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt, objectFit: imageFit, w: "100%", h: "100%" }) : image;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    imageComponent,
+    /* @__PURE__ */ jsx(Image, { src: image, alt, objectFit: imageFit, w: "100%", h: "100%" }),
     /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 4, children: [
       /* @__PURE__ */ jsx(
         LinkButton,
@@ -599,7 +588,7 @@ const HowTo = ({ steps, ...boxProps }) => {
     /* @__PURE__ */ jsx(Circle, { size: 12, bgColor, color: invertedColor, fontSize: "lg", fontWeight: "bold", children: String(index + 1) }),
     /* @__PURE__ */ jsxs(Stack, { flex: 1, children: [
       /* @__PURE__ */ jsx(Text, { fontSize: "lg", fontWeight: "bold", children: title }),
-      typeof thumbnail === "string" ? /* @__PURE__ */ jsx(Image, { src: thumbnail, alt: title, aspectRatio: "16/9", objectFit: "cover" }) : thumbnail,
+      /* @__PURE__ */ jsx(Image, { src: thumbnail, alt: title, mode: "thumbnail", hasZoom: true }),
       /* @__PURE__ */ jsx(Text, { children: description })
     ] })
   ] }, index)) });
@@ -613,7 +602,7 @@ const Content = ({ children }) => {
 const Logo = () => {
   const { metadata } = useSiteContext();
   const { logo } = metadata;
-  return /* @__PURE__ */ jsx(Box, { display: "flex", h: { base: 10, md: 14 }, overflow: "hidden", children: typeof logo === "string" ? /* @__PURE__ */ jsx(Image, { src: logo, alt: "Logo", objectFit: "contain" }) : logo });
+  return /* @__PURE__ */ jsx(Box, { display: "flex", h: { base: 10, md: 14 }, overflow: "hidden", children: /* @__PURE__ */ jsx(Image, { src: logo, alt: "Logo", objectFit: "contain" }) });
 };
 const Brand$1 = ({ brand }) => {
   return /* @__PURE__ */ jsxs(Box, { position: "relative", my: 2, py: 8, children: [
@@ -1080,7 +1069,7 @@ const Layout = ({ children }) => {
   ] });
 };
 const List = ({ items, bullet = "—", render, ...boxProps }) => {
-  return /* @__PURE__ */ jsx(List$1, { pl: 0, ml: 2, mb: 4, ...boxProps, children: items.map((item, index) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", gap: 1, children: [
+  return /* @__PURE__ */ jsx(List$1, { pl: 0, ml: 2, ...boxProps, children: items.map((item, index) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", gap: 1, children: [
     /* @__PURE__ */ jsx(Box, { children: bullet }),
     render ? render(item) : item
   ] }, index)) });
@@ -1248,7 +1237,7 @@ 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, {});
+  return imageData ? /* @__PURE__ */ jsx(ImageComponent, { image: imageData, alt, ...imageProps }) : null;
 };
 const RichText = ({ content }) => {
   const components = useMDXComponents();
@@ -1302,15 +1291,14 @@ const StrapiComponent = ({ type, props, imageComponent }) => {
         }
       );
     case "STRAPI__COMPONENT_CONTENT_LIST":
-      return /* @__PURE__ */ jsx(List, { bullet: props.bullet, items: extractItemsFromJson(props.content) });
+      return /* @__PURE__ */ jsx(List, { bullet: props.bullet, items: extractItemsFromJson(props.content), mb: 4 });
     case "STRAPI__COMPONENT_CONTENT_MEDIA":
       return /* @__PURE__ */ jsx(
-        ExternalImage,
+        Image,
         {
-          component: imageComponent,
-          image: props.file,
-          alt: props.alternativeText,
-          style: { display: "inline-block", marginBottom: 16 }
+          src: /* @__PURE__ */ jsx(ExternalImage, { component: imageComponent, image: props.file, alt: props.alternativeText }),
+          mb: 4,
+          hasZoom: true
         }
       );
     case "STRAPI__COMPONENT_CONTENT_PROS_CONS":

package/dist/index.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-bNvgXBvA.js");
-const index$1 = require("./index-Cn8RI_2O.js");
+const index = require("./index-BGMR4f6W.js");
+const index$1 = require("./index-BltrZp3R.js");
 const index$2 = require("./index-WFgDSB1A.js");
 const index$3 = require("./index-CAfBnNV6.js");
 const i18n = require("./i18n/index.cjs");
-const index$4 = require("./index-BFhrFJqB.js");
+const index$4 = require("./index-BbxOP7UY.js");
 const index$5 = require("./index-CJVr79Z2.js");
 const index$6 = require("./index-C6MG_f24.js");
 const index$7 = require("./index-CYr1ct1t.js");
@@ -37,6 +37,7 @@ exports.StrapiContentRenderer = index.StrapiContentRenderer;
 exports.Table = index.Table;
 exports.Tabs = index.Tabs;
 exports.Tip = index.Tip;
+exports.Image = index$1.Image;
 exports.Link = index$1.Link;
 exports.PageProvider = index$1.PageProvider;
 exports.SiteProvider = index$1.SiteProvider;

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { k, A, B, a, l, C, F, b, c, G, d, e, f, m, H, L, n, g, N, P, S, h, T, i, j } from "./index-CtmxlomQ.mjs";
-import { L as L2, P as P2, S as S2, u, a as a2 } from "./index-DA6TBpuE.mjs";
+import { k, A, B, a, l, C, F, b, c, G, d, e, f, m, H, L, n, g, N, P, S, h, T, i, j } from "./index-CjaAcLJf.mjs";
+import { I, L as L2, P as P2, S as S2, u, a as a2 } from "./index-Bwlxdh5F.mjs";
 import { u as u2 } from "./index-BzbpMLDD.mjs";
 import { u as u3 } from "./index-tj12BA6U.mjs";
 import { DEFAULT_LANGUAGE, resources } from "./i18n/index.mjs";
-import { M } from "./index-BJQgELmZ.mjs";
+import { M } from "./index-C4sJXfkN.mjs";
 import { a as a3, G as G2 } from "./index-Bts2DBYS.mjs";
 import { A as A2 } from "./index-BJRvnR8Q.mjs";
 import { b as b2, c as c2, g as g2, a as a4 } from "./index-cQqALZIW.mjs";
@@ -31,6 +31,7 @@ export {
   G2 as GameVolatility,
   m as Grid,
   H as HowTo,
+  I as Image,
   L3 as LIGHT_THEME_COLOR,
   L as Layout,
   L2 as Link,

package/dist/providers/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-BFhrFJqB.js");
-const index$1 = require("../index-Cn8RI_2O.js");
+const index = require("../index-BbxOP7UY.js");
+const index$1 = require("../index-BltrZp3R.js");
 exports.MdxProvider = index.MdxProvider;
 exports.PageProvider = index$1.PageProvider;
 exports.SiteProvider = index$1.SiteProvider;

package/dist/providers/index.mjs

@@ -1,5 +1,5 @@
-import { M } from "../index-BJQgELmZ.mjs";
-import { P, S, u, a } from "../index-DA6TBpuE.mjs";
+import { M } from "../index-C4sJXfkN.mjs";
+import { P, S, u, a } from "../index-Bwlxdh5F.mjs";
 export {
   M as MdxProvider,
   P as PageProvider,

package/dist/types/components/how-to/index.d.ts

@@ -1,6 +1,6 @@
-import { Image } from '../image';
+import { ImageType } from '../image';
 export interface IHowToStep {
     title: string;
     description?: string;
-    thumbnail?: Image;
+    thumbnail?: ImageType;
 }

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

@@ -1,6 +1,8 @@
 import { ReactElement } from 'react';
 import { ImageProps } from '@chakra-ui/react';
 export type ImageUrl = string;
-export type ImageComponent = ReactElement;
-export type Image = ImageUrl | ImageComponent;
+export type ImageComponent = ReactElement<{
+    image: unknown;
+}>;
+export type ImageType = ImageUrl | ImageComponent;
 export type ImageFit = ImageProps['objectFit'];

package/dist/types/content/author/index.d.ts

@@ -1,4 +1,4 @@
-import { Image } from '../../components';
+import { ImageType } from '../../components';
 type SocialNetwork = 'fb' | 'tw';
 type Phone = string;
 interface ISocialNetwork {
@@ -9,7 +9,7 @@ export interface IAuthor {
     name: string;
     role: string;
     bio: string;
-    avatar: Image;
+    avatar: ImageType;
     /** Planned */
     address?: string;
     phone?: Phone;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Image, INavigation } from '../components';
+import { ImageType, INavigation } from '../components';
 import { ISeo } from '../content';
 import { Currency, ILocale } from '../i18n';
 interface ISiteHeaderConfig {
@@ -30,8 +30,8 @@ export interface ISiteMetadata {
     name: string;
     lang: ILocale['code'];
     seo: ISeo;
-    logo: Image;
+    logo: ImageType;
     /** Planned */
-    favicon?: Image;
+    favicon?: ImageType;
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@anywayseo/tools",
   "description": "Shared UI Components and Modules",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "keywords": [
     "react",
     "ui",
@@ -102,6 +102,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.0",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "react-medium-image-zoom": "^5.3.0"
   }
 }