oraculo-ui 0.1.9 → 0.1.10

package/dist/{chunk-PXIOKT7L.mjs → chunk-VYYKDD5L.mjs}

@@ -1,31 +1,13 @@
 import {
   OraculoSeccionClubOlimpo_default
 } from "./chunk-2D7ZJMJV.mjs";
-import {
-  OraculoSeccionTopJuegos
-} from "./chunk-DKP3HTEP.mjs";
 import {
   OraculoSeccionCasinoEnVivo_default
 } from "./chunk-PVY5Z3JS.mjs";
 import {
-  OraculoSeccionCasino_default
-} from "./chunk-AFPCFXMZ.mjs";
-import {
-  OraculoSeccionVirtuales_default
-} from "./chunk-YY5T37WR.mjs";
-import {
-  ChevronLeftRounded_default,
-  ChevronRightRounded_default
-} from "./chunk-AIT7B2J3.mjs";
-import {
-  OraculoSectionTitle
-} from "./chunk-5GTDKE3I.mjs";
-import {
+  OraculoCarousel_default,
   OraculoSeccionBonoBienvenida_default
-} from "./chunk-WPLILXPP.mjs";
-import {
-  OraculoCarousel_default
-} from "./chunk-VHW77D2M.mjs";
+} from "./chunk-4LBAYKDQ.mjs";
 import {
   OraculoButton
 } from "./chunk-IJQLK4NO.mjs";
@@ -19748,15 +19730,749 @@ var require_src3 = __commonJS({
 });
 
 // src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
