oraculo-ui 0.1.5 → 0.1.7

package/dist/index.d.mts

@@ -142,18 +142,26 @@ interface OraculoClubOlimpoVisualProps {
 }
 declare const OraculoClubOlimpoVisual: React.FC<OraculoClubOlimpoVisualProps>;
 
-interface OraculoDestacadoItem {
-    id?: string | number;
-    src: string;
-    alt: string;
+interface OraculoSeccionDestacadosItem {
+    body: string;
+    image: string;
+    title: string;
+    summary_body: string;
+    summary_title: string;
+    groups_forbidden: number[];
+    groups_allowed: number[];
+    promotion: string;
+    tags: string;
+    summary_image?: string;
 }
 interface OraculoSeccionDestacadosProps {
-    items: OraculoDestacadoItem[];
+    items: OraculoSeccionDestacadosItem[];
     title?: string;
     iconUrl?: string;
     onViewMore?: () => void;
     className?: string;
 }
+
 declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
 
 interface OraculoGameItem {
@@ -272,4 +280,4 @@ declare function OraculoPageLanding({ props }: {
     props: parametros;
 }): react_jsx_runtime.JSX.Element;
 
-export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };
+export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosItem, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };

package/dist/index.d.ts

@@ -142,18 +142,26 @@ interface OraculoClubOlimpoVisualProps {
 }
 declare const OraculoClubOlimpoVisual: React.FC<OraculoClubOlimpoVisualProps>;
 
-interface OraculoDestacadoItem {
-    id?: string | number;
-    src: string;
-    alt: string;
+interface OraculoSeccionDestacadosItem {
+    body: string;
+    image: string;
+    title: string;
+    summary_body: string;
+    summary_title: string;
+    groups_forbidden: number[];
+    groups_allowed: number[];
+    promotion: string;
+    tags: string;
+    summary_image?: string;
 }
 interface OraculoSeccionDestacadosProps {
-    items: OraculoDestacadoItem[];
+    items: OraculoSeccionDestacadosItem[];
     title?: string;
     iconUrl?: string;
     onViewMore?: () => void;
     className?: string;
 }
+
 declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
 
 interface OraculoGameItem {
@@ -272,4 +280,4 @@ declare function OraculoPageLanding({ props }: {
     props: parametros;
 }): react_jsx_runtime.JSX.Element;
 
-export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };
+export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosItem, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };

package/dist/index.js

@@ -318,7 +318,7 @@ function OraculoGameRankCard({
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "img",
                 {
-                  src: imageUrl,
+                  src: `https://olimpo.bet${imageUrl}`,
                   alt: "Juego de casino",
                   loading: "lazy",
                   style: {
@@ -888,47 +888,31 @@ function OraculoSeccionDestacados({
           marginBottom: 16
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            OraculoSectionTitle,
-            {
-              title,
-              iconUrl,
-              size: "md"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            "div",
-            {
-              style: {
-                display: "flex",
-                gap: 8
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Anterior",
-                    variant: "secondary",
-                    iconOnly: true,
-                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronLeftRounded_default, {}),
-                    onClick: handlePrev,
-                    disabled: navState.isStart
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Siguiente",
-                    variant: "secondary",
-                    iconOnly: true,
-                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRightRounded_default, {}),
-                    onClick: handleNext,
-                    disabled: navState.isEnd
-                  }
-                )
-              ]
-            }
-          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              OraculoButton,
+              {
+                ariaLabel: "Anterior",
+                variant: "secondary",
+                iconOnly: true,
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronLeftRounded_default, {}),
+                onClick: handlePrev,
+                disabled: navState.isStart
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              OraculoButton,
+              {
+                ariaLabel: "Siguiente",
+                variant: "secondary",
+                iconOnly: true,
+                rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRightRounded_default, {}),
+                onClick: handleNext,
+                disabled: navState.isEnd
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
         ]
       }
@@ -945,32 +929,29 @@ function OraculoSeccionDestacados({
           768: { perPage: 1.15, focus: "start" },
           1024: { perPage: 2.5, focus: "start" }
         },
-        renderItem: (item) => {
-          var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "div",
-            {
-              style: {
-                textAlign: "center",
-                marginTop: 16
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                "img",
-                {
-                  src: item.src,
-                  alt: item.alt,
-                  style: {
-                    width: "100%",
-                    height: "auto",
-                    borderRadius: 8,
-                    display: "block"
-                  }
-                }
-              )
+        renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginTop: 16
             },
-            (_a = item.id) != null ? _a : item.src
-          );
-        },
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "img",
+              {
+                src: item.image,
+                alt: item.title,
+                style: {
+                  width: "100%",
+                  height: "auto",
+                  borderRadius: 8,
+                  display: "block"
+                }
+              }
+            )
+          },
+          `${item.title}-${item.image}`
+        ),
         onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
       }
     )
