shared-features 0.0.1 → 0.0.2

package/dist/AdBanner-z1osYgog.js

@@ -0,0 +1,1428 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback, useState } from "react";
+import { Box, IconButton, Flex, Text, Button, Card, Link, Badge, Dialog, Heading, Checkbox, Grid } from "@radix-ui/themes";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { a as useCampaign, b as useOneTimeAdModal, c as useUpdateAdModal, u as useCampaigns } from "./useCampaigns-osYDc6WC.js";
+import { ExternalLink, X, Check, Sparkles, Gift, Quote, Play, ChevronLeft, ChevronRight } from "lucide-react";
+import { d as getConfig } from "./analytics-Bbmodnm_.js";
+function AdPanel({
+  placement,
+  variant: _variant = "small_panel_2",
+  className
+}) {
+  const { campaign, loading, error, recordImpression, recordClick, recordClose } = useCampaign({ placement });
+  const hasRecordedImpression = useRef(false);
+  useEffect(() => {
+    if (campaign && !hasRecordedImpression.current) {
+      hasRecordedImpression.current = true;
+      recordImpression(campaign);
+    }
+  }, [campaign, recordImpression]);
+  if (loading || error || !campaign) {
+    return null;
+  }
+  const handleClick = () => {
+    recordClick(campaign);
+    const url = campaign.customCtaUrl || campaign.product.url;
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+  const handleClose = () => {
+    recordClose(campaign);
+  };
+  const title = campaign.customTitle || campaign.product.name;
+  const tagline = campaign.customTagline || campaign.product.tagline;
+  const ctaText = campaign.customCta || "Learn More";
+  const color = campaign.customProductColor || campaign.product.color;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      style: {
+        border: `1px solid ${color}`,
+        borderRadius: "8px",
+        padding: "12px",
+        backgroundColor: `${color}10`,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "1",
+            variant: "ghost",
+            onClick: handleClose,
+            style: {
+              position: "absolute",
+              top: "4px",
+              right: "4px"
+            },
+            children: /* @__PURE__ */ jsx(Cross2Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+            campaign.product.icon64 && /* @__PURE__ */ jsx(
+              Box,
+              {
+                dangerouslySetInnerHTML: { __html: campaign.product.icon64 },
+                style: { width: 32, height: 32 }
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { weight: "bold", size: "3", style: { color }, children: title })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: tagline }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "2",
+              onClick: handleClick,
+              style: { backgroundColor: color },
+              children: ctaText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function getDisplayValues$1(campaign) {
+  const isCustomProduct = !campaign.product.icon64 && campaign.customIcon;
+  return {
+    displayTitle: campaign.customTitle || campaign.product.name,
+    displayTagline: campaign.customTagline || campaign.product.tagline,
+    displayCta: campaign.customCta || "Learn More",
+    displayUrl: campaign.customCtaUrl || campaign.product.url,
+    displayIcon: campaign.customIcon || campaign.product.icon64 || "",
+    displayColor: campaign.customProductColor || campaign.product.color || "#3B82F6",
+    displayFeatures: campaign.customFeatures || campaign.product.features || [],
+    isCustomProduct
+  };
+}
+function MinimalVariant({ campaign, onCTAClick, onClose }) {
+  const { displayTitle, displayCta, displayUrl, displayIcon, displayColor } = getDisplayValues$1(campaign);
+  return /* @__PURE__ */ jsx(Card, { size: "1", children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", gap: "3", p: "2", children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            width: 32,
+            height: 32,
+            borderRadius: "var(--radius-2)",
+            background: `color-mix(in srgb, ${displayColor} 15%, transparent)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          dangerouslySetInnerHTML: { __html: displayIcon }
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "2", weight: "medium", children: displayTitle })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: displayUrl,
+          target: "_blank",
+          onClick: onCTAClick,
+          style: { textDecoration: "none" },
+          children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
+            /* @__PURE__ */ jsx(Text, { size: "2", color: "blue", children: displayCta }),
+            /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "1", color: "gray", onClick: onClose, children: /* @__PURE__ */ jsx(X, { size: 14 }) })
+    ] })
+  ] }) });
+}
+function TaglineVariant({ campaign, onCTAClick, onClose }) {
+  const { displayTitle, displayTagline, displayCta, displayUrl, displayIcon, displayColor } = getDisplayValues$1(campaign);
+  return /* @__PURE__ */ jsx(Card, { size: "1", children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", gap: "3", p: "3", children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            width: 40,
+            height: 40,
+            borderRadius: "var(--radius-2)",
+            background: `color-mix(in srgb, ${displayColor} 15%, transparent)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0
+          },
+          dangerouslySetInnerHTML: { __html: displayIcon }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: displayTitle }),
+        /* @__PURE__ */ jsx(Text, { size: "1", color: "gray", children: displayTagline })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "1",
+          style: { background: displayColor },
+          onClick: () => {
+            onCTAClick?.();
+            window.open(displayUrl, "_blank");
+          },
+          children: displayCta
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "1", color: "gray", onClick: onClose, children: /* @__PURE__ */ jsx(X, { size: 14 }) })
+    ] })
+  ] }) });
+}
+function FeaturesVariant({ campaign, onCTAClick, onClose }) {
+  const { displayTitle, displayCta, displayUrl, displayIcon, displayColor, displayFeatures } = getDisplayValues$1(campaign);
+  const features = displayFeatures.slice(0, 2);
+  return /* @__PURE__ */ jsx(Card, { size: "1", children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", gap: "3", p: "3", children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            width: 40,
+            height: 40,
+            borderRadius: "var(--radius-2)",
+            background: `color-mix(in srgb, ${displayColor} 15%, transparent)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0
+          },
+          dangerouslySetInnerHTML: { __html: displayIcon }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", mb: "1", children: displayTitle }),
+        /* @__PURE__ */ jsx(Flex, { gap: "1", wrap: "wrap", children: features.map((feature, i) => /* @__PURE__ */ jsxs(Badge, { size: "1", variant: "soft", color: "gray", children: [
+          /* @__PURE__ */ jsx(Check, { size: 10, style: { marginRight: 2 } }),
+          feature
+        ] }, i)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "1",
+          style: { background: displayColor },
+          onClick: () => {
+            onCTAClick?.();
+            window.open(displayUrl, "_blank");
+          },
+          children: displayCta
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "1", color: "gray", onClick: onClose, children: /* @__PURE__ */ jsx(X, { size: 14 }) })
+    ] })
+  ] }) });
+}
+function GradientVariant({ campaign, onCTAClick, onClose }) {
+  const { displayTitle, displayTagline, displayCta, displayUrl, displayIcon, displayColor } = getDisplayValues$1(campaign);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        background: `linear-gradient(135deg, ${displayColor} 0%, color-mix(in srgb, ${displayColor} 80%, black) 100%)`,
+        borderRadius: "var(--radius-3)",
+        padding: "var(--space-3)",
+        color: "white"
+      },
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", gap: "3", children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: {
+                width: 40,
+                height: 40,
+                borderRadius: "var(--radius-2)",
+                background: "rgba(255, 255, 255, 0.2)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  dangerouslySetInnerHTML: { __html: displayIcon },
+                  style: {
+                    color: "white"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", style: { color: "white" }, children: displayTitle }),
+            /* @__PURE__ */ jsx(Text, { size: "1", style: { color: "rgba(255, 255, 255, 0.8)" }, children: displayTagline })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "1",
+              variant: "soft",
+              style: {
+                background: "white",
+                color: displayColor
+              },
+              onClick: () => {
+                onCTAClick?.();
+                window.open(displayUrl, "_blank");
+              },
+              children: displayCta
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "1",
+              onClick: onClose,
+              style: { color: "rgba(255, 255, 255, 0.8)" },
+              children: /* @__PURE__ */ jsx(X, { size: 14 })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function CardVariant({ campaign, onCTAClick, onClose }) {
+  const { displayTitle, displayTagline, displayCta, displayUrl, displayIcon, displayColor } = getDisplayValues$1(campaign);
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      size: "2",
+      style: {
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+        transition: "all 0.2s ease",
+        border: `1px solid ${displayColor}20`
+      },
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", p: "1", children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
+            /* @__PURE__ */ jsx(Sparkles, { size: 14, color: displayColor }),
+            /* @__PURE__ */ jsx(Text, { size: "1", color: "gray", weight: "medium", children: "RECOMMENDED" })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "1", color: "gray", onClick: onClose, children: /* @__PURE__ */ jsx(X, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: {
+                width: 48,
+                height: 48,
+                borderRadius: "var(--radius-3)",
+                background: `color-mix(in srgb, ${displayColor} 15%, transparent)`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              dangerouslySetInnerHTML: { __html: displayIcon }
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: displayTitle }),
+            /* @__PURE__ */ jsx(Text, { size: "1", color: "gray", children: displayTagline })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "2",
+            style: { background: displayColor, width: "100%" },
+            onClick: () => {
+              onCTAClick?.();
+              window.open(displayUrl, "_blank");
+            },
+            children: [
+              displayCta,
+              /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+const SMALL_PANEL_VARIANTS = {
+  small_panel_1: MinimalVariant,
+  small_panel_2: TaglineVariant,
+  small_panel_3: FeaturesVariant,
+  small_panel_4: GradientVariant,
+  small_panel_5: CardVariant
+};
+function getSmallPanelVariant(variantName) {
+  return SMALL_PANEL_VARIANTS[variantName] || TaglineVariant;
+}
+function AdSlider({
+  placement = "footer_slider",
+  className,
+  style
+}) {
+  const hasTrackedImpression = useRef(false);
+  const {
+    campaign,
+    loading,
+    recordImpression,
+    recordClick,
+    recordClose
+  } = useCampaign({ placement });
+  useEffect(() => {
+    if (campaign && !hasTrackedImpression.current) {
+      hasTrackedImpression.current = true;
+      recordImpression(campaign);
+    }
+  }, [campaign, recordImpression]);
+  const handleCTAClick = useCallback(() => {
+    if (!campaign) return;
+    recordClick(campaign);
+  }, [campaign, recordClick]);
+  const handleClose = useCallback(() => {
+    if (!campaign) return;
+    recordClose(campaign);
+  }, [campaign, recordClose]);
+  if (loading || !campaign) {
+    return null;
+  }
+  const variantName = campaign.variant || "small_panel_2";
+  const VariantComponent = getSmallPanelVariant(variantName);
+  return /* @__PURE__ */ jsx(Box, { className, style, children: /* @__PURE__ */ jsx(
+    VariantComponent,
+    {
+      campaign,
+      onCTAClick: handleCTAClick,
+      onClose: handleClose
+    }
+  ) });
+}
+function AdModal({
+  placement = "onetime_modal",
+  onClose,
+  welcomeTitle,
+  welcomeDescription
+}) {
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+  const hasTrackedImpression = useRef(false);
+  const config = getConfig();
+  const { shouldShow, markAsShown } = useOneTimeAdModal();
+  const {
+    campaign,
+    loading,
+    recordImpression,
+    recordClick,
+    recordClose
+  } = useCampaign({ placement });
+  useEffect(() => {
+    if (shouldShow && campaign && !hasTrackedImpression.current) {
+      hasTrackedImpression.current = true;
+      recordImpression(campaign);
+    }
+  }, [shouldShow, campaign, recordImpression]);
+  const handleCTAClick = useCallback(() => {
+    if (!campaign) return;
+    recordClick(campaign);
+    const targetUrl = campaign.customCtaUrl || campaign.product.url;
+    window.open(targetUrl, "_blank");
+  }, [campaign, recordClick]);
+  const handleClose = useCallback(() => {
+    if (campaign) {
+      recordClose(campaign);
+    }
+    markAsShown();
+    onClose?.();
+  }, [campaign, recordClose, markAsShown, onClose]);
+  if (!shouldShow || loading) {
+    return null;
+  }
+  if (!campaign) {
+    const defaultTitle = welcomeTitle || `Welcome to ${config.projectName}!`;
+    const defaultDesc = welcomeDescription || "Discover amazing features and tools at your fingertips.";
+    return /* @__PURE__ */ jsx(Dialog.Root, { open: true, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxs(Dialog.Content, { style: { maxWidth: 450 }, children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ jsx(Gift, { size: 24 }),
+        defaultTitle
+      ] }) }),
+      /* @__PURE__ */ jsx(Dialog.Description, { size: "2", mb: "4", children: defaultDesc }),
+      /* @__PURE__ */ jsx(Flex, { gap: "3", mt: "4", justify: "end", children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "soft", color: "gray", children: "Start Exploring" }) }) })
+    ] }) });
+  }
+  const { product } = campaign;
+  const displayTitle = campaign.customTitle || product.name;
+  const displayTagline = campaign.customTagline || product.tagline;
+  const displayDescription = campaign.customDescription || product.description;
+  const displayCta = campaign.customCta || "Learn More";
+  const displayIcon = campaign.customIcon || product.icon128 || product.icon64 || "";
+  const displayColor = campaign.customProductColor || product.color || "#3B82F6";
+  const displayFeatures = campaign.customFeatures || product.features || [];
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: true, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxs(Dialog.Content, { style: { maxWidth: 500 }, children: [
+    /* @__PURE__ */ jsx(Flex, { justify: "end", mb: "2", children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "1", color: "gray", children: /* @__PURE__ */ jsx(X, { size: 16 }) }) }) }),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", gap: "4", p: "4", style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            width: 96,
+            height: 96,
+            borderRadius: "var(--radius-4)",
+            background: `color-mix(in srgb, ${displayColor} 15%, transparent)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          dangerouslySetInnerHTML: { __html: displayIcon }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Heading, { size: "5", weight: "bold", mb: "2", children: displayTitle }),
+        /* @__PURE__ */ jsx(Text, { size: "3", color: "gray", children: displayTagline })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", style: { maxWidth: 350, lineHeight: 1.6 }, children: displayDescription }),
+      /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: "2", justify: "center", children: displayFeatures.slice(0, 4).map((feature, i) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            padding: "var(--space-1) var(--space-2)",
+            borderRadius: "var(--radius-2)",
+            background: "var(--gray-a3)",
+            fontSize: "var(--font-size-1)"
+          },
+          children: feature
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "3",
+          style: { background: displayColor, marginTop: "var(--space-2)" },
+          onClick: handleCTAClick,
+          children: [
+            displayCta,
+            /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", mt: "2", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: dontShowAgain,
+            onCheckedChange: (checked) => setDontShowAgain(checked === true)
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "1", color: "gray", children: "Don't show this again" })
+      ] })
+    ] })
+  ] }) });
+}
+function getDisplayValues(campaign) {
+  const isCustomProduct = !campaign.product.icon64 && campaign.customIcon;
+  return {
+    displayTitle: campaign.customTitle || campaign.product.name,
+    displayTagline: campaign.customTagline || campaign.product.tagline,
+    displayDescription: campaign.customDescription || campaign.product.description,
+    displayCta: campaign.customCta || "Learn More",
+    displayUrl: campaign.customCtaUrl || campaign.product.url,
+    displayIcon64: campaign.customIcon || campaign.product.icon64 || "",
+    displayIcon128: campaign.customIcon || campaign.product.icon128 || campaign.product.icon64 || "",
+    displayColor: campaign.customProductColor || campaign.product.color || "#3B82F6",
+    displayFeatures: campaign.customFeatures || campaign.product.features || [],
+    isCustomProduct
+  };
+}
+const DEFAULT_TESTIMONIALS = {
+  "video-controls-plus": '"Finally, I have complete control over video playback. The keyboard shortcuts save me so much time!"',
+  "ztools-web": '"300+ tools in one place. I use it daily for encoding, formatting, and data conversion tasks."',
+  "ztools-extension": '"Quick access to all my favorite tools right from the browser. Super convenient!"',
+  "pregnancy-pal-android": '"The weekly updates and kick counter are amazing. Best pregnancy tracking app!"',
+  "pregnancy-pal-web": '"Love being able to access my pregnancy data from any device. The sync is seamless."',
+  "lab-system-web": '"Streamlined our entire lab workflow. Sample tracking has never been easier."'
+};
+const DEFAULT_COMPARISONS = {
+  "video-controls-plus": {
+    before: ["Limited playback control", "No keyboard shortcuts", "Manual ad skipping", "No speed control"],
+    after: ["Full playback control", "Custom shortcuts", "Auto ad skip", "0.1x - 16x speed"]
+  },
+  "ztools-web": {
+    before: ["Multiple websites", "Scattered tools", "No offline access", "Ads everywhere"],
+    after: ["One destination", "300+ tools", "Works offline", "Ad-free experience"]
+  },
+  "ztools-extension": {
+    before: ["Open new tabs", "Search for tools", "Copy/paste repeatedly", "Time wasted"],
+    after: ["Instant access", "Quick search", "One-click actions", "Time saved"]
+  },
+  "pregnancy-pal-android": {
+    before: ["Paper tracking", "Forget updates", "Manual counting", "Scattered info"],
+    after: ["Digital diary", "Weekly reminders", "Auto tracking", "All in one app"]
+  },
+  "pregnancy-pal-web": {
+    before: ["Phone only", "No backup", "Limited access", "Data silos"],
+    after: ["Any device", "Cloud sync", "Always available", "Unified data"]
+  },
+  "lab-system-web": {
+    before: ["Paper records", "Manual tracking", "Error prone", "Slow reports"],
+    after: ["Digital records", "Auto tracking", "Accurate data", "Instant reports"]
+  }
+};
+function HeroVariant({
+  campaign,
+  onCTAClick,
+  showIndicator,
+  currentIndex,
+  totalCount
+}) {
+  const { displayTitle, displayTagline, displayDescription, displayCta, displayUrl, displayIcon128, displayColor } = getDisplayValues(campaign);
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", gap: "4", p: "5", style: { textAlign: "center" }, children: [
+    showIndicator && currentIndex !== void 0 && totalCount !== void 0 && /* @__PURE__ */ jsxs(Text, { size: "1", color: "gray", style: { position: "absolute", top: 16, right: 16 }, children: [
+      currentIndex + 1,
+      " / ",
+      totalCount
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: {
+          width: 80,
+          height: 80,
+          borderRadius: "var(--radius-4)",
+          background: `color-mix(in srgb, ${displayColor} 15%, transparent)`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        dangerouslySetInnerHTML: { __html: displayIcon128 }
+      }
+    ),
+    /* @__PURE__ */ jsx(Heading, { size: "5", weight: "bold", children: displayTitle }),
+    /* @__PURE__ */ jsx(Text, { size: "3", color: "gray", children: displayTagline }),
+    /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", style: { maxWidth: 300, lineHeight: 1.6 }, children: displayDescription }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "3",
+        style: { background: displayColor, marginTop: "var(--space-2)" },
+        onClick: () => {
+          onCTAClick?.();
+          window.open(displayUrl, "_blank");
+        },
+        children: [
+          displayCta,
+          /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+        ]
+      }
+    )
+  ] });
+}
+function FeatureGridVariant({
+  campaign,
+  onCTAClick,
+  showIndicator,
+  currentIndex,
+  totalCount
+}) {
+  const { displayTitle, displayCta, displayUrl, displayIcon64, displayColor, displayFeatures } = getDisplayValues(campaign);
+  const features = displayFeatures.slice(0, 4);
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", p: "5", children: [
+    showIndicator && currentIndex !== void 0 && totalCount !== void 0 && /* @__PURE__ */ jsxs(Text, { size: "1", color: "gray", style: { position: "absolute", top: 16, right: 16 }, children: [
+      currentIndex + 1,
+      " / ",
+      totalCount
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            width: 48,
+            height: 48,
+            borderRadius: "var(--radius-3)",
+            background: `color-mix(in srgb, ${displayColor} 15%, transparent)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0
+          },
+          dangerouslySetInnerHTML: { __html: displayIcon64 }
+        }
+      ),
+      /* @__PURE__ */ jsx(Heading, { size: "4", weight: "bold", children: displayTitle })
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { columns: "2", gap: "3", children: features.map((feature, i) => /* @__PURE__ */ jsx(Card, { size: "1", style: { background: "var(--gray-a2)" }, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", p: "2", children: [
+      /* @__PURE__ */ jsx(
+        Flex,
+        {
+          align: "center",
+          justify: "center",
+          style: {
+            width: 24,
+            height: 24,
+            borderRadius: "50%",
+            background: displayColor,
+            color: "white",
+            fontSize: 12,
+            fontWeight: "bold",
+            flexShrink: 0
+          },
+          children: i + 1
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "2", children: feature })
+    ] }) }, i)) }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "3",
+        style: { background: displayColor, width: "100%" },
+        onClick: () => {
+          onCTAClick?.();
+          window.open(displayUrl, "_blank");
+        },
+        children: [
+          displayCta,
+          /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+        ]
+      }
+    )
+  ] });
+}
+function TestimonialVariant({
+  campaign,
+  onCTAClick,
+  showIndicator,
+  currentIndex,
+  totalCount
+}) {
+  const { product } = campaign;
+  const { displayTitle, displayTagline, displayCta, displayUrl, displayIcon64, displayColor } = getDisplayValues(campaign);
+  const quote = DEFAULT_TESTIMONIALS[product.id] || '"An amazing tool that makes my work easier every day."';
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", p: "5", style: { background: "var(--gray-a2)", borderRadius: "var(--radius-3)" }, children: [
+    showIndicator && currentIndex !== void 0 && totalCount !== void 0 && /* @__PURE__ */ jsxs(Text, { size: "1", color: "gray", style: { position: "absolute", top: 16, right: 16 }, children: [
+      currentIndex + 1,
+      " / ",
+      totalCount
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { style: { position: "relative", padding: "var(--space-3)" }, children: [
+      /* @__PURE__ */ jsx(
+        Quote,
+        {
+          size: 32,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: "50%",
+            transform: "translateX(-50%)",
+            opacity: 0.15,
+            color: displayColor
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "3", style: { fontStyle: "italic", textAlign: "center", lineHeight: 1.6 }, children: quote }),
+      /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", style: { textAlign: "center", marginTop: "var(--space-2)" }, children: "— Happy User" })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { size: "1", children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", p: "3", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            width: 48,
+            height: 48,
+            borderRadius: "var(--radius-3)",
+            background: `color-mix(in srgb, ${displayColor} 15%, transparent)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0
+          },
+          dangerouslySetInnerHTML: { __html: displayIcon64 }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: displayTitle }),
+        /* @__PURE__ */ jsx(Text, { size: "1", color: "gray", children: displayTagline })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "3",
+        style: { background: displayColor, width: "100%" },
+        onClick: () => {
+          onCTAClick?.();
+          window.open(displayUrl, "_blank");
+        },
+        children: [
+          displayCta,
+          /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+        ]
+      }
+    )
+  ] });
+}
+function ComparisonVariant({
+  campaign,
+  onCTAClick,
+  showIndicator,
+  currentIndex,
+  totalCount
+}) {
+  const { product } = campaign;
+  const { displayTitle, displayCta, displayUrl, displayIcon64, displayColor } = getDisplayValues(campaign);
+  const comparison = DEFAULT_COMPARISONS[product.id] || {
+    before: ["Old way", "Manual process", "Time consuming", "Limited features"],
+    after: ["Better way", "Automated", "Fast & easy", "Full features"]
+  };
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", p: "5", children: [
+    showIndicator && currentIndex !== void 0 && totalCount !== void 0 && /* @__PURE__ */ jsxs(Text, { size: "1", color: "gray", style: { position: "absolute", top: 16, right: 16 }, children: [
+      currentIndex + 1,
+      " / ",
+      totalCount
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            width: 48,
+            height: 48,
+            borderRadius: "var(--radius-3)",
+            background: `color-mix(in srgb, ${displayColor} 15%, transparent)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0
+          },
+          dangerouslySetInnerHTML: { __html: displayIcon64 }
+        }
+      ),
+      /* @__PURE__ */ jsx(Heading, { size: "4", weight: "bold", children: displayTitle })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { gap: "3", children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          style: {
+            flex: 1,
+            padding: "var(--space-3)",
+            borderRadius: "var(--radius-2)",
+            background: "rgba(239, 68, 68, 0.1)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Text, { size: "1", weight: "bold", color: "red", mb: "2", style: { textTransform: "uppercase" }, children: "Before" }),
+            comparison.before.map((item, i) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", mb: "1", children: [
+              /* @__PURE__ */ jsx(X, { size: 12, color: "var(--red-9)" }),
+              /* @__PURE__ */ jsx(Text, { size: "1", children: item })
+            ] }, i))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          style: {
+            flex: 1,
+            padding: "var(--space-3)",
+            borderRadius: "var(--radius-2)",
+            background: "rgba(16, 185, 129, 0.1)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Text, { size: "1", weight: "bold", color: "green", mb: "2", style: { textTransform: "uppercase" }, children: "After" }),
+            comparison.after.map((item, i) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", mb: "1", children: [
+              /* @__PURE__ */ jsx(Check, { size: 12, color: "var(--green-9)" }),
+              /* @__PURE__ */ jsx(Text, { size: "1", children: item })
+            ] }, i))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "3",
+        style: { background: displayColor, width: "100%" },
+        onClick: () => {
+          onCTAClick?.();
+          window.open(displayUrl, "_blank");
+        },
+        children: [
+          displayCta,
+          /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+        ]
+      }
+    )
+  ] });
+}
+function VideoVariant({
+  campaign,
+  onCTAClick,
+  showIndicator,
+  currentIndex,
+  totalCount
+}) {
+  const { displayTitle, displayTagline, displayCta, displayUrl, displayIcon128, displayColor } = getDisplayValues(campaign);
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", gap: "4", p: "5", style: { textAlign: "center" }, children: [
+    showIndicator && currentIndex !== void 0 && totalCount !== void 0 && /* @__PURE__ */ jsxs(Text, { size: "1", color: "gray", style: { position: "absolute", top: 16, right: 16 }, children: [
+      currentIndex + 1,
+      " / ",
+      totalCount
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: {
+          position: "relative",
+          width: 140,
+          height: 140,
+          borderRadius: "var(--radius-4)",
+          background: `linear-gradient(135deg, color-mix(in srgb, ${displayColor} 20%, transparent), color-mix(in srgb, ${displayColor} 40%, transparent))`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: {
+                animation: "shared-features-pulse 2s ease-in-out infinite"
+              },
+              dangerouslySetInnerHTML: { __html: displayIcon128 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              align: "center",
+              justify: "center",
+              style: {
+                position: "absolute",
+                width: 56,
+                height: 56,
+                borderRadius: "50%",
+                background: "rgba(255, 255, 255, 0.95)",
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
+                cursor: "pointer",
+                transition: "transform 0.2s ease"
+              },
+              onClick: () => {
+                onCTAClick?.();
+                window.open(displayUrl, "_blank");
+              },
+              children: /* @__PURE__ */ jsx(Play, { size: 24, fill: displayColor, color: displayColor })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Heading, { size: "5", weight: "bold", children: displayTitle }),
+    /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: displayTagline }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "3",
+        style: { background: displayColor, marginTop: "var(--space-2)" },
+        onClick: () => {
+          onCTAClick?.();
+          window.open(displayUrl, "_blank");
+        },
+        children: [
+          displayCta,
+          /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes shared-features-pulse {
+          0%, 100% { transform: scale(1); }
+          50% { transform: scale(1.1); }
+        }
+      ` })
+  ] });
+}
+const LARGE_PANEL_VARIANTS = {
+  large_slider_1: HeroVariant,
+  large_slider_2: FeatureGridVariant,
+  large_slider_3: TestimonialVariant,
+  large_slider_4: ComparisonVariant,
+  large_slider_5: VideoVariant
+};
+function getLargePanelVariant(variantName) {
+  return LARGE_PANEL_VARIANTS[variantName] || HeroVariant;
+}
+function AdUpdateModal({
+  placement = "update_modal",
+  maxCampaigns = 5,
+  autoAdvanceInterval = 5e3,
+  onClose
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const autoAdvanceRef = useRef(null);
+  const trackedImpressions = useRef(/* @__PURE__ */ new Set());
+  const { shouldShow, currentVersion, markAsShown } = useUpdateAdModal();
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick,
+    recordClose
+  } = useCampaigns({ placement, maxCampaigns });
+  useEffect(() => {
+    if (shouldShow && campaigns.length > 0 && currentIndex < campaigns.length) {
+      const campaign = campaigns[currentIndex];
+      if (campaign && !trackedImpressions.current.has(campaign.id)) {
+        trackedImpressions.current.add(campaign.id);
+        recordImpression(campaign);
+      }
+    }
+  }, [shouldShow, campaigns, currentIndex, recordImpression]);
+  useEffect(() => {
+    if (!shouldShow || campaigns.length <= 1 || autoAdvanceInterval <= 0) return;
+    autoAdvanceRef.current = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+    }, autoAdvanceInterval);
+    return () => {
+      if (autoAdvanceRef.current) {
+        clearInterval(autoAdvanceRef.current);
+      }
+    };
+  }, [shouldShow, campaigns.length, autoAdvanceInterval]);
+  const resetAutoAdvance = useCallback(() => {
+    if (autoAdvanceRef.current) {
+      clearInterval(autoAdvanceRef.current);
+    }
+    if (autoAdvanceInterval > 0 && campaigns.length > 1) {
+      autoAdvanceRef.current = setInterval(() => {
+        setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+      }, autoAdvanceInterval);
+    }
+  }, [autoAdvanceInterval, campaigns.length]);
+  const goToPrevious = useCallback(() => {
+    setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
+    resetAutoAdvance();
+  }, [campaigns.length, resetAutoAdvance]);
+  const goToNext = useCallback(() => {
+    setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+    resetAutoAdvance();
+  }, [campaigns.length, resetAutoAdvance]);
+  const goToSlide = useCallback(
+    (index) => {
+      setCurrentIndex(index);
+      resetAutoAdvance();
+    },
+    [resetAutoAdvance]
+  );
+  useEffect(() => {
+    if (!shouldShow) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft") {
+        goToPrevious();
+      } else if (e.key === "ArrowRight") {
+        goToNext();
+      } else if (e.key === "Escape") {
+        handleClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [shouldShow, goToPrevious, goToNext]);
+  const handleCTAClick = useCallback(() => {
+    const campaign = campaigns[currentIndex];
+    if (!campaign) return;
+    recordClick(campaign);
+  }, [campaigns, currentIndex, recordClick]);
+  const handleClose = useCallback(() => {
+    campaigns.forEach((campaign) => {
+      recordClose(campaign);
+    });
+    markAsShown();
+    onClose?.();
+  }, [campaigns, recordClose, markAsShown, onClose]);
+  if (!shouldShow || loading || campaigns.length === 0) {
+    return null;
+  }
+  const currentCampaign = campaigns[currentIndex];
+  if (!currentCampaign) return null;
+  const variantName = currentCampaign.variant || "large_slider_1";
+  const VariantComponent = getLargePanelVariant(variantName);
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: true, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxs(
+    Dialog.Content,
+    {
+      style: {
+        maxWidth: 550,
+        padding: 0,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            align: "center",
+            justify: "between",
+            p: "3",
+            style: {
+              borderBottom: "1px solid var(--gray-a5)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
+                "What's New in v",
+                currentVersion
+              ] }),
+              /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "1", color: "gray", children: /* @__PURE__ */ jsx(X, { size: 16 }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { style: { position: "relative", minHeight: 350 }, children: [
+          /* @__PURE__ */ jsx(
+            VariantComponent,
+            {
+              campaign: currentCampaign,
+              onCTAClick: handleCTAClick,
+              showIndicator: campaigns.length > 1,
+              currentIndex,
+              totalCount: campaigns.length
+            }
+          ),
+          campaigns.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "soft",
+                size: "2",
+                style: {
+                  position: "absolute",
+                  left: 8,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  opacity: 0.8
+                },
+                onClick: goToPrevious,
+                children: /* @__PURE__ */ jsx(ChevronLeft, { size: 20 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "soft",
+                size: "2",
+                style: {
+                  position: "absolute",
+                  right: 8,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  opacity: 0.8
+                },
+                onClick: goToNext,
+                children: /* @__PURE__ */ jsx(ChevronRight, { size: 20 })
+              }
+            )
+          ] })
+        ] }),
+        campaigns.length > 1 && /* @__PURE__ */ jsx(
+          Flex,
+          {
+            align: "center",
+            justify: "center",
+            gap: "2",
+            p: "3",
+            style: {
+              borderTop: "1px solid var(--gray-a5)"
+            },
+            children: campaigns.map((_, index) => /* @__PURE__ */ jsx(
+              Box,
+              {
+                onClick: () => goToSlide(index),
+                style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  background: index === currentIndex ? "var(--accent-9)" : "var(--gray-a6)",
+                  cursor: "pointer",
+                  transition: "all 0.2s ease"
+                }
+              },
+              index
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(Flex, { justify: "center", pb: "3", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "1", color: "gray", onClick: handleClose, children: "Skip All" }) })
+      ]
+    }
+  ) });
+}
+function AdBanner({
+  placement = "home_banner",
+  rotationInterval = 1e4,
+  maxCampaigns = 5,
+  className,
+  style
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const trackedImpressions = useRef(/* @__PURE__ */ new Set());
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick
+  } = useCampaigns({ placement, maxCampaigns });
+  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]);
+  useEffect(() => {
+    if (campaigns.length <= 1) return;
+    setProgress(0);
+    const progressInterval = 50;
+    const steps = rotationInterval / progressInterval;
+    let currentStep = 0;
+    const progressTimer = 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 () => clearInterval(progressTimer);
+  }, [campaigns.length, rotationInterval, currentIndex]);
+  const handleClick = useCallback(
+    (campaign2) => {
+      recordClick(campaign2);
+      const targetUrl = campaign2.customCtaUrl || campaign2.product.url;
+      window.open(targetUrl, "_blank");
+    },
+    [recordClick]
+  );
+  const goToSlide = useCallback((index) => {
+    if (index === currentIndex) return;
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex(index);
+      setProgress(0);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [currentIndex]);
+  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 || [];
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      style: {
+        background: "var(--color-background)",
+        borderBottom: "1px solid var(--gray-a4)",
+        position: "relative",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { style: { height: 3, background: displayColor } }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              background: `linear-gradient(90deg, ${displayColor}08 0%, ${displayColor}12 50%, ${displayColor}08 100%)`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "center", gap: "2", py: "2", children: [
+                /* @__PURE__ */ jsx(Sparkles, { size: 12, color: displayColor }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    size: "1",
+                    weight: "medium",
+                    style: {
+                      color: displayColor,
+                      fontSize: "11px",
+                      letterSpacing: "1.5px",
+                      textTransform: "uppercase"
+                    },
+                    children: "Discover Our Products"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Sparkles, { size: 12, color: displayColor })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { px: "4", py: "3", children: /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  direction: { initial: "column", sm: "row" },
+                  align: "center",
+                  justify: "between",
+                  gap: { initial: "3", sm: "4" },
+                  style: {
+                    opacity: isAnimating ? 0 : 1,
+                    transform: isAnimating ? "translateX(-10px)" : "translateX(0)",
+                    transition: "all 0.2s ease-out"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          style: {
+                            width: 56,
+                            height: 56,
+                            borderRadius: 12,
+                            background: `${displayColor}15`,
+                            border: `1.5px solid ${displayColor}30`,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            flexShrink: 0
+                          },
+                          dangerouslySetInnerHTML: { __html: displayIcon }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "0", style: { minWidth: 0 }, children: [
+                        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+                          /* @__PURE__ */ jsx(Text, { size: "3", weight: "bold", children: displayTitle }),
+                          /* @__PURE__ */ jsx(
+                            Badge,
+                            {
+                              size: "1",
+                              style: {
+                                background: `${displayColor}18`,
+                                color: displayColor,
+                                fontSize: "11px",
+                                fontWeight: 600,
+                                padding: "3px 8px"
+                              },
+                              children: product.type === "extension" ? "Extension" : product.type === "android" ? "App" : "Web"
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            size: "2",
+                            color: "gray",
+                            style: {
+                              marginTop: 4,
+                              display: "-webkit-box",
+                              WebkitLineClamp: 1,
+                              WebkitBoxOrient: "vertical",
+                              overflow: "hidden"
+                            },
+                            children: displayTagline
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Flex, { gap: "4", mt: "2", display: { initial: "none", md: "flex" }, children: displayFeatures.slice(0, 3).map((feature, i) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
+                          /* @__PURE__ */ jsx(Check, { size: 12, color: displayColor, strokeWidth: 3 }),
+                          /* @__PURE__ */ jsx(Text, { size: "2", style: { color: "var(--gray-10)" }, children: feature })
+                        ] }, i)) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(Flex, { align: "center", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        size: "2",
+                        onClick: () => handleClick(campaign),
+                        style: {
+                          background: displayColor,
+                          color: "white",
+                          fontWeight: 600,
+                          fontSize: "14px",
+                          padding: "0 20px",
+                          height: 38,
+                          boxShadow: `0 2px 8px ${displayColor}40`
+                        },
+                        children: [
+                          displayCta,
+                          /* @__PURE__ */ jsx(ExternalLink, { size: 14, style: { marginLeft: 6 } })
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              ) }),
+              campaigns.length > 1 && /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", gap: "2", py: "3", children: campaigns.map((c, i) => /* @__PURE__ */ jsx(
+                Box,
+                {
+                  onClick: () => goToSlide(i),
+                  style: {
+                    width: 40,
+                    height: 4,
+                    borderRadius: 2,
+                    background: "var(--gray-a4)",
+                    cursor: "pointer",
+                    overflow: "hidden",
+                    position: "relative"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        height: "100%",
+                        width: i === currentIndex ? `${progress}%` : i < currentIndex ? "100%" : "0%",
+                        background: c.product?.color || displayColor,
+                        borderRadius: 2,
+                        transition: i === currentIndex ? "none" : "width 0.3s ease"
+                      }
+                    }
+                  )
+                },
+                i
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AdPanel as A,
+  CardVariant as C,
+  FeaturesVariant as F,
+  GradientVariant as G,
+  HeroVariant as H,
+  LARGE_PANEL_VARIANTS as L,
+  MinimalVariant as M,
+  SMALL_PANEL_VARIANTS as S,
+  TaglineVariant as T,
+  VideoVariant as V,
+  AdSlider as a,
+  AdModal as b,
+  AdUpdateModal as c,
+  AdBanner as d,
+  FeatureGridVariant as e,
+  TestimonialVariant as f,
+  getSmallPanelVariant as g,
+  ComparisonVariant as h,
+  getLargePanelVariant as i
+};
+//# sourceMappingURL=AdBanner-z1osYgog.js.map