shared-features 0.1.8 → 0.1.10

package/dist/{index-CLd2pR09.cjs → index-CyHJYPl1.cjs}

@@ -1472,6 +1472,847 @@ function AdBanner({
     }
   );
 }
+const DISMISSED_TOPBAR_KEY = "sf_topbar_dismissed";
+function TopbarAdBanner({
+  placement = "topbar_banner",
+  rotationInterval = 2e4,
+  maxCampaigns = 5,
+  className,
+  style
+}) {
+  const [currentIndex, setCurrentIndex] = react.useState(0);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isDismissed, setIsDismissed] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const trackedImpressions = react.useRef(/* @__PURE__ */ new Set());
+  const timerRef = react.useRef(null);
+  react.useEffect(() => {
+    try {
+      const dismissed = sessionStorage.getItem(DISMISSED_TOPBAR_KEY);
+      if (dismissed === "true") {
+        setIsDismissed(true);
+      }
+    } catch {
+    }
+  }, []);
+  const handleDismiss = react.useCallback(() => {
+    setIsDismissed(true);
+    try {
+      sessionStorage.setItem(DISMISSED_TOPBAR_KEY, "true");
+    } catch {
+    }
+  }, []);
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick
+  } = useCommonFeatures.useCampaigns({ placement, maxCampaigns });
+  react.useEffect(() => {
+    if (campaigns.length === 0) return;
+    const campaign2 = campaigns[currentIndex];
+    if (!campaign2 || trackedImpressions.current.has(campaign2.id)) return;
+    trackedImpressions.current.add(campaign2.id);
+    recordImpression(campaign2);
+  }, [currentIndex, campaigns, recordImpression]);
+  react.useEffect(() => {
+    if (campaigns.length <= 1) return;
+    setProgress(0);
+    const progressInterval = 50;
+    const steps = rotationInterval / progressInterval;
+    let currentStep = 0;
+    timerRef.current = setInterval(() => {
+      currentStep++;
+      setProgress(currentStep / steps * 100);
+      if (currentStep >= steps) {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+          setProgress(0);
+          currentStep = 0;
+          setTimeout(() => setIsAnimating(false), 50);
+        }, 200);
+      }
+    }, progressInterval);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [campaigns.length, rotationInterval, currentIndex]);
+  const handleClick = react.useCallback(
+    (campaign2) => {
+      recordClick(campaign2);
+      const targetUrl = campaign2.customCtaUrl || campaign2.product.url;
+      window.open(targetUrl, "_blank");
+    },
+    [recordClick]
+  );
+  const resetTimer = react.useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    setProgress(0);
+  }, []);
+  const goToPrev = react.useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length, resetTimer]);
+  const goToNext = react.useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length, resetTimer]);
+  if (loading || campaigns.length === 0 || isDismissed) return null;
+  const campaign = campaigns[currentIndex];
+  if (!campaign) return null;
+  const { product } = campaign;
+  const displayTitle = campaign.customTitle || product.name;
+  const displayTagline = campaign.customTagline || product.tagline;
+  const displayCta = campaign.customCta || "Learn More";
+  const displayColor = campaign.customProductColor || product.color || "#3B82F6";
+  const displayIcon = campaign.customIcon || product.icon64 || "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    themes.Box,
+    {
+      className,
+      style: {
+        background: `linear-gradient(135deg, ${displayColor}12 0%, ${displayColor}08 50%, ${displayColor}12 100%)`,
+        borderBottom: `1px solid ${displayColor}30`,
+        position: "relative",
+        height: 100,
+        maxHeight: 100,
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          themes.Box,
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: `radial-gradient(ellipse at 50% 0%, ${displayColor}15 0%, transparent 70%)`,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { style: { height: 3, background: "var(--gray-a3)", position: "relative", zIndex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          themes.Box,
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              height: "100%",
+              width: `${progress}%`,
+              background: `linear-gradient(90deg, ${displayColor}, ${displayColor}cc)`,
+              transition: "width 50ms linear",
+              boxShadow: `0 0 10px ${displayColor}60`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(themes.Container, { size: "4", style: { height: "calc(100% - 3px)" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          themes.Flex,
+          {
+            align: "center",
+            justify: "between",
+            gap: { initial: "2", sm: "4" },
+            style: {
+              height: "100%",
+              padding: "0 16px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "2", align: "center", style: { flexShrink: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.Box,
+                  {
+                    style: {
+                      width: 28,
+                      height: 28,
+                      borderRadius: 6,
+                      background: `${displayColor}20`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 14, color: displayColor })
+                  }
+                ),
+                campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "1",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToPrev,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Previous ad",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                themes.Flex,
+                {
+                  align: "center",
+                  gap: { initial: "2", sm: "3" },
+                  style: {
+                    flex: 1,
+                    minWidth: 0,
+                    opacity: isAnimating ? 0 : 1,
+                    transform: isAnimating ? "translateY(-8px)" : "translateY(0)",
+                    transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      themes.Box,
+                      {
+                        style: {
+                          width: 48,
+                          height: 48,
+                          borderRadius: 10,
+                          background: `linear-gradient(135deg, ${displayColor}25 0%, ${displayColor}15 100%)`,
+                          border: `1.5px solid ${displayColor}35`,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0,
+                          boxShadow: `0 2px 8px ${displayColor}20`
+                        },
+                        dangerouslySetInnerHTML: { __html: displayIcon }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "0", style: { minWidth: 0, flex: 1 }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "2", weight: "bold", style: { lineHeight: 1.3 }, children: displayTitle }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        themes.Text,
+                        {
+                          size: "1",
+                          color: "gray",
+                          style: {
+                            display: "-webkit-box",
+                            WebkitLineClamp: 1,
+                            WebkitBoxOrient: "vertical",
+                            overflow: "hidden",
+                            lineHeight: 1.4
+                          },
+                          children: displayTagline
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      themes.Button,
+                      {
+                        size: "2",
+                        onClick: () => handleClick(campaign),
+                        style: {
+                          background: `linear-gradient(135deg, ${displayColor} 0%, ${displayColor}dd 100%)`,
+                          color: "white",
+                          fontWeight: 600,
+                          fontSize: "13px",
+                          padding: "0 16px",
+                          height: 32,
+                          flexShrink: 0,
+                          boxShadow: `0 2px 8px ${displayColor}40`,
+                          border: "none"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                          displayCta,
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 13 })
+                        ] })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "1", align: "center", style: { flexShrink: 0 }, children: [
+                campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    themes.IconButton,
+                    {
+                      size: "1",
+                      variant: "ghost",
+                      color: "gray",
+                      onClick: goToNext,
+                      style: { cursor: "pointer" },
+                      "aria-label": "Next ad",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { gap: "1", mx: "2", display: { initial: "none", sm: "flex" }, children: campaigns.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                    themes.Box,
+                    {
+                      style: {
+                        width: i === currentIndex ? 16 : 6,
+                        height: 6,
+                        borderRadius: 3,
+                        background: i === currentIndex ? displayColor : "var(--gray-a5)",
+                        cursor: "pointer",
+                        transition: "all 0.2s ease"
+                      },
+                      onClick: () => {
+                        resetTimer();
+                        setCurrentIndex(i);
+                      }
+                    },
+                    i
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "1",
+                    variant: "soft",
+                    color: "gray",
+                    onClick: handleDismiss,
+                    style: { cursor: "pointer", marginLeft: 4 },
+                    "aria-label": "Close banner",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          themes.Flex,
+          {
+            justify: "center",
+            gap: "1",
+            style: {
+              position: "absolute",
+              bottom: 6,
+              left: 0,
+              right: 0
+            },
+            display: { initial: "flex", sm: "none" },
+            children: campaigns.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              themes.Box,
+              {
+                style: {
+                  width: 6,
+                  height: 6,
+                  borderRadius: "50%",
+                  background: i === currentIndex ? displayColor : "var(--gray-a5)",
+                  transition: "background 0.2s ease"
+                }
+              },
+              i
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function AdCarousel({
+  placement = "home_banner",
+  rotationInterval = 2e4,
+  maxCampaigns = 5,
+  className,
+  style
+}) {
+  const [currentIndex, setCurrentIndex] = react.useState(0);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const trackedImpressions = react.useRef(/* @__PURE__ */ new Set());
+  const timerRef = react.useRef(null);
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick
+  } = useCommonFeatures.useCampaigns({ placement, maxCampaigns });
+  react.useEffect(() => {
+    if (campaigns.length === 0) return;
+    const campaign2 = campaigns[currentIndex];
+    if (!campaign2 || trackedImpressions.current.has(campaign2.id)) return;
+    trackedImpressions.current.add(campaign2.id);
+    recordImpression(campaign2);
+  }, [currentIndex, campaigns, recordImpression]);
+  react.useEffect(() => {
+    if (campaigns.length <= 1) return;
+    setProgress(0);
+    const progressInterval = 50;
+    const steps = rotationInterval / progressInterval;
+    let currentStep = 0;
+    timerRef.current = setInterval(() => {
+      currentStep++;
+      setProgress(currentStep / steps * 100);
+      if (currentStep >= steps) {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+          setProgress(0);
+          currentStep = 0;
+          setTimeout(() => setIsAnimating(false), 50);
+        }, 250);
+      }
+    }, progressInterval);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [campaigns.length, rotationInterval, currentIndex]);
+  const handleClick = react.useCallback(
+    (campaign2) => {
+      recordClick(campaign2);
+      const targetUrl = campaign2.customCtaUrl || campaign2.product.url;
+      window.open(targetUrl, "_blank");
+    },
+    [recordClick]
+  );
+  const resetTimer = react.useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    setProgress(0);
+  }, []);
+  const goToPrev = react.useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 250);
+  }, [campaigns.length, resetTimer]);
+  const goToNext = react.useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 250);
+  }, [campaigns.length, resetTimer]);
+  const goToSlide = react.useCallback((index) => {
+    if (index === currentIndex) return;
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex(index);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 250);
+  }, [currentIndex, resetTimer]);
+  if (loading || campaigns.length === 0) return null;
+  const campaign = campaigns[currentIndex];
+  if (!campaign) return null;
+  const { product } = campaign;
+  const displayTitle = campaign.customTitle || product.name;
+  const displayTagline = campaign.customTagline || product.tagline;
+  const displayCta = campaign.customCta || "Learn More";
+  const displayColor = campaign.customProductColor || product.color || "#3B82F6";
+  const displayIcon = campaign.customIcon || product.icon64 || "";
+  const displayFeatures = campaign.customFeatures || product.features || [];
+  const displayDescription = product.description || displayTagline;
+  const getProductTypeLabel = () => {
+    switch (product.type) {
+      case "extension":
+        return "Browser Extension";
+      case "android":
+        return "Android App";
+      case "ios":
+        return "iOS App";
+      case "web":
+        return "Web App";
+      default:
+        return "App";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    themes.Box,
+    {
+      className,
+      style: {
+        padding: "24px 0",
+        ...style
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(themes.Container, { size: "4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        themes.Card,
+        {
+          style: {
+            background: `linear-gradient(145deg, var(--color-background) 0%, ${displayColor}08 100%)`,
+            border: `1px solid ${displayColor}20`,
+            borderRadius: 16,
+            overflow: "hidden",
+            height: 350,
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              themes.Box,
+              {
+                style: {
+                  position: "absolute",
+                  top: -100,
+                  right: -100,
+                  width: 300,
+                  height: 300,
+                  borderRadius: "50%",
+                  background: `radial-gradient(circle, ${displayColor}12 0%, transparent 70%)`,
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              themes.Box,
+              {
+                style: {
+                  position: "absolute",
+                  bottom: -50,
+                  left: -50,
+                  width: 200,
+                  height: 200,
+                  borderRadius: "50%",
+                  background: `radial-gradient(circle, ${displayColor}08 0%, transparent 70%)`,
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { style: { height: 4, background: "var(--gray-a3)", position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              themes.Box,
+              {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  height: "100%",
+                  width: `${progress}%`,
+                  background: `linear-gradient(90deg, ${displayColor} 0%, ${displayColor}cc 100%)`,
+                  transition: "width 50ms linear",
+                  boxShadow: `0 0 12px ${displayColor}50`
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(themes.Box, { style: { height: "calc(100% - 4px)", position: "relative", zIndex: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                themes.Flex,
+                {
+                  direction: { initial: "column", md: "row" },
+                  align: "stretch",
+                  style: { height: "100%" },
+                  children: [
+                    campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                      themes.Flex,
+                      {
+                        align: "center",
+                        justify: "center",
+                        style: { width: 60, flexShrink: 0 },
+                        display: { initial: "none", md: "flex" },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          themes.IconButton,
+                          {
+                            size: "3",
+                            variant: "ghost",
+                            color: "gray",
+                            onClick: goToPrev,
+                            style: {
+                              cursor: "pointer",
+                              width: 44,
+                              height: 44,
+                              borderRadius: 12,
+                              background: "var(--gray-a3)"
+                            },
+                            "aria-label": "Previous",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 24 })
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      themes.Flex,
+                      {
+                        direction: { initial: "column", md: "row" },
+                        align: "center",
+                        gap: { initial: "4", md: "6" },
+                        p: { initial: "4", md: "5" },
+                        style: {
+                          flex: 1,
+                          opacity: isAnimating ? 0 : 1,
+                          transform: isAnimating ? "translateX(-20px) scale(0.98)" : "translateX(0) scale(1)",
+                          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            themes.Flex,
+                            {
+                              direction: "column",
+                              align: "center",
+                              gap: "3",
+                              style: { flexShrink: 0 },
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  themes.Box,
+                                  {
+                                    style: {
+                                      width: 100,
+                                      height: 100,
+                                      borderRadius: 20,
+                                      background: `linear-gradient(145deg, ${displayColor}20 0%, ${displayColor}10 100%)`,
+                                      border: `2px solid ${displayColor}30`,
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      boxShadow: `0 8px 32px ${displayColor}20, inset 0 1px 0 ${displayColor}20`
+                                    },
+                                    dangerouslySetInnerHTML: { __html: displayIcon }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsxs(
+                                  themes.Badge,
+                                  {
+                                    size: "2",
+                                    style: {
+                                      background: `${displayColor}15`,
+                                      color: displayColor,
+                                      fontWeight: 600,
+                                      padding: "4px 12px"
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { size: 12, style: { marginRight: 4 } }),
+                                      getProductTypeLabel()
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            themes.Flex,
+                            {
+                              direction: "column",
+                              gap: "3",
+                              style: { flex: 1, minWidth: 0, textAlign: "left" },
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "2", wrap: "wrap", children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    themes.Text,
+                                    {
+                                      size: { initial: "5", md: "6" },
+                                      weight: "bold",
+                                      style: { lineHeight: 1.2 },
+                                      children: displayTitle
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsxs(
+                                    themes.Flex,
+                                    {
+                                      align: "center",
+                                      gap: "1",
+                                      style: {
+                                        background: `${displayColor}15`,
+                                        padding: "4px 8px",
+                                        borderRadius: 6
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Star, { size: 12, fill: displayColor, color: displayColor }),
+                                        /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "1", weight: "medium", style: { color: displayColor }, children: "Featured" })
+                                      ]
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  themes.Text,
+                                  {
+                                    size: { initial: "2", md: "3" },
+                                    color: "gray",
+                                    style: {
+                                      lineHeight: 1.5,
+                                      display: "-webkit-box",
+                                      WebkitLineClamp: 2,
+                                      WebkitBoxOrient: "vertical",
+                                      overflow: "hidden"
+                                    },
+                                    children: displayDescription
+                                  }
+                                ),
+                                displayFeatures.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                                  themes.Flex,
+                                  {
+                                    gap: { initial: "2", md: "4" },
+                                    wrap: "wrap",
+                                    mt: "1",
+                                    children: displayFeatures.slice(0, 4).map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+                                      themes.Flex,
+                                      {
+                                        align: "center",
+                                        gap: "2",
+                                        style: {
+                                          background: "var(--gray-a3)",
+                                          padding: "6px 12px",
+                                          borderRadius: 8
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsxRuntime.jsx(
+                                            themes.Box,
+                                            {
+                                              style: {
+                                                width: 18,
+                                                height: 18,
+                                                borderRadius: 4,
+                                                background: `${displayColor}20`,
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center"
+                                              },
+                                              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, color: displayColor, strokeWidth: 3 })
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "1", weight: "medium", children: feature })
+                                        ]
+                                      },
+                                      i
+                                    ))
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsxs(
+                                  themes.Flex,
+                                  {
+                                    gap: "3",
+                                    align: "center",
+                                    mt: { initial: "2", md: "3" },
+                                    wrap: "wrap",
+                                    children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        themes.Button,
+                                        {
+                                          size: { initial: "2", md: "3" },
+                                          onClick: () => handleClick(campaign),
+                                          style: {
+                                            background: `linear-gradient(135deg, ${displayColor} 0%, ${displayColor}dd 100%)`,
+                                            color: "white",
+                                            fontWeight: 600,
+                                            padding: "0 24px",
+                                            height: 44,
+                                            boxShadow: `0 4px 16px ${displayColor}40`,
+                                            border: "none",
+                                            cursor: "pointer"
+                                          },
+                                          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                                            displayCta,
+                                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 18 })
+                                          ] })
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        themes.Button,
+                                        {
+                                          size: { initial: "2", md: "3" },
+                                          variant: "ghost",
+                                          onClick: () => handleClick(campaign),
+                                          style: {
+                                            color: displayColor,
+                                            fontWeight: 500,
+                                            cursor: "pointer"
+                                          },
+                                          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                                            "View Details",
+                                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 14 })
+                                          ] })
+                                        }
+                                      )
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                      themes.Flex,
+                      {
+                        align: "center",
+                        justify: "center",
+                        style: { width: 60, flexShrink: 0 },
+                        display: { initial: "none", md: "flex" },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          themes.IconButton,
+                          {
+                            size: "3",
+                            variant: "ghost",
+                            color: "gray",
+                            onClick: goToNext,
+                            style: {
+                              cursor: "pointer",
+                              width: 44,
+                              height: 44,
+                              borderRadius: 12,
+                              background: "var(--gray-a3)"
+                            },
+                            "aria-label": "Next",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 24 })
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
+                themes.Flex,
+                {
+                  justify: "center",
+                  align: "center",
+                  gap: "3",
+                  style: {
+                    position: "absolute",
+                    bottom: 16,
+                    left: 0,
+                    right: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "block", md: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      themes.IconButton,
+                      {
+                        size: "1",
+                        variant: "soft",
+                        color: "gray",
+                        onClick: goToPrev,
+                        style: { cursor: "pointer" },
+                        "aria-label": "Previous",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { gap: "2", children: campaigns.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                      themes.Box,
+                      {
+                        onClick: () => goToSlide(i),
+                        style: {
+                          width: i === currentIndex ? 32 : 10,
+                          height: 10,
+                          borderRadius: 5,
+                          background: i === currentIndex ? `linear-gradient(90deg, ${c.product?.color || displayColor}, ${c.product?.color || displayColor}cc)` : "var(--gray-a4)",
+                          cursor: "pointer",
+                          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                          boxShadow: i === currentIndex ? `0 2px 8px ${c.product?.color || displayColor}40` : "none"
+                        }
+                      },
+                      i
+                    )) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "block", md: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      themes.IconButton,
+                      {
+                        size: "1",
+                        variant: "soft",
+                        color: "gray",
+                        onClick: goToNext,
+                        style: { cursor: "pointer" },
+                        "aria-label": "Next",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
 const TYPE_STYLES = {
   info: {
     icon: lucideReact.Info,
@@ -2082,6 +2923,7 @@ function FooterSection({ showContact = true, showSocialLinks = true, showAddress
   ] });
 }
 exports.AdBanner = AdBanner;
+exports.AdCarousel = AdCarousel;
 exports.AdModal = AdModal;
 exports.AdPanel = AdPanel;
 exports.AdSlider = AdSlider;
@@ -2108,7 +2950,8 @@ exports.SocialLinksBar = SocialLinksBar;
 exports.TaglineVariant = TaglineVariant;
 exports.TestimonialVariant = TestimonialVariant;
 exports.TestimonialsGrid = TestimonialsGrid;
+exports.TopbarAdBanner = TopbarAdBanner;
 exports.VideoVariant = VideoVariant;
 exports.getLargePanelVariant = getLargePanelVariant;
 exports.getSmallPanelVariant = getSmallPanelVariant;
-//# sourceMappingURL=index-CLd2pR09.cjs.map
+//# sourceMappingURL=index-CyHJYPl1.cjs.map