@@ -978,6 +959,7 @@ function OraculoSeccionDestacados({
 }
 
 // src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
+var import_react3 = require("react");
 var import_Stack = __toESM(require("@mui/material/Stack"));
 var import_Box6 = __toESM(require("@mui/material/Box"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -987,6 +969,21 @@ function OraculoSeccionTopJuegos({
   iconUrl,
   onCardClick
 }) {
+  const normalizedItems = (0, import_react3.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__ */ (0, import_jsx_runtime14.jsx)("section", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Stack.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OraculoSectionTitle, { title, iconUrl, size: "md" }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -1002,11 +999,11 @@ function OraculoSeccionTopJuegos({
           justifyItems: "center",
           width: "100%"
         },
-        children: items.slice(0, 6).map((juego, idx) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        children: normalizedItems.slice(0, 6).map((juego) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           OraculoGameRankCard,
           {
             imageUrl: juego.logo || "",
-            orden: juego.orden || idx + 1,
+            orden: juego.orden,
             onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
           },
           juego.machine
@@ -1170,7 +1167,7 @@ var OraculoSeccionCasinoEnVivo = ({
 var OraculoSeccionCasinoEnVivo_default = OraculoSeccionCasinoEnVivo;
 
 // src/organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_Stack3 = __toESM(require("@mui/material/Stack"));
 var import_Box8 = __toESM(require("@mui/material/Box"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -1214,8 +1211,8 @@ var OraculoSeccionCasino = ({
   mosaicFirst = true,
   gridSize = 4
 }) => {
-  const carouselRef = (0, import_react3.useRef)(null);
-  const [navState, setNavState] = (0, import_react3.useState)({ isStart: true, isEnd: false });
+  const carouselRef = (0, import_react4.useRef)(null);
+  const [navState, setNavState] = (0, import_react4.useState)({ isStart: true, isEnd: false });
   const slides = buildCasinoSlides(items, mosaicFirst, gridSize);
   const handlePrev = () => {
     var _a;
@@ -1326,7 +1323,7 @@ var OraculoSeccionCasino = ({
 var OraculoSeccionCasino_default = OraculoSeccionCasino;
 
 // src/organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_Stack4 = __toESM(require("@mui/material/Stack"));
 var import_Box9 = __toESM(require("@mui/material/Box"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -1370,8 +1367,8 @@ var OraculoSeccionVirtuales = ({
   mosaicFirst = true,
   gridSize = 4
 }) => {
-  const carouselRef = (0, import_react4.useRef)(null);
-  const [navState, setNavState] = (0, import_react4.useState)({ isStart: true, isEnd: false });
+  const carouselRef = (0, import_react5.useRef)(null);
+  const [navState, setNavState] = (0, import_react5.useState)({ isStart: true, isEnd: false });
   const slides = buildVirtualSlides(items, mosaicFirst, gridSize);
   const handlePrev = () => {
     var _a;
@@ -1483,7 +1480,7 @@ var OraculoSeccionVirtuales = ({
 var OraculoSeccionVirtuales_default = OraculoSeccionVirtuales;
 
 // src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_Box10 = __toESM(require("@mui/material/Box"));
 var import_Typography4 = __toESM(require("@mui/material/Typography"));
 var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"));
@@ -1539,9 +1536,9 @@ var OraculoSeccionBonoBienvenida = ({
   const showDots = items.length > 1;
   const bgUrl = backgroundImageUrl != null ? backgroundImageUrl : "/assets/img/home/BonoBienvenida/Fondobg.png";
   const sectionSx = buildSectionSx(bgUrl);
-  const carouselRef = (0, import_react5.useRef)(null);
-  const [navState, setNavState] = (0, import_react5.useState)({ isStart: true, isEnd: false });
-  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(0);
+  const carouselRef = (0, import_react6.useRef)(null);
+  const [navState, setNavState] = (0, import_react6.useState)({ isStart: true, isEnd: false });
+  const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
   if (isMobile) {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       import_Box10.default,
@@ -1673,7 +1670,7 @@ var OraculoSeccionBonoBienvenida = ({
 var OraculoSeccionBonoBienvenida_default = OraculoSeccionBonoBienvenida;
 
 // src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var OraculoSeccionClubOlimpo = ({
   className = "",
@@ -1682,12 +1679,12 @@ var OraculoSeccionClubOlimpo = ({
   selectedIndex = 0,
   ariaLabel
 }) => {
-  const rootRef = (0, import_react6.useRef)(null);
-  const bottomRef = (0, import_react6.useRef)(null);
+  const rootRef = (0, import_react7.useRef)(null);
+  const bottomRef = (0, import_react7.useRef)(null);
   if (!items) return null;
   const safeIndex = Math.min(Math.max(selectedIndex, 0), 1);
   const item = items;
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     if (!rootRef.current || !bottomRef.current) return;
     if (typeof ResizeObserver === "undefined") return;
     const root = rootRef.current;
@@ -1747,10 +1744,52 @@ function OraculoPageLanding({ props }) {
     }
   ];
   const listaDestacados = [
-    { id: 1, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
-    { id: 2, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" },
-    { id: 3, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
-    { id: 4, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" }
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      // aquí puedes usar la ruta que antes estaba en href
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+      // summary_image: "/lo-que-sea.png", // opcional
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    }
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material2.Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(

package/dist/index.mjs

@@ -272,7 +272,7 @@ function OraculoGameRankCard({
               /* @__PURE__ */ jsx5(
                 "img",
                 {
-                  src: imageUrl,
+                  src: `https://olimpo.bet${imageUrl}`,
                   alt: "Juego de casino",
                   loading: "lazy",
                   style: {
@@ -842,47 +842,31 @@ function OraculoSeccionDestacados({
           marginBottom: 16
         },
         children: [
-          /* @__PURE__ */ jsx11(
-            OraculoSectionTitle,
-            {
-              title,
-              iconUrl,
-              size: "md"
-            }
-          ),
-          /* @__PURE__ */ jsxs8(
-            "div",
-            {
-              style: {
-                display: "flex",
-                gap: 8
-              },
-              children: [
-                /* @__PURE__ */ jsx11(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Anterior",
-                    variant: "secondary",
-                    iconOnly: true,
-                    leftIcon: /* @__PURE__ */ jsx11(ChevronLeftRounded_default, {}),
-                    onClick: handlePrev,
-                    disabled: navState.isStart
-                  }
-                ),
-                /* @__PURE__ */ jsx11(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Siguiente",
-                    variant: "secondary",
-                    iconOnly: true,
-                    rightIcon: /* @__PURE__ */ jsx11(ChevronRightRounded_default, {}),
-                    onClick: handleNext,
-                    disabled: navState.isEnd
-                  }
-                )
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsx11(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+          /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsx11(
+              OraculoButton,
+              {
+                ariaLabel: "Anterior",
+                variant: "secondary",
+                iconOnly: true,
+                leftIcon: /* @__PURE__ */ jsx11(ChevronLeftRounded_default, {}),
+                onClick: handlePrev,
+                disabled: navState.isStart
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              OraculoButton,
+              {
+                ariaLabel: "Siguiente",
+                variant: "secondary",
+                iconOnly: true,
+                rightIcon: /* @__PURE__ */ jsx11(ChevronRightRounded_default, {}),
+                onClick: handleNext,
+                disabled: navState.isEnd
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx11(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
         ]
       }
@@ -899,32 +883,29 @@ function OraculoSeccionDestacados({
           768: { perPage: 1.15, focus: "start" },
           1024: { perPage: 2.5, focus: "start" }
         },
-        renderItem: (item) => {
-          var _a;
-          return /* @__PURE__ */ jsx11(
-            "div",
-            {
-              style: {
-                textAlign: "center",
-                marginTop: 16
-              },
-              children: /* @__PURE__ */ jsx11(
-                "img",
-                {
-                  src: item.src,
-                  alt: item.alt,
-                  style: {
-                    width: "100%",
-                    height: "auto",
-                    borderRadius: 8,
-                    display: "block"
-                  }
-                }
-              )
+        renderItem: (item) => /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginTop: 16
             },
-            (_a = item.id) != null ? _a : item.src
-          );
-        },
+            children: /* @__PURE__ */ jsx11(
+              "img",
+              {
+                src: item.image,
+                alt: item.title,
+                style: {
+                  width: "100%",
+                  height: "auto",
+                  borderRadius: 8,
+                  display: "block"
+                }
+              }
+            )
+          },
+          `${item.title}-${item.image}`
+        ),
         onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
       }
     )
@@ -932,6 +913,7 @@ function OraculoSeccionDestacados({
 }
 
 // src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
+import { useMemo } from "react";
 import Stack from "@mui/material/Stack";
 import Box6 from "@mui/material/Box";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -941,6 +923,21 @@ function OraculoSeccionTopJuegos({
   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__ */ jsx12("section", { style: { width: "100%" }, children: /* @__PURE__ */ jsxs9(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
     /* @__PURE__ */ jsx12(OraculoSectionTitle, { title, iconUrl, size: "md" }),
     /* @__PURE__ */ jsx12(
@@ -956,11 +953,11 @@ function OraculoSeccionTopJuegos({
           justifyItems: "center",
           width: "100%"
         },
-        children: items.slice(0, 6).map((juego, idx) => /* @__PURE__ */ jsx12(
+        children: normalizedItems.slice(0, 6).map((juego) => /* @__PURE__ */ jsx12(
           OraculoGameRankCard,
           {
             imageUrl: juego.logo || "",
-            orden: juego.orden || idx + 1,
+            orden: juego.orden,
             onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
           },
           juego.machine
@@ -1704,10 +1701,52 @@ function OraculoPageLanding({ props }) {
     }
   ];
   const listaDestacados = [
-    { id: 1, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
-    { id: 2, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" },
-    { id: 3, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
-    { id: 4, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" }
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      // aquí puedes usar la ruta que antes estaba en href
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+      // summary_image: "/lo-que-sea.png", // opcional
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    }
   ];
   return /* @__PURE__ */ jsxs14(Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
     /* @__PURE__ */ jsx18(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oraculo-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -15,9 +15,9 @@
   },
   "peerDependencies": {
     "@mui/material": ">=5",
+    "@splidejs/react-splide": ">=0.7.0",
     "react": ">=18",
-    "react-dom": ">=18",
-    "@splidejs/react-splide": ">=0.7.0"
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@types/react": "^18.3.27",