@fluid-app/rep-widgets 0.1.6 → 0.1.8

package/dist/{chunk-3KJRYFS7.js → chunk-Y657NN2D.js}

@@ -1,31 +1,66 @@
 import { MediaRenderer } from './chunk-T6BC5TUS.js';
 import { ScrollArrows } from './chunk-FKDPFJHH.js';
 import { getFontSizeField, getColorField, getPaddingField, getBorderRadiusField, getGapField, gapValues } from './chunk-ZS7C474P.js';
-import { useRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
 
-var DEFAULT_ITEMS = [];
-var SCROLL_ITEM_WIDTH = 300;
-var getImageUrl = (item) => {
-  return item.imageUrl || item.image;
-};
-function getFeaturedAssetUrl(value) {
-  if (!value) return void 0;
-  if (typeof value === "string") {
-    const isVideo = /\.(mp4|webm|ogg|mov)$/i.test(value);
-    return { url: value, isVideo };
-  }
-  if (typeof value === "object") {
-    const videoUrl = value.videoUrl || value.video_url || value.url;
-    if (videoUrl && /\.(mp4|webm|ogg|mov)$/i.test(videoUrl)) {
-      return { url: videoUrl, isVideo: true };
-    }
-    const imageUrl = value.imageUrl || value.image_url || value.url;
-    if (imageUrl) {
-      return { url: imageUrl, isVideo: false };
+function FeaturedSection({
+  borderRadius,
+  titleSize,
+  featuredTitle,
+  featuredSubtitle,
+  featuredButtonText,
+  featuredButtonUrl,
+  featuredSubtitleColor,
+  featuredSubtitleSize,
+  asset
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative h-full min-h-[300px] w-full overflow-hidden rounded-${borderRadius}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 h-full w-full", children: /* @__PURE__ */ jsx(
+          MediaRenderer,
+          {
+            src: asset.url,
+            mediaType: asset.isVideo ? "video" : "image",
+            alt: featuredTitle || "Featured",
+            objectFit: "cover",
+            autoplay: asset.isVideo,
+            loop: asset.isVideo,
+            muted: asset.isVideo,
+            controls: false
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-start justify-end p-8", children: [
+          featuredTitle && /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: `mb-2 font-bold text-white text-${titleSize === "md" ? "base" : titleSize}`,
+              children: featuredTitle
+            }
+          ),
+          featuredSubtitle && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `mb-4 text-${featuredSubtitleColor} text-${featuredSubtitleSize === "md" ? "base" : featuredSubtitleSize}`,
+              children: featuredSubtitle
+            }
+          ),
+          featuredButtonText && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: featuredButtonUrl || "#",
+              className: `bg-white px-6 py-2 font-medium text-foreground transition-opacity hover:opacity-90 rounded-${borderRadius}`,
+              children: featuredButtonText
+            }
+          )
+        ] })
+      ]
     }
-  }
-  return void 0;
+  );
 }
 function getTextContent(value) {
   if (!value) return "";
@@ -58,6 +93,101 @@ function getStringValue(value) {
   }
   return "";
 }