-import { useRef, useState as useState2 } from "react";
+import { useRef as useRef3, useState as useState4 } from "react";
+
+// ../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
+import { createSvgIcon } from "@mui/material/utils";
+
+// ../node_modules/@mui/icons-material/esm/ChevronLeftRounded.js
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChevronLeftRounded_default = createSvgIcon(/* @__PURE__ */ _jsx("path", {
+  d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41"
+}), "ChevronLeftRounded");
+
+// ../node_modules/@mui/icons-material/esm/ChevronRightRounded.js
+import { jsx as _jsx2 } from "react/jsx-runtime";
+var ChevronRightRounded_default = createSvgIcon(/* @__PURE__ */ _jsx2("path", {
+  d: "M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"
+}), "ChevronRightRounded");
+
+// src/atoms/OraculoSectionTitle/OraculoSectionTitle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function OraculoSectionTitle({
+  title,
+  iconUrl,
+  size = "md",
+  className = ""
+}) {
+  const sizeClass = size ? `orc-section-title--${size}` : "";
+  const wrapperClass = [
+    "orc-section-title",
+    sizeClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    iconUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: iconUrl,
+        alt: "",
+        className: "orc-section-title__icon"
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { className: "orc-section-title__title", children: title })
+  ] });
+}
+
+// src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
+import Box2 from "@mui/material/Box";
+
+// src/molecules/OraculoGameCard/OraculoGameCard.tsx
+import Box from "@mui/material/Box";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var OraculoGameCard = ({
+  imageUrl,
+  onClick,
+  size = "sm",
+  fillParent = false
+}) => {
+  const dim = size === "lg" ? { w: 280, h: 352 } : { w: 152, h: 168 };
+  const handleButtonClick = (e) => {
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick();
+  };
+  const sizeStyles = fillParent ? { width: "100%", height: "100%" } : { width: `${dim.w}px`, height: `${dim.h}px` };
+  return /* @__PURE__ */ jsxs2(
+    Box,
+    {
+      onClick,
+      role: "button",
+      sx: {
+        position: "relative",
+        borderRadius: "12px",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        transition: "transform .15s ease, box-shadow .15s ease",
+        ...sizeStyles,
+        "&:hover": {
+          transform: "translateY(-2px)",
+          boxShadow: 8,
+          cursor: "pointer"
+        },
+        "&:hover .oraculo-game-card-overlay": {
+          opacity: 1
+        },
+        "&:hover .oraculo-game-card-btn": {
+          opacity: 1,
+          transform: "translate(-50%, -50%) scale(1)",
+          pointerEvents: "auto"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "img",
+          {
+            src: imageUrl,
+            alt: "Juego de casino",
+            loading: "lazy",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              display: "block",
+              borderRadius: "inherit"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Box,
+          {
+            className: "oraculo-game-card-overlay",
+            sx: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.45)",
+              opacity: 0,
+              transition: "opacity .15s ease",
+              pointerEvents: "none",
+              zIndex: 1
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Box,
+          {
+            className: "oraculo-game-card-btn",
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              zIndex: 2,
+              transform: "translate(-50%, -50%) scale(0.95)",
+              opacity: 0,
+              transition: "opacity .15s ease, transform .15s ease",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx2(OraculoButton, { variant: "primary", onClick: handleButtonClick, children: "JUGAR" })
+          }
+        )
+      ]
+    }
+  );
+};
+var OraculoGameCard_default = OraculoGameCard;
+
+// src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function OraculoGameRankCard({
+  imageUrl,
+  orden = 1,
+  onClick,
+  sizes = {
+    xs: { w: 104, h: 112, r: 18, font: 48 },
+    md: { w: 186, h: 264, r: 22.6, font: 64 }
+  }
+}) {
+  var _a, _b, _c, _d;
+  const getVal = (k, def) => {
+    var _a2, _b2, _c2, _d2;
+    return {
+      xs: (_b2 = (_a2 = sizes.xs) == null ? void 0 : _a2[k]) != null ? _b2 : def,
+      md: (_d2 = (_c2 = sizes.md) == null ? void 0 : _c2[k]) != null ? _d2 : def
+    };
+  };
+  const W = getVal("w", 186);
+  const H = getVal("h", 264);
+  const R = getVal("r", 22.6);
+  const F = getVal("font", 64);
+  const hang = {
+    xs: Math.round(((_b = (_a = sizes.xs) == null ? void 0 : _a.font) != null ? _b : 64) * 0.28),
+    md: Math.round(((_d = (_c = sizes.md) == null ? void 0 : _c.font) != null ? _d : 64) * 0.28)
+  };
+  return /* @__PURE__ */ jsxs3(
+    Box2,
+    {
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: { xs: `${W.xs}px`, md: `${W.md}px` },
+        aspectRatio: {
+          xs: `${W.xs}/${H.xs}`,
+          md: `${W.md}/${H.md}`
+        },
+        borderRadius: { xs: `${R.xs}px`, md: `${R.md}px` },
+        boxSizing: "border-box",
+        overflow: "visible",
+        pb: { xs: `${hang.xs}px`, md: `${hang.md}px` }
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "inherit",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx3(
+              OraculoGameCard_default,
+              {
+                imageUrl,
+                onClick,
+                size: "lg",
+                fillParent: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            component: "span",
+            sx: {
+              position: "absolute",
+              left: 8,
+              bottom: {
+                xs: `-${hang.xs}px`,
+                md: `-${hang.md}px`
+              },
+              fontFamily: "secondary",
+              fontSize: {
+                xs: `${F.xs}px`,
+                md: `${F.md}px`
+              },
+              lineHeight: 1,
+              color: "#3CC666",
+              WebkitTextStroke: "1px #9ee86e",
+              zIndex: 3,
+              userSelect: "none"
+            },
+            children: orden
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/molecules/OraculoGameSlide/OraculoGameSlide.tsx
+import Box3 from "@mui/material/Box";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var GAP = 12;
+var OraculoGameSlide = ({
+  items,
+  layout = "grid",
+  onClick
+}) => {
+  var _a;
+  if (layout === "mosaic") {
+    const big = items[0];
+    const smalls = items.slice(1, 5);
+    return /* @__PURE__ */ jsxs4(
+      Box3,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateRows: {
+            xs: `repeat(2, 112px)`,
+            md: `repeat(2, 168px)`
+          },
+          gridTemplateColumns: {
+            xs: `184px`,
+            md: `280px`
+          },
+          gridAutoFlow: "column",
+          gridAutoColumns: {
+            xs: `104px`,
+            md: `152px`
+          },
+          columnGap: `${GAP}px`,
+          rowGap: `${GAP}px`,
+          alignItems: "stretch",
+          justifyItems: "stretch"
+        },
+        children: [
+          big && /* @__PURE__ */ jsx4(
+            Box3,
+            {
+              sx: {
+                width: { xs: 184, md: 280 },
+                height: { xs: 234, md: 352 },
+                gridRow: "1 / span 2",
+                overflow: "hidden",
+                borderRadius: 2
+              },
+              children: /* @__PURE__ */ jsx4(
+                OraculoGameCard_default,
+                {
+                  imageUrl: `https://olimpo.bet${(_a = big.imageUrl) != null ? _a : ""}`,
+                  size: "lg",
+                  fillParent: true,
+                  onClick: () => onClick == null ? void 0 : onClick(big, 0)
+                }
+              )
+            }
+          ),
+          smalls.map((it, index) => {
+            var _a2;
+            return /* @__PURE__ */ jsx4(
+              Box3,
+              {
+                sx: {
+                  width: { xs: 104, md: 152 },
+                  height: { xs: 112, md: 168 },
+                  overflow: "hidden",
+                  borderRadius: 2
+                },
+                children: /* @__PURE__ */ jsx4(
+                  OraculoGameCard_default,
+                  {
+                    imageUrl: `https://olimpo.bet${(_a2 = it.imageUrl) != null ? _a2 : ""}`,
+                    size: "sm",
+                    fillParent: true,
+                    onClick: () => onClick == null ? void 0 : onClick(it, index + 1)
+                  }
+                )
+              },
+              it.id
+            );
+          })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    Box3,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: {
+          xs: `repeat(2, 104px)`,
+          md: `repeat(2, 152px)`
+        },
+        gridTemplateRows: {
+          xs: `repeat(2, 112px)`,
+          md: `repeat(2, 168px)`
+        },
+        gap: `${GAP}px`,
+        gridAutoFlow: "column"
+      },
+      children: items.map((it, index) => {
+        var _a2, _b;
+        return /* @__PURE__ */ jsx4(
+          Box3,
+          {
+            sx: {
+              overflow: "hidden",
+              borderRadius: 2
+            },
+            children: /* @__PURE__ */ jsx4(
+              OraculoGameCard_default,
+              {
+                imageUrl: `https://olimpo.bet${(_b = it.imageUrl) != null ? _b : ""}`,
+                size: "sm",
+                fillParent: true,
+                onClick: () => onClick == null ? void 0 : onClick(it, index)
+              }
+            )
+          },
+          (_a2 = it.id) != null ? _a2 : index
+        );
+      })
+    }
+  );
+};
+var OraculoGameSlide_default = OraculoGameSlide;
+
+// src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
+import { useMemo } from "react";
+import Stack from "@mui/material/Stack";
+import Box4 from "@mui/material/Box";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function OraculoSeccionTopJuegos({
+  items,
+  title = "Top Juegos",
+  iconUrl,
+  onCardClick
+}) {
+  const normalizedItems = useMemo(
+    () => items.map((item, index) => {
+      var _a;
+      return {
+        ...item,
+        // si no viene orden, usamos el índice (1-based)
+        orden: (_a = item.orden) != null ? _a : index + 1,
+        _originalIndex: index
+      };
+    }).sort((a, b) => {
+      if (a.orden != null && b.orden != null) return a.orden - b.orden;
+      return a._originalIndex - b._originalIndex;
+    }),
+    [items]
+  );
+  return /* @__PURE__ */ jsx5("section", { style: { width: "100%" }, children: /* @__PURE__ */ jsxs5(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsx5(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+    /* @__PURE__ */ jsx5(
+      Box4,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "repeat(3, minmax(0, 1fr))",
+            md: "repeat(6, minmax(0, 1fr))"
+          },
+          gap: { xs: 1.5, md: 2 },
+          justifyItems: "center",
+          width: "100%"
+        },
+        children: normalizedItems.slice(0, 6).map((juego) => {
+          var _a;
+          return /* @__PURE__ */ jsx5(
+            OraculoGameRankCard,
+            {
+              imageUrl: `https://olimpo.bet${(_a = juego.logo) != null ? _a : ""}`,
+              orden: juego.orden,
+              onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
+            },
+            juego.machine
+          );
+        })
+      }
+    )
+  ] }) });
+}
+
+// src/organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx
+import { useRef, useState } from "react";
+import Stack2 from "@mui/material/Stack";
+import Box5 from "@mui/material/Box";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var buildCasinoSlides = (games, mosaicFirst = true, gridSize = 4) => {
+  const baseItems = games.map((g, idx) => {
+    var _a, _b, _c;
+    return {
+      id: (_b = (_a = g.orden) != null ? _a : g.machine) != null ? _b : idx,
+      imageUrl: (_c = g.logo) != null ? _c : ""
+    };
+  });
+  if (!baseItems.length) return [];
+  const slides = [];
+  let start = 0;
+  if (mosaicFirst) {
+    const take = Math.min(baseItems.length, 5);
+    slides.push({
+      id: "mosaic-0",
+      kind: "mosaic",
+      items: baseItems.slice(0, take)
+    });
+    start = take;
+  }
+  while (start < baseItems.length) {
+    const end = Math.min(start + gridSize, baseItems.length);
+    slides.push({
+      id: `grid-${start}`,
+      kind: "grid",
+      items: baseItems.slice(start, end)
+    });
+    start = end;
+  }
+  return slides;
+};
+var OraculoSeccionCasino = ({
+  items,
+  title = "Casino",
+  iconUrl = "/assets/img/home/Casino/diamante.svg",
+  onItemClick,
+  onViewMore,
+  mosaicFirst = true,
+  gridSize = 4
+}) => {
+  const carouselRef = useRef(null);
+  const [navState, setNavState] = useState({ isStart: true, isEnd: false });
+  const slides = buildCasinoSlides(items, mosaicFirst, gridSize);
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  return /* @__PURE__ */ jsx6("section", { children: /* @__PURE__ */ jsxs6(Stack2, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsxs6(
+      Box5,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 1.5,
+          rowGap: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx6(
+            OraculoSectionTitle,
+            {
+              title,
+              iconUrl,
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            Box5,
+            {
+              sx: {
+                display: "flex",
+                gap: 1,
+                justifyContent: "flex-end"
+              },
+              children: [
+                /* @__PURE__ */ jsx6(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Anterior",
+                    variant: "secondary",
+                    iconOnly: true,
+                    leftIcon: /* @__PURE__ */ jsx6(ChevronLeftRounded_default, {}),
+                    onClick: handlePrev,
+                    disabled: navState.isStart
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Siguiente",
+                    variant: "secondary",
+                    iconOnly: true,
+                    rightIcon: /* @__PURE__ */ jsx6(ChevronRightRounded_default, {}),
+                    onClick: handleNext,
+                    disabled: navState.isEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx6(Box5, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx6(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items: slides,
+        perPage: 1,
+        gap: "0px",
+        options: {
+          autoWidth: true,
+          gap: "12px",
+          trimSpace: false,
+          pagination: false,
+          arrows: false,
+          drag: true,
+          focus: "start"
+        },
+        renderItem: (slide) => /* @__PURE__ */ jsx6("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx6(
+          OraculoGameSlide_default,
+          {
+            items: slide.items,
+            layout: slide.kind === "mosaic" ? "mosaic" : "grid",
+            onClick: (itm) => {
+              const game = items.find(
+                (g, idx) => {
+                  var _a;
+                  return ((_a = g.orden) != null ? _a : idx) === itm.id;
+                }
+              );
+              if (game) onItemClick == null ? void 0 : onItemClick(game);
+            }
+          }
+        ) }),
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] }) });
+};
+var OraculoSeccionCasino_default = OraculoSeccionCasino;
+
+// src/organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx
+import { useRef as useRef2, useState as useState2 } from "react";
+import Stack3 from "@mui/material/Stack";
+import Box6 from "@mui/material/Box";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var buildVirtualSlides = (games, mosaicFirst = true, gridSize = 4) => {
+  const baseItems = games.map((g, idx) => {
+    var _a, _b;
+    return {
+      id: (_a = g.orden) != null ? _a : idx,
+      imageUrl: (_b = g.logo) != null ? _b : ""
+    };
+  });
+  if (!baseItems.length) return [];
+  const slides = [];
+  let start = 0;
+  if (mosaicFirst) {
+    const take = Math.min(baseItems.length, 5);
+    slides.push({
+      id: "mosaic-0",
+      kind: "mosaic",
+      items: baseItems.slice(0, take)
+    });
+    start = take;
+  }
+  while (start < baseItems.length) {
+    const end = Math.min(start + gridSize, baseItems.length);
+    slides.push({
+      id: `grid-${start}`,
+      kind: "grid",
+      items: baseItems.slice(start, end)
+    });
+    start = end;
+  }
+  return slides;
+};
+var OraculoSeccionVirtuales = ({
+  items,
+  title = "Virtuales",
+  iconUrl = "/assets/img/home/Virtuales/virtuales.svg",
+  onItemClick,
+  onViewMore,
+  mosaicFirst = true,
+  gridSize = 4
+}) => {
+  const carouselRef = useRef2(null);
+  const [navState, setNavState] = useState2({ isStart: true, isEnd: false });
+  const slides = buildVirtualSlides(items, mosaicFirst, gridSize);
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  return /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsxs7(Stack3, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsxs7(
+      Box6,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 1.5,
+          rowGap: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx7(
+            OraculoSectionTitle,
+            {
+              title,
+              iconUrl,
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ jsxs7(
+            Box6,
+            {
+              sx: {
+                display: "flex",
+                gap: 1,
+                justifyContent: "flex-end"
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Anterior",
+                    variant: "secondary",
+                    iconOnly: true,
+                    leftIcon: /* @__PURE__ */ jsx7(ChevronLeftRounded_default, {}),
+                    onClick: handlePrev,
+                    disabled: navState.isStart
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Siguiente",
+                    variant: "secondary",
+                    iconOnly: true,
+                    rightIcon: /* @__PURE__ */ jsx7(ChevronRightRounded_default, {}),
+                    onClick: handleNext,
+                    disabled: navState.isEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7(Box6, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx7(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items: slides,
+        perPage: 1,
+        gap: "0",
+        options: {
+          autoWidth: true,
+          gap: "12px",
+          trimSpace: false,
+          pagination: false,
+          arrows: false,
+          drag: true,
+          focus: "start",
+          perMove: 1
+        },
+        renderItem: (slide) => /* @__PURE__ */ jsx7("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx7(
+          OraculoGameSlide_default,
+          {
+            items: slide.items,
+            layout: slide.kind === "mosaic" ? "mosaic" : "grid",
+            onClick: (itm) => {
+              const game = items.find(
+                (g, idx) => {
+                  var _a;
+                  return ((_a = g.orden) != null ? _a : idx) === itm.id;
+                }
+              );
+              if (game) onItemClick == null ? void 0 : onItemClick(game);
+            }
+          }
+        ) }),
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] }) });
+};
+var OraculoSeccionVirtuales_default = OraculoSeccionVirtuales;
 
 // src/templates/OraculoPageLanding.tsx
 import {
   Container,
-  Stack
+  Stack as Stack4
 } from "@mui/material";
 import "@splidejs/react-splide/css";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function OraculoPageLanding({ props }) {
   const listaDestacados = [
     {
@@ -19806,16 +20522,16 @@ function OraculoPageLanding({ props }) {
       promotion: ""
     }
   ];
-  return /* @__PURE__ */ jsxs(Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs8(Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
+    /* @__PURE__ */ jsx8(
       OraculoSeccionBonoBienvenida_default,
       {
         headline: props.bonos.headline,
         items: props.bonos.items
       }
     ),
-    /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 12, useFlexGap: true, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs8(Stack4, { direction: "column", spacing: 12, useFlexGap: true, children: [
+      /* @__PURE__ */ jsx8(
         OraculoSeccionTopJuegos,
         {
           items: props.topJuegos.items,
@@ -19824,7 +20540,7 @@ function OraculoPageLanding({ props }) {
           onCardClick: props.topJuegos.onCardClick
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx8(
         OraculoSeccionCasino_default,
         {
           items: props.casino.items,
@@ -19835,7 +20551,7 @@ function OraculoPageLanding({ props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx8(
       OraculoSeccionCasinoEnVivo_default,
       {
         items: props.casinoEnVivo.items,
@@ -19847,8 +20563,8 @@ function OraculoPageLanding({ props }) {
         onViewMore: props.casinoEnVivo.onViewMore
       }
     ),
-    /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 12, useFlexGap: true, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs8(Stack4, { direction: "column", spacing: 12, useFlexGap: true, children: [
+      /* @__PURE__ */ jsx8(
         OraculoSeccionVirtuales_default,
         {
           items: props.virtuales.items,
@@ -19858,7 +20574,7 @@ function OraculoPageLanding({ props }) {
           onViewMore: props.virtuales.onViewMore
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx8(
         OraculoSeccionDestacados,
         {
           items: listaDestacados,
@@ -19867,14 +20583,14 @@ function OraculoPageLanding({ props }) {
           onViewMore: () => console.log("Ver m\xE1s clickeado")
         }
       ),
-      /* @__PURE__ */ jsx(OraculoSeccionClubOlimpo_default, { items: props.clubOlimpo })
+      /* @__PURE__ */ jsx8(OraculoSeccionClubOlimpo_default, { items: props.clubOlimpo })
     ] })
   ] });
 }
 
 // src/templates/OraculoPageLandingPreview.tsx
-import React, { useEffect, useState, useMemo } from "react";
-import { Container as Container2, Stack as Stack2 } from "@mui/material";
+import React4, { useEffect, useState as useState3, useMemo as useMemo2 } from "react";
+import { Container as Container2, Stack as Stack5 } from "@mui/material";
 
 // ../node_modules/@firebase/util/dist/postinstall.mjs
 var getDefaultsFromPostinstall = () => void 0;
@@ -37629,18 +38345,18 @@ var db = getFirestore(app);
 
 // src/templates/OraculoPageLandingPreview.tsx
 import "@splidejs/react-splide/css";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 
 // import("../organisms/**/*/**/*") in src/templates/OraculoPageLandingPreview.tsx
 var globImport_organisms = __glob({
-  "../organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx": () => import("./OraculoSeccionBonoBienvenida-EDS6UQVL.mjs"),
-  "../organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx": () => import("./OraculoSeccionCasino-GXRRODCJ.mjs"),
+  "../organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx": () => import("./OraculoSeccionBonoBienvenida-2APXZQQA.mjs"),
+  "../organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx": () => import("./OraculoSeccionCasino-WBPCNYC5.mjs"),
   "../organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx": () => import("./OraculoSeccionCasinoEnVivo-ISYMJSUN.mjs"),
   "../organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.css": () => import("./OraculoSeccionClubOlimpo-XGB4KUKX.mjs"),
   "../organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx": () => import("./OraculoSeccionClubOlimpo-TV3LABJ5.mjs"),
-  "../organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx": () => import("./OraculoSeccionDestacados-QU6BT2NM.mjs"),
-  "../organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx": () => import("./OraculoSeccionTopJuegos-FZUYQEMC.mjs"),
-  "../organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx": () => import("./OraculoSeccionVirtuales-MGW5X23B.mjs")
+  "../organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx": () => import("./OraculoSeccionDestacados-IMREYQ6W.mjs"),
+  "../organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx": () => import("./OraculoSeccionTopJuegos-DWEO36ND.mjs"),
+  "../organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx": () => import("./OraculoSeccionVirtuales-IBYOMEJV.mjs")
 });
 
 // src/templates/OraculoPageLandingPreview.tsx
@@ -37657,12 +38373,12 @@ var OraculoPageLandingPreview = ({
   sectionsOverride,
   docId = "home"
 }) => {
-  const [sections, setSections] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [componentMap, setComponentMap] = useState({});
-  const [sectionDataMap, setSectionDataMap] = useState({});
-  const [sectionLoadingMap, setSectionLoadingMap] = useState({});
-  const [sectionErrorMap, setSectionErrorMap] = useState({});
+  const [sections, setSections] = useState3([]);
+  const [loading, setLoading] = useState3(false);
+  const [componentMap, setComponentMap] = useState3({});
+  const [sectionDataMap, setSectionDataMap] = useState3({});
+  const [sectionLoadingMap, setSectionLoadingMap] = useState3({});
+  const [sectionErrorMap, setSectionErrorMap] = useState3({});
   useEffect(() => {
     if (sectionsOverride) return;
     setLoading(true);
@@ -37728,11 +38444,11 @@ var OraculoPageLandingPreview = ({
     if (!res.ok) throw new HttpError(res.status, url, res.statusText);
     return res.json();
   };
-  const effectiveSections = useMemo(
+  const effectiveSections = useMemo2(
     () => sectionsOverride ? sectionsOverride.slice() : sections.slice(),
     [sectionsOverride, sections]
   );
-  const fetchedKeysRef = React.useRef(/* @__PURE__ */ new Set());
+  const fetchedKeysRef = React4.useRef(/* @__PURE__ */ new Set());
   useEffect(() => {
     const fetchables = effectiveSections.map((s) => ({ s, url: (s.apiUrl || "").trim() })).filter(({ url }) => !!url);
     if (!fetchables.length) return;
@@ -37764,7 +38480,7 @@ var OraculoPageLandingPreview = ({
       })();
     }
   }, [effectiveSections]);
-  const orderedVisible = useMemo(
+  const orderedVisible = useMemo2(
     () => effectiveSections.filter((s) => s.visible).sort((a, b) => a.order - b.order),
     [effectiveSections]
   );
@@ -37868,7 +38584,7 @@ var OraculoPageLandingPreview = ({
       error: "bg-red-100 text-red-800",
       component: "bg-yellow-100 text-yellow-800"
     };
-    return /* @__PURE__ */ jsx2("div", { className: `mx-4 p-4 rounded ${colorMap[type]}`, children: message }, key);
+    return /* @__PURE__ */ jsx9("div", { className: `mx-4 p-4 rounded ${colorMap[type]}`, children: message }, key);
   };
   const renderSingleSection = (s) => {
     var _a;
@@ -37901,7 +38617,7 @@ var OraculoPageLandingPreview = ({
         );
     }
     const compProps = buildCompProps(s);
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         style: {
@@ -37910,16 +38626,16 @@ var OraculoPageLandingPreview = ({
           width: "100%",
           boxSizing: "border-box"
         },
-        children: /* @__PURE__ */ jsx2(Comp, { ...compProps })
+        children: /* @__PURE__ */ jsx9(Comp, { ...compProps })
       },
       s.id
     );
   };
   if (loading && !sectionsOverride)
-    return /* @__PURE__ */ jsx2("div", { className: "text-xs text-gray-400", children: "Cargando preview..." });
+    return /* @__PURE__ */ jsx9("div", { className: "text-xs text-gray-400", children: "Cargando preview..." });
   if (!loading && !sectionsOverride && sections.length === 0)
-    return /* @__PURE__ */ jsx2("div", { className: "text-xs text-gray-500", children: "Sin secciones (Firestore)" });
-  return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx9("div", { className: "text-xs text-gray-500", children: "Sin secciones (Firestore)" });
+  return /* @__PURE__ */ jsx9(
     Container2,
     {
       className: "oli-font",
@@ -37934,14 +38650,14 @@ var OraculoPageLandingPreview = ({
         maxWidth: "100%",
         overflowX: "hidden"
       },
-      children: /* @__PURE__ */ jsx2(Stack2, { direction: "column", spacing: 8, useFlexGap: true, children: orderedVisible.map(renderSingleSection) })
+      children: /* @__PURE__ */ jsx9(Stack5, { direction: "column", spacing: 8, useFlexGap: true, children: orderedVisible.map(renderSingleSection) })
     }
   );
 };
 var OraculoPageLandingPreview_default = OraculoPageLandingPreview;
 
 // src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function OraculoSeccionDestacados({
   items,
   title = "Destacados",
@@ -37949,8 +38665,8 @@ function OraculoSeccionDestacados({
   onViewMore,
   className = ""
 }) {
-  const carouselRef = useRef(null);
-  const [navState, setNavState] = useState2({ isStart: true, isEnd: false });
+  const carouselRef = useRef3(null);
+  const [navState, setNavState] = useState4({ isStart: true, isEnd: false });
   const handlePrev = () => {
     var _a;
     (_a = carouselRef.current) == null ? void 0 : _a.prev();
@@ -37964,8 +38680,8 @@ function OraculoSeccionDestacados({
     onViewMore == null ? void 0 : onViewMore();
   };
   const sectionClassName = className || void 0;
-  return /* @__PURE__ */ jsxs2("section", { className: sectionClassName, style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs9("section", { className: sectionClassName, style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs9(
       "header",
       {
         style: {
@@ -37977,36 +38693,36 @@ function OraculoSeccionDestacados({
           marginBottom: 16
         },
         children: [
-          /* @__PURE__ */ jsx3(OraculoSectionTitle, { title, iconUrl, size: "md" }),
-          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx10(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+          /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsx10(
               OraculoButton,
               {
                 ariaLabel: "Anterior",
                 variant: "secondary",
                 iconOnly: true,
-                leftIcon: /* @__PURE__ */ jsx3(ChevronLeftRounded_default, {}),
+                leftIcon: /* @__PURE__ */ jsx10(ChevronLeftRounded_default, {}),
                 onClick: handlePrev,
                 disabled: navState.isStart
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx10(
               OraculoButton,
               {
                 ariaLabel: "Siguiente",
                 variant: "secondary",
                 iconOnly: true,
-                rightIcon: /* @__PURE__ */ jsx3(ChevronRightRounded_default, {}),
+                rightIcon: /* @__PURE__ */ jsx10(ChevronRightRounded_default, {}),
                 onClick: handleNext,
                 disabled: navState.isEnd
               }
             )
           ] }),
-          /* @__PURE__ */ jsx3(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
+          /* @__PURE__ */ jsx10(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx10(
       OraculoCarousel_default,
       {
         ref: carouselRef,
@@ -38018,32 +38734,31 @@ function OraculoSeccionDestacados({
           768: { perPage: 1.15, focus: "start" },
           1024: { perPage: 2.5, focus: "start" }
         },
-        renderItem: (item) => {
-          var _a;
-          return /* @__PURE__ */ jsx3(
-            "div",
-            {
-              style: {
-                textAlign: "center",
-                marginTop: 16
-              },
-              children: /* @__PURE__ */ jsx3(
-                "img",
-                {
-                  src: `https://olimpo.bet${(_a = item.image) != null ? _a : ""}`,
-                  alt: item.title,
-                  style: {
-                    width: "100%",
-                    height: "auto",
-                    borderRadius: 8,
-                    display: "block"
-                  }
-                }
-              )
+        renderItem: (item) => /* @__PURE__ */ jsx10(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginTop: 16
             },
-            `${item.title}-${item.image}`
-          );
-        },
+            children: /* @__PURE__ */ jsx10(
+              "img",
+              {
+                src: `https://olimpo.bet${item.image !== "" ? item.image : item.summary_image}`,
+                alt: item.title,
+                style: {
+                  width: "100%",
+                  // minHeight: "150px",
+                  // maxHeight: "150px",
+                  height: "150px",
+                  borderRadius: 8,
+                  display: "block"
+                }
+              }
+            )
+          },
+          `${item.title}-${item.image}`
+        ),
         onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
       }
     )
@@ -38051,7 +38766,14 @@ function OraculoSeccionDestacados({
 }
 
 export {
+  OraculoSectionTitle,
+  OraculoGameCard_default,
+  OraculoGameRankCard,
+  OraculoGameSlide_default,
   OraculoSeccionDestacados,
+  OraculoSeccionTopJuegos,
+  OraculoSeccionCasino_default,
+  OraculoSeccionVirtuales_default,
   OraculoPageLanding,
   OraculoPageLandingPreview_default
 };