+function ListItemCardContent({
+  item,
+  padding,
+  itemTitleColor,
+  itemTitleSize,
+  descriptionColor,
+  descriptionSize,
+  priceColor,
+  priceSize,
+  originalPriceColor,
+  metaTextColor,
+  metaTextSize,
+  showMetaText
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `p-${padding}`, children: [
+    item.title && /* @__PURE__ */ jsx(
+      "h3",
+      {
+        className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
+        children: getTextContent(item.title)
+      }
+    ),
+    item.description && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
+        children: getTextContent(item.description)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      item.price && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
+          children: getStringValue(item.price)
+        }
+      ),
+      item.originalPrice && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
+          children: getStringValue(item.originalPrice)
+        }
+      )
+    ] }),
+    showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
+        children: [
+          item.qv && /* @__PURE__ */ jsxs("span", { children: [
+            "QV: ",
+            getStringValue(item.qv)
+          ] }),
+          item.cv && /* @__PURE__ */ jsxs("span", { children: [
+            "CV: ",
+            getStringValue(item.cv)
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function DiscountBadge({ discount }) {
+  return /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(discount) });
+}
+function FavoriteButton({ className }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: className || "absolute top-2 left-2 z-10 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background",
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-5 w-5 text-muted-foreground",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var getImageUrl = (item) => {
+  return item.imageUrl || item.image;
+};
 var getAspectRatioClass = (ratio) => {
   const ratios = {
     square: "aspect-square",
@@ -77,6 +207,244 @@ var getResponsiveGridClass = (columns) => {
   };
   return responsiveClasses[columns] || "grid-cols-2 @lg:grid-cols-3";
 };
+function UnorderedList({
+  items,
+  columns,
+  gap,
+  borderRadius,
+  imageAspectRatio,
+  showBadge,
+  showFavorite,
+  padding,
+  itemTitleColor,
+  itemTitleSize,
+  descriptionColor,
+  descriptionSize,
+  priceColor,
+  priceSize,
+  originalPriceColor,
+  metaTextColor,
+  metaTextSize,
+  showMetaText
+}) {
+  const gridClass = getResponsiveGridClass(columns);
+  return /* @__PURE__ */ jsx("div", { className: `grid ${gridClass} gap-${gapValues[gap]}`, children: items.map((item) => {
+    const imageUrl = getImageUrl(item);
+    const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md`,
+        children: [
+          showBadge && item.discount && /* @__PURE__ */ jsx(DiscountBadge, { discount: item.discount }),
+          showFavorite && /* @__PURE__ */ jsx(FavoriteButton, {}),
+          imageUrl && /* @__PURE__ */ jsx("div", { className: `w-full ${aspectRatioClass} overflow-hidden`, children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: imageUrl,
+              alt: item.title || "Product",
+              className: "h-full w-full object-cover"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            ListItemCardContent,
+            {
+              item,
+              padding,
+              itemTitleColor,
+              itemTitleSize,
+              descriptionColor,
+              descriptionSize,
+              priceColor,
+              priceSize,
+              originalPriceColor,
+              metaTextColor,
+              metaTextSize,
+              showMetaText
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+var SCROLL_ITEM_WIDTH = 300;
+var getImageUrl2 = (item) => {
+  return item.imageUrl || item.image;
+};
+var getAspectRatioClass2 = (ratio) => {
+  const ratios = {
+    square: "aspect-square",
+    landscape: "aspect-video",
+    portrait: "aspect-[3/4]"
+  };
+  return ratios[ratio];
+};
+var largeNumberSizes = {
+  xs: "8rem",
+  sm: "10rem",
+  md: "12rem",
+  lg: "14rem",
+  xl: "16rem",
+  "2xl": "20rem"
+};
+function OrderedList({
+  items,
+  scrollAxis,
+  gap,
+  borderRadius,
+  imageAspectRatio,
+  showBadge,
+  showFavorite,
+  padding,
+  itemTitleColor,
+  itemTitleSize,
+  descriptionColor,
+  descriptionSize,
+  priceColor,
+  priceSize,
+  originalPriceColor,
+  metaTextColor,
+  metaTextSize,
+  numberColor,
+  numberSize,
+  showMetaText
+}) {
+  const scrollContainerRef = useRef(null);
+  const scrollByAmount = (direction) => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const computedGap = parseFloat(getComputedStyle(container).gap) || 0;
+    const scrollAmount = SCROLL_ITEM_WIDTH + computedGap;
+    container.scrollTo({
+      left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
+      behavior: "smooth"
+    });
+  };
+  const contentProps = {
+    padding,
+    itemTitleColor,
+    itemTitleSize,
+    descriptionColor,
+    descriptionSize,
+    priceColor,
+    priceSize,
+    originalPriceColor,
+    metaTextColor,
+    metaTextSize,
+    showMetaText
+  };
+  if (scrollAxis === "horizontal") {
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollContainerRef,
+          className: `flex gap-${gapValues[gap]} scrollbar-hide overflow-x-auto scroll-smooth`,
+          children: items.map((item, index) => {
+            const imageUrl = getImageUrl2(item);
+            const aspectRatioClass = getAspectRatioClass2(imageAspectRatio);
+            return /* @__PURE__ */ jsxs("div", { className: "relative w-[300px] flex-shrink-0", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `absolute top-0 left-0 text-${numberColor} z-0 leading-none font-bold opacity-20`,
+                  style: { fontSize: largeNumberSizes[numberSize] },
+                  children: index + 1
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `relative z-10 ml-20 rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md`,
+                  children: [
+                    showBadge && item.discount && /* @__PURE__ */ jsx(DiscountBadge, { discount: item.discount }),
+                    showFavorite && /* @__PURE__ */ jsx(FavoriteButton, {}),
+                    imageUrl && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: `w-full ${aspectRatioClass} overflow-hidden`,
+                        children: /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: imageUrl,
+                            alt: item.title || "Product",
+                            className: "h-full w-full object-cover"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(ListItemCardContent, { item, ...contentProps })
+                  ]
+                }
+              )
+            ] }, item.id);
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 z-20 flex w-full -translate-y-1/2 items-center justify-between px-8", children: /* @__PURE__ */ jsx(
+        ScrollArrows,
+        {
+          onPrevious: () => scrollByAmount("prev"),
+          onNext: () => scrollByAmount("next")
+        }
+      ) })
+    ] });
+  }
+  if (scrollAxis === "vertical") {
+    return /* @__PURE__ */ jsx("div", { className: `flex flex-col gap-${gapValues[gap]}`, children: items.map((item, index) => {
+      const imageUrl = getImageUrl2(item);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `relative flex gap-${gapValues[gap]} rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md ${`p-${padding}`}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `flex-shrink-0 text-${numberColor} text-${numberSize === "md" ? "base" : numberSize} flex w-16 items-center justify-center font-bold`,
+                children: index + 1
+              }
+            ),
+            imageUrl && /* @__PURE__ */ jsx("div", { className: "h-24 w-24 flex-shrink-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: item.title || "Product",
+                className: "h-full w-full object-cover"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(ListItemCardContent, { item, ...contentProps }) }),
+            showBadge && item.discount && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(item.discount) }),
+            showFavorite && /* @__PURE__ */ jsx(FavoriteButton, { className: "absolute top-2 right-12 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background" })
+          ]
+        },
+        item.id
+      );
+    }) });
+  }
+  return null;
+}
+var DEFAULT_ITEMS = [];
+function getFeaturedAssetUrl(value) {
+  if (!value) return void 0;
+  if (typeof value === "string") {
+    const isVideo = /\.(mp4|webm|ogg|mov)$/i.test(value);
+    return { url: value, isVideo };
+  }
+  if (typeof value === "object") {
+    const videoUrl = value.videoUrl || value.video_url || value.url;
+    if (videoUrl && /\.(mp4|webm|ogg|mov)$/i.test(videoUrl)) {
+      return { url: videoUrl, isVideo: true };
+    }
+    const imageUrl = value.imageUrl || value.image_url || value.url;
+    if (imageUrl) {
+      return { url: imageUrl, isVideo: false };
+    }
+  }
+  return void 0;
+}
 function ListWidget({
   listType = "unordered",
   scrollAxis = "horizontal",
@@ -117,403 +485,25 @@ function ListWidget({
   className,
   ...props
 }) {
-  const scrollContainerRef = useRef(null);
   const displayItems = maxItems ? items.slice(0, maxItems) : items;
   const hasItems = displayItems.length > 0;
-  const largeNumberSizes = {
-    xs: "8rem",
-    sm: "10rem",
-    md: "12rem",
-    lg: "14rem",
-    xl: "16rem",
-    "2xl": "20rem"
-  };
-  const scrollByAmount = (direction) => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-    const computedGap = parseFloat(getComputedStyle(container).gap) || 0;
-    const scrollAmount = SCROLL_ITEM_WIDTH + computedGap;
-    container.scrollTo({
-      left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
-      behavior: "smooth"
-    });
-  };
-  const renderFeaturedSection = () => {
-    if (!showFeaturedSection) return null;
-    const asset = getFeaturedAssetUrl(featuredAsset);
-    if (!asset) return null;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `relative h-full min-h-[300px] w-full overflow-hidden rounded-${borderRadius}`,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 h-full w-full", children: /* @__PURE__ */ jsx(
-            MediaRenderer,
-            {
-              src: asset.url,
-              mediaType: asset.isVideo ? "video" : "image",
-              alt: featuredTitle || "Featured",
-              objectFit: "cover",
-              autoplay: asset.isVideo,
-              loop: asset.isVideo,
-              muted: asset.isVideo,
-              controls: false
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
-          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-start justify-end p-8", children: [
-            featuredTitle && /* @__PURE__ */ jsx(
-              "h3",
-              {
-                className: `mb-2 font-bold text-white text-${titleSize === "md" ? "base" : titleSize}`,
-                children: featuredTitle
-              }
-            ),
-            featuredSubtitle && /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: `mb-4 text-${featuredSubtitleColor} text-${featuredSubtitleSize === "md" ? "base" : featuredSubtitleSize}`,
-                children: featuredSubtitle
-              }
-            ),
-            featuredButtonText && /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: featuredButtonUrl || "#",
-                className: `bg-white px-6 py-2 font-medium text-foreground transition-opacity hover:opacity-90 rounded-${borderRadius}`,
-                children: featuredButtonText
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  };
-  const renderUnorderedList = () => {
-    const gridClass = getResponsiveGridClass(columns);
-    return /* @__PURE__ */ jsx("div", { className: `grid ${gridClass} gap-${gapValues[gap]}`, children: displayItems.map((item) => {
-      const imageUrl = getImageUrl(item);
-      const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `relative rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md`,
-          children: [
-            showBadge && item.discount && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(item.discount) }),
-            showFavorite && /* @__PURE__ */ jsx("button", { className: "absolute top-2 left-2 z-10 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background", children: /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: "h-5 w-5 text-muted-foreground",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                  }
-                )
-              }
-            ) }),
-            imageUrl && /* @__PURE__ */ jsx("div", { className: `w-full ${aspectRatioClass} overflow-hidden`, children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: item.title || "Product",
-                className: "h-full w-full object-cover"
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: `p-${padding}`, children: [
-              item.title && /* @__PURE__ */ jsx(
-                "h3",
-                {
-                  className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
-                  children: getTextContent(item.title)
-                }
-              ),
-              item.description && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
-                  children: getTextContent(item.description)
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                item.price && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
-                    children: getStringValue(item.price)
-                  }
-                ),
-                item.originalPrice && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
-                    children: getStringValue(item.originalPrice)
-                  }
-                )
-              ] }),
-              showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
-                  children: [
-                    item.qv && /* @__PURE__ */ jsxs("span", { children: [
-                      "QV: ",
-                      getStringValue(item.qv)
-                    ] }),
-                    item.cv && /* @__PURE__ */ jsxs("span", { children: [
-                      "CV: ",
-                      getStringValue(item.cv)
-                    ] })
-                  ]
-                }
-              )
-            ] })
-          ]
-        },
-        item.id
-      );
-    }) });
-  };
-  const renderOrderedList = () => {
-    const isHorizontal = scrollAxis === "horizontal";
-    const isVertical = scrollAxis === "vertical";
-    if (isHorizontal) {
-      return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: scrollContainerRef,
-            className: `flex gap-${gapValues[gap]} scrollbar-hide overflow-x-auto scroll-smooth`,
-            children: displayItems.map((item, index) => {
-              const imageUrl = getImageUrl(item);
-              const aspectRatioClass = getAspectRatioClass(imageAspectRatio);
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: `relative w-[300px] flex-shrink-0`,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: `absolute top-0 left-0 text-${numberColor} z-0 leading-none font-bold opacity-20`,
-                        style: { fontSize: largeNumberSizes[numberSize] },
-                        children: index + 1
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: `relative z-10 ml-20 rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md`,
-                        children: [
-                          showBadge && item.discount && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(item.discount) }),
-                          showFavorite && /* @__PURE__ */ jsx("button", { className: "absolute top-2 left-2 z-10 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background", children: /* @__PURE__ */ jsx(
-                            "svg",
-                            {
-                              className: "h-5 w-5 text-muted-foreground",
-                              fill: "none",
-                              stroke: "currentColor",
-                              viewBox: "0 0 24 24",
-                              children: /* @__PURE__ */ jsx(
-                                "path",
-                                {
-                                  strokeLinecap: "round",
-                                  strokeLinejoin: "round",
-                                  strokeWidth: 2,
-                                  d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                                }
-                              )
-                            }
-                          ) }),
-                          imageUrl && /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              className: `w-full ${aspectRatioClass} overflow-hidden`,
-                              children: /* @__PURE__ */ jsx(
-                                "img",
-                                {
-                                  src: imageUrl,
-                                  alt: item.title || "Product",
-                                  className: "h-full w-full object-cover"
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs("div", { className: `p-${padding}`, children: [
-                            item.title && /* @__PURE__ */ jsx(
-                              "h3",
-                              {
-                                className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
-                                children: getTextContent(item.title)
-                              }
-                            ),
-                            item.description && /* @__PURE__ */ jsx(
-                              "p",
-                              {
-                                className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
-                                children: getTextContent(item.description)
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                              item.price && /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
-                                  children: getStringValue(item.price)
-                                }
-                              ),
-                              item.originalPrice && /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
-                                  children: getStringValue(item.originalPrice)
-                                }
-                              )
-                            ] }),
-                            showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxs(
-                              "div",
-                              {
-                                className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
-                                children: [
-                                  item.qv && /* @__PURE__ */ jsxs("span", { children: [
-                                    "QV: ",
-                                    getStringValue(item.qv)
-                                  ] }),
-                                  item.cv && /* @__PURE__ */ jsxs("span", { children: [
-                                    "CV: ",
-                                    getStringValue(item.cv)
-                                  ] })
-                                ]
-                              }
-                            )
-                          ] })
-                        ]
-                      }
-                    )
-                  ]
-                },
-                item.id
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `absolute inset-x-0 top-1/2 z-20 flex w-full -translate-y-1/2 items-center justify-between px-8`,
-            children: /* @__PURE__ */ jsx(
-              ScrollArrows,
-              {
-                onPrevious: () => scrollByAmount("prev"),
-                onNext: () => scrollByAmount("next")
-              }
-            )
-          }
-        )
-      ] });
-    }
-    if (isVertical) {
-      return /* @__PURE__ */ jsx("div", { className: `flex flex-col gap-${gapValues[gap]}`, children: displayItems.map((item, index) => {
-        const imageUrl = getImageUrl(item);
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `relative flex gap-${gapValues[gap]} rounded-${borderRadius} overflow-hidden bg-background shadow-sm transition-shadow hover:shadow-md ${`p-${padding}`}`,
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `flex-shrink-0 text-${numberColor} text-${numberSize === "md" ? "base" : numberSize} flex w-16 items-center justify-center font-bold`,
-                  children: index + 1
-                }
-              ),
-              imageUrl && /* @__PURE__ */ jsx("div", { className: "h-24 w-24 flex-shrink-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: imageUrl,
-                  alt: item.title || "Product",
-                  className: "h-full w-full object-cover"
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                item.title && /* @__PURE__ */ jsx(
-                  "h3",
-                  {
-                    className: `text-${itemTitleColor} text-${itemTitleSize === "md" ? "base" : itemTitleSize} mb-1 font-semibold`,
-                    children: getTextContent(item.title)
-                  }
-                ),
-                item.description && /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: `text-${descriptionColor} text-${descriptionSize === "md" ? "base" : descriptionSize} mb-2`,
-                    children: getTextContent(item.description)
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  item.price && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: `text-${priceColor} text-${priceSize === "md" ? "base" : priceSize} font-bold`,
-                      children: getStringValue(item.price)
-                    }
-                  ),
-                  item.originalPrice && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: `text-${originalPriceColor} text-${descriptionSize === "md" ? "base" : descriptionSize} line-through`,
-                      children: getStringValue(item.originalPrice)
-                    }
-                  )
-                ] }),
-                showMetaText && (item.qv || item.cv) && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: `mt-2 flex gap-3 text-${metaTextColor} text-${metaTextSize === "md" ? "base" : metaTextSize}`,
-                    children: [
-                      item.qv && /* @__PURE__ */ jsxs("span", { children: [
-                        "QV: ",
-                        getStringValue(item.qv)
-                      ] }),
-                      item.cv && /* @__PURE__ */ jsxs("span", { children: [
-                        "CV: ",
-                        getStringValue(item.cv)
-                      ] })
-                    ]
-                  }
-                )
-              ] }),
-              showBadge && item.discount && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 rounded-md bg-destructive px-2 py-1 text-xs font-bold text-destructive-foreground", children: getStringValue(item.discount) }),
-              showFavorite && /* @__PURE__ */ jsx("button", { className: "absolute top-2 right-12 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-colors hover:bg-background", children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "h-5 w-5 text-muted-foreground",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                    }
-                  )
-                }
-              ) })
-            ]
-          },
-          item.id
-        );
-      }) });
-    }
-    return null;
+  const itemStyleProps = {
+    padding,
+    itemTitleColor,
+    itemTitleSize,
+    descriptionColor,
+    descriptionSize,
+    priceColor,
+    priceSize,
+    originalPriceColor,
+    metaTextColor,
+    metaTextSize,
+    showMetaText,
+    showBadge,
+    showFavorite,
+    borderRadius,
+    imageAspectRatio,
+    gap
   };
   const hasFeaturedAsset = getFeaturedAssetUrl(featuredAsset);
   const shouldShowFeaturedSection = showFeaturedSection && hasFeaturedAsset;
@@ -534,9 +524,54 @@ function ListWidget({
           }
         ),
         !hasItems ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-md border-2 border-dashed border-border bg-muted py-12 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-muted", children: "No items to display" }) }) : shouldShowFeaturedSection ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 @lg:flex-row @lg:gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-full @lg:w-[45%]", children: renderFeaturedSection() }),
-          /* @__PURE__ */ jsx("div", { className: "w-full @lg:w-[55%]", children: listType === "unordered" ? renderUnorderedList() : renderOrderedList() })
-        ] }) : listType === "unordered" ? renderUnorderedList() : renderOrderedList()
+          /* @__PURE__ */ jsx("div", { className: "w-full @lg:w-[45%]", children: /* @__PURE__ */ jsx(
+            FeaturedSection,
+            {
+              borderRadius,
+              titleSize,
+              featuredTitle,
+              featuredSubtitle,
+              featuredButtonText,
+              featuredButtonUrl,
+              featuredSubtitleColor,
+              featuredSubtitleSize,
+              asset: hasFeaturedAsset
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "w-full @lg:w-[55%]", children: listType === "unordered" ? /* @__PURE__ */ jsx(
+            UnorderedList,
+            {
+              items: displayItems,
+              columns,
+              ...itemStyleProps
+            }
+          ) : /* @__PURE__ */ jsx(
+            OrderedList,
+            {
+              items: displayItems,
+              scrollAxis,
+              numberColor,
+              numberSize,
+              ...itemStyleProps
+            }
+          ) })
+        ] }) : listType === "unordered" ? /* @__PURE__ */ jsx(
+          UnorderedList,
+          {
+            items: displayItems,
+            columns,
+            ...itemStyleProps
+          }
+        ) : /* @__PURE__ */ jsx(
+          OrderedList,
+          {
+            items: displayItems,
+            scrollAxis,
+            numberColor,
+            numberSize,
+            ...itemStyleProps
+          }
+        )
       ]
     }
   );
@@ -948,5 +983,5 @@ var listWidgetPropertySchema = {
 };
 
 export { ListWidget, listWidgetPropertySchema };
-//# sourceMappingURL=chunk-3KJRYFS7.js.map
-//# sourceMappingURL=chunk-3KJRYFS7.js.map
+//# sourceMappingURL=chunk-Y657NN2D.js.map
+//# sourceMappingURL=chunk-Y657NN2D.js.map