shared-features 0.1.11 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/ads/AdCarousel.d.ts +1 -1
  2. package/dist/components/ads/AdCarousel.d.ts.map +1 -1
  3. package/dist/components/ads/TopbarAdBanner.d.ts +1 -1
  4. package/dist/components/ads/TopbarAdBanner.d.ts.map +1 -1
  5. package/dist/components/index.cjs +1 -1
  6. package/dist/components/index.js +1 -1
  7. package/dist/{index-BA8TGVYV.js → index-CsoIWvB8.js} +217 -313
  8. package/dist/index-CsoIWvB8.js.map +1 -0
  9. package/dist/{index-ClreioC9.cjs → index-QOlXErYT.cjs} +216 -312
  10. package/dist/index-QOlXErYT.cjs.map +1 -0
  11. package/dist/index.cjs +1 -1
  12. package/dist/index.js +1 -1
  13. package/package.json +1 -1
  14. package/dist/index-BA8TGVYV.js.map +0 -1
  15. package/dist/index-ClreioC9.cjs.map +0 -1
package/dist/{index-ClreioC9.cjs → index-QOlXErYT.cjs} RENAMED
@@ -1484,8 +1484,10 @@ function TopbarAdBanner({
1484
1484
  const [isAnimating, setIsAnimating] = react.useState(false);
1485
1485
  const [isDismissed, setIsDismissed] = react.useState(false);
1486
1486
  const [progress, setProgress] = react.useState(0);
1487
+ const [isPaused, setIsPaused] = react.useState(false);
1487
1488
  const trackedImpressions = react.useRef(/* @__PURE__ */ new Set());
1488
1489
  const timerRef = react.useRef(null);
1490
+ const progressRef = react.useRef(0);
1489
1491
  react.useEffect(() => {
1490
1492
  try {
1491
1493
  const dismissed = sessionStorage.getItem(DISMISSED_TOPBAR_KEY);
@@ -1517,19 +1519,18 @@ function TopbarAdBanner({
1517
1519
  }, [currentIndex, campaigns, recordImpression]);
1518
1520
  react.useEffect(() => {
1519
1521
  if (campaigns.length <= 1) return;
1520
- setProgress(0);
1521
1522
  const progressInterval = 50;
1522
1523
  const steps = rotationInterval / progressInterval;
1523
- let currentStep = 0;
1524
1524
  timerRef.current = setInterval(() => {
1525
- currentStep++;
1526
- setProgress(currentStep / steps * 100);
1527
- if (currentStep >= steps) {
1525
+ if (isPaused) return;
1526
+ progressRef.current++;
1527
+ setProgress(progressRef.current / steps * 100);
1528
+ if (progressRef.current >= steps) {
1528
1529
  setIsAnimating(true);
1529
1530
  setTimeout(() => {
1530
1531
  setCurrentIndex((prev) => (prev + 1) % campaigns.length);
1531
1532
  setProgress(0);
1532
- currentStep = 0;
1533
+ progressRef.current = 0;
1533
1534
  setTimeout(() => setIsAnimating(false), 50);
1534
1535
  }, 200);
1535
1536
  }
@@ -1537,7 +1538,11 @@ function TopbarAdBanner({
1537
1538
  return () => {
1538
1539
  if (timerRef.current) clearInterval(timerRef.current);
1539
1540
  };
1540
- }, [campaigns.length, rotationInterval, currentIndex]);
1541
+ }, [campaigns.length, rotationInterval, isPaused]);
1542
+ react.useEffect(() => {
1543
+ progressRef.current = 0;
1544
+ setProgress(0);
1545
+ }, [currentIndex]);
1541
1546
  const handleClick = react.useCallback(
1542
1547
  (campaign2) => {
1543
1548
  recordClick(campaign2);
@@ -1566,6 +1571,12 @@ function TopbarAdBanner({
1566
1571
  setTimeout(() => setIsAnimating(false), 50);
1567
1572
  }, 200);
1568
1573
  }, [campaigns.length, resetTimer]);
1574
+ const handleMouseEnter = react.useCallback(() => {
1575
+ setIsPaused(true);
1576
+ }, []);
1577
+ const handleMouseLeave = react.useCallback(() => {
1578
+ setIsPaused(false);
1579
+ }, []);
1569
1580
  if (loading || campaigns.length === 0 || isDismissed) return null;
1570
1581
  const campaign = campaigns[currentIndex];
1571
1582
  if (!campaign) return null;
@@ -1579,13 +1590,16 @@ function TopbarAdBanner({
1579
1590
  themes.Box,
1580
1591
  {
1581
1592
  className,
1593
+ onMouseEnter: handleMouseEnter,
1594
+ onMouseLeave: handleMouseLeave,
1582
1595
  style: {
1583
1596
  background: `linear-gradient(135deg, ${displayColor}12 0%, ${displayColor}08 50%, ${displayColor}12 100%)`,
1584
1597
  borderBottom: `1px solid ${displayColor}30`,
1585
1598
  position: "relative",
1586
- height: 100,
1587
- maxHeight: 100,
1599
+ height: 60,
1600
+ maxHeight: 60,
1588
1601
  overflow: "hidden",
1602
+ cursor: "default",
1589
1603
  ...style
1590
1604
  },
1591
1605
  children: [
@@ -1620,41 +1634,24 @@ function TopbarAdBanner({
1620
1634
  {
1621
1635
  align: "center",
1622
1636
  justify: "between",
1623
- gap: { initial: "2", sm: "4" },
1637
+ gap: { initial: "2", sm: "3" },
1624
1638
  style: {
1625
1639
  height: "100%",
1626
- padding: "0 16px"
1640
+ padding: "0 12px"
1627
1641
  },
1628
1642
  children: [
1629
- /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "2", align: "center", style: { flexShrink: 0 }, children: [
1630
- /* @__PURE__ */ jsxRuntime.jsx(
1631
- themes.Box,
1632
- {
1633
- style: {
1634
- width: 28,
1635
- height: 28,
1636
- borderRadius: 6,
1637
- background: `${displayColor}20`,
1638
- display: "flex",
1639
- alignItems: "center",
1640
- justifyContent: "center"
1641
- },
1642
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 14, color: displayColor })
1643
- }
1644
- ),
1645
- campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(
1646
- themes.IconButton,
1647
- {
1648
- size: "1",
1649
- variant: "ghost",
1650
- color: "gray",
1651
- onClick: goToPrev,
1652
- style: { cursor: "pointer" },
1653
- "aria-label": "Previous ad",
1654
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
1655
- }
1656
- ) })
1657
- ] }),
1643
+ campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", md: "block" }, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1644
+ themes.IconButton,
1645
+ {
1646
+ size: "1",
1647
+ variant: "ghost",
1648
+ color: "gray",
1649
+ onClick: goToPrev,
1650
+ style: { cursor: "pointer" },
1651
+ "aria-label": "Previous ad",
1652
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 14 })
1653
+ }
1654
+ ) }),
1658
1655
  /* @__PURE__ */ jsxRuntime.jsxs(
1659
1656
  themes.Flex,
1660
1657
  {
@@ -1664,7 +1661,7 @@ function TopbarAdBanner({
1664
1661
  flex: 1,
1665
1662
  minWidth: 0,
1666
1663
  opacity: isAnimating ? 0 : 1,
1667
- transform: isAnimating ? "translateY(-8px)" : "translateY(0)",
1664
+ transform: isAnimating ? "translateY(-6px)" : "translateY(0)",
1668
1665
  transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
1669
1666
  },
1670
1667
  children: [
@@ -1672,57 +1669,56 @@ function TopbarAdBanner({
1672
1669
  themes.Box,
1673
1670
  {
1674
1671
  style: {
1675
- width: 48,
1676
- height: 48,
1677
- borderRadius: 10,
1672
+ width: 36,
1673
+ height: 36,
1674
+ borderRadius: 8,
1678
1675
  background: `linear-gradient(135deg, ${displayColor}25 0%, ${displayColor}15 100%)`,
1679
- border: `1.5px solid ${displayColor}35`,
1676
+ border: `1px solid ${displayColor}35`,
1680
1677
  display: "flex",
1681
1678
  alignItems: "center",
1682
1679
  justifyContent: "center",
1683
1680
  flexShrink: 0,
1684
- boxShadow: `0 2px 8px ${displayColor}20`
1681
+ boxShadow: `0 2px 6px ${displayColor}20`
1685
1682
  },
1686
1683
  dangerouslySetInnerHTML: { __html: displayIcon }
1687
1684
  }
1688
1685
  ),
1689
- /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "0", style: { minWidth: 0, flex: 1 }, children: [
1690
- /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "2", weight: "bold", style: { lineHeight: 1.3 }, children: displayTitle }),
1691
- /* @__PURE__ */ jsxRuntime.jsx(
1686
+ /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "2", style: { minWidth: 0, flex: 1 }, children: [
1687
+ /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "2", weight: "bold", style: { whiteSpace: "nowrap" }, children: displayTitle }),
1688
+ /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", sm: "block" }, style: { minWidth: 0, flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1692
1689
  themes.Text,
1693
1690
  {
1694
1691
  size: "1",
1695
1692
  color: "gray",
1696
1693
  style: {
1697
- display: "-webkit-box",
1698
- WebkitLineClamp: 1,
1699
- WebkitBoxOrient: "vertical",
1700
1694
  overflow: "hidden",
1701
- lineHeight: 1.4
1695
+ textOverflow: "ellipsis",
1696
+ whiteSpace: "nowrap",
1697
+ display: "block"
1702
1698
  },
1703
1699
  children: displayTagline
1704
1700
  }
1705
- )
1701
+ ) })
1706
1702
  ] }),
1707
1703
  /* @__PURE__ */ jsxRuntime.jsx(
1708
1704
  themes.Button,
1709
1705
  {
1710
- size: "2",
1706
+ size: "1",
1711
1707
  onClick: () => handleClick(campaign),
1712
1708
  style: {
1713
1709
  background: `linear-gradient(135deg, ${displayColor} 0%, ${displayColor}dd 100%)`,
1714
1710
  color: "white",
1715
1711
  fontWeight: 600,
1716
- fontSize: "13px",
1717
- padding: "0 16px",
1718
- height: 32,
1712
+ fontSize: "12px",
1713
+ padding: "0 12px",
1714
+ height: 28,
1719
1715
  flexShrink: 0,
1720
- boxShadow: `0 2px 8px ${displayColor}40`,
1716
+ boxShadow: `0 2px 6px ${displayColor}40`,
1721
1717
  border: "none"
1722
1718
  },
1723
- children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
1719
+ children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
1724
1720
  displayCta,
1725
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 13 })
1721
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 11 })
1726
1722
  ] })
1727
1723
  }
1728
1724
  )
@@ -1731,23 +1727,11 @@ function TopbarAdBanner({
1731
1727
  ),
1732
1728
  /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "1", align: "center", style: { flexShrink: 0 }, children: [
1733
1729
  campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1734
- /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(
1735
- themes.IconButton,
1736
- {
1737
- size: "1",
1738
- variant: "ghost",
1739
- color: "gray",
1740
- onClick: goToNext,
1741
- style: { cursor: "pointer" },
1742
- "aria-label": "Next ad",
1743
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
1744
- }
1745
- ) }),
1746
- /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { gap: "1", mx: "2", display: { initial: "none", sm: "flex" }, children: campaigns.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
1730
+ /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { gap: "1", mx: "1", children: campaigns.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
1747
1731
  themes.Box,
1748
1732
  {
1749
1733
  style: {
1750
- width: i === currentIndex ? 16 : 6,
1734
+ width: i === currentIndex ? 14 : 6,
1751
1735
  height: 6,
1752
1736
  borderRadius: 3,
1753
1737
  background: i === currentIndex ? displayColor : "var(--gray-a5)",
@@ -1760,7 +1744,19 @@ function TopbarAdBanner({
1760
1744
  }
1761
1745
  },
1762
1746
  i
1763
- )) })
1747
+ )) }),
1748
+ /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(
1749
+ themes.IconButton,
1750
+ {
1751
+ size: "1",
1752
+ variant: "ghost",
1753
+ color: "gray",
1754
+ onClick: goToNext,
1755
+ style: { cursor: "pointer" },
1756
+ "aria-label": "Next ad",
1757
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14 })
1758
+ }
1759
+ ) })
1764
1760
  ] }),
1765
1761
  /* @__PURE__ */ jsxRuntime.jsx(
1766
1762
  themes.IconButton,
@@ -1769,42 +1765,15 @@ function TopbarAdBanner({
1769
1765
  variant: "soft",
1770
1766
  color: "gray",
1771
1767
  onClick: handleDismiss,
1772
- style: { cursor: "pointer", marginLeft: 4 },
1768
+ style: { cursor: "pointer", marginLeft: 2 },
1773
1769
  "aria-label": "Close banner",
1774
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 })
1770
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 12 })
1775
1771
  }
1776
1772
  )
1777
1773
  ] })
1778
1774
  ]
1779
1775
  }
1780
- ) }),
1781
- campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
1782
- themes.Flex,
1783
- {
1784
- justify: "center",
1785
- gap: "1",
1786
- style: {
1787
- position: "absolute",
1788
- bottom: 6,
1789
- left: 0,
1790
- right: 0
1791
- },
1792
- display: { initial: "flex", sm: "none" },
1793
- children: campaigns.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
1794
- themes.Box,
1795
- {
1796
- style: {
1797
- width: 6,
1798
- height: 6,
1799
- borderRadius: "50%",
1800
- background: i === currentIndex ? displayColor : "var(--gray-a5)",
1801
- transition: "background 0.2s ease"
1802
- }
1803
- },
1804
- i
1805
- ))
1806
- }
1807
- )
1776
+ ) })
1808
1777
  ]
1809
1778
  }
1810
1779
  );
@@ -1819,8 +1788,10 @@ function AdCarousel({
1819
1788
  const [currentIndex, setCurrentIndex] = react.useState(0);
1820
1789
  const [isAnimating, setIsAnimating] = react.useState(false);
1821
1790
  const [progress, setProgress] = react.useState(0);
1791
+ const [isPaused, setIsPaused] = react.useState(false);
1822
1792
  const trackedImpressions = react.useRef(/* @__PURE__ */ new Set());
1823
1793
  const timerRef = react.useRef(null);
1794
+ const progressRef = react.useRef(0);
1824
1795
  const {
1825
1796
  campaigns,
1826
1797
  loading,
@@ -1836,19 +1807,18 @@ function AdCarousel({
1836
1807
  }, [currentIndex, campaigns, recordImpression]);
1837
1808
  react.useEffect(() => {
1838
1809
  if (campaigns.length <= 1) return;
1839
- setProgress(0);
1840
1810
  const progressInterval = 50;
1841
1811
  const steps = rotationInterval / progressInterval;
1842
- let currentStep = 0;
1843
1812
  timerRef.current = setInterval(() => {
1844
- currentStep++;
1845
- setProgress(currentStep / steps * 100);
1846
- if (currentStep >= steps) {
1813
+ if (isPaused) return;
1814
+ progressRef.current++;
1815
+ setProgress(progressRef.current / steps * 100);
1816
+ if (progressRef.current >= steps) {
1847
1817
  setIsAnimating(true);
1848
1818
  setTimeout(() => {
1849
1819
  setCurrentIndex((prev) => (prev + 1) % campaigns.length);
1850
1820
  setProgress(0);
1851
- currentStep = 0;
1821
+ progressRef.current = 0;
1852
1822
  setTimeout(() => setIsAnimating(false), 50);
1853
1823
  }, 250);
1854
1824
  }
@@ -1856,7 +1826,11 @@ function AdCarousel({
1856
1826
  return () => {
1857
1827
  if (timerRef.current) clearInterval(timerRef.current);
1858
1828
  };
1859
- }, [campaigns.length, rotationInterval, currentIndex]);
1829
+ }, [campaigns.length, rotationInterval, isPaused]);
1830
+ react.useEffect(() => {
1831
+ progressRef.current = 0;
1832
+ setProgress(0);
1833
+ }, [currentIndex]);
1860
1834
  const handleClick = react.useCallback(
1861
1835
  (campaign2) => {
1862
1836
  recordClick(campaign2);
@@ -1894,6 +1868,12 @@ function AdCarousel({
1894
1868
  setTimeout(() => setIsAnimating(false), 50);
1895
1869
  }, 250);
1896
1870
  }, [currentIndex, resetTimer]);
1871
+ const handleMouseEnter = react.useCallback(() => {
1872
+ setIsPaused(true);
1873
+ }, []);
1874
+ const handleMouseLeave = react.useCallback(() => {
1875
+ setIsPaused(false);
1876
+ }, []);
1897
1877
  if (loading || campaigns.length === 0) return null;
1898
1878
  const campaign = campaigns[currentIndex];
1899
1879
  if (!campaign) return null;
@@ -1904,27 +1884,15 @@ function AdCarousel({
1904
1884
  const displayColor = campaign.customProductColor || product.color || "#3B82F6";
1905
1885
  const displayIcon = campaign.customIcon || product.icon64 || "";
1906
1886
  const displayFeatures = campaign.customFeatures || product.features || [];
1907
- const displayDescription = product.description || displayTagline;
1908
- const getProductTypeLabel = () => {
1909
- switch (product.type) {
1910
- case "extension":
1911
- return "Browser Extension";
1912
- case "android":
1913
- return "Android App";
1914
- case "ios":
1915
- return "iOS App";
1916
- case "web":
1917
- return "Web App";
1918
- default:
1919
- return "App";
1920
- }
1921
- };
1922
1887
  return /* @__PURE__ */ jsxRuntime.jsx(
1923
1888
  themes.Box,
1924
1889
  {
1925
1890
  className,
1891
+ onMouseEnter: handleMouseEnter,
1892
+ onMouseLeave: handleMouseLeave,
1926
1893
  style: {
1927
- padding: "24px 0",
1894
+ padding: "16px 0",
1895
+ cursor: "default",
1928
1896
  ...style
1929
1897
  },
1930
1898
  children: /* @__PURE__ */ jsxRuntime.jsx(themes.Container, { size: "4", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1933,9 +1901,10 @@ function AdCarousel({
1933
1901
  style: {
1934
1902
  background: `linear-gradient(145deg, var(--color-background) 0%, ${displayColor}08 100%)`,
1935
1903
  border: `1px solid ${displayColor}20`,
1936
- borderRadius: 16,
1904
+ borderRadius: 12,
1937
1905
  overflow: "hidden",
1938
- height: 350,
1906
+ height: 200,
1907
+ maxHeight: 200,
1939
1908
  position: "relative"
1940
1909
  },
1941
1910
  children: [
@@ -1944,32 +1913,17 @@ function AdCarousel({
1944
1913
  {
1945
1914
  style: {
1946
1915
  position: "absolute",
1947
- top: -100,
1948
- right: -100,
1949
- width: 300,
1950
- height: 300,
1916
+ top: -50,
1917
+ right: -50,
1918
+ width: 150,
1919
+ height: 150,
1951
1920
  borderRadius: "50%",
1952
1921
  background: `radial-gradient(circle, ${displayColor}12 0%, transparent 70%)`,
1953
1922
  pointerEvents: "none"
1954
1923
  }
1955
1924
  }
1956
1925
  ),
1957
- /* @__PURE__ */ jsxRuntime.jsx(
1958
- themes.Box,
1959
- {
1960
- style: {
1961
- position: "absolute",
1962
- bottom: -50,
1963
- left: -50,
1964
- width: 200,
1965
- height: 200,
1966
- borderRadius: "50%",
1967
- background: `radial-gradient(circle, ${displayColor}08 0%, transparent 70%)`,
1968
- pointerEvents: "none"
1969
- }
1970
- }
1971
- ),
1972
- campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { style: { height: 4, background: "var(--gray-a3)", position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1926
+ /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { style: { height: 3, background: "var(--gray-a3)", position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1973
1927
  themes.Box,
1974
1928
  {
1975
1929
  style: {
@@ -1980,16 +1934,15 @@ function AdCarousel({
1980
1934
  width: `${progress}%`,
1981
1935
  background: `linear-gradient(90deg, ${displayColor} 0%, ${displayColor}cc 100%)`,
1982
1936
  transition: "width 50ms linear",
1983
- boxShadow: `0 0 12px ${displayColor}50`
1937
+ boxShadow: `0 0 10px ${displayColor}50`
1984
1938
  }
1985
1939
  }
1986
1940
  ) }),
1987
- /* @__PURE__ */ jsxRuntime.jsxs(themes.Box, { style: { height: "calc(100% - 4px)", position: "relative", zIndex: 1 }, children: [
1941
+ /* @__PURE__ */ jsxRuntime.jsxs(themes.Box, { style: { height: "calc(100% - 3px)", position: "relative", zIndex: 1 }, children: [
1988
1942
  /* @__PURE__ */ jsxRuntime.jsxs(
1989
1943
  themes.Flex,
1990
1944
  {
1991
- direction: { initial: "column", md: "row" },
1992
- align: "stretch",
1945
+ align: "center",
1993
1946
  style: { height: "100%" },
1994
1947
  children: [
1995
1948
  campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1997,24 +1950,24 @@ function AdCarousel({
1997
1950
  {
1998
1951
  align: "center",
1999
1952
  justify: "center",
2000
- style: { width: 60, flexShrink: 0 },
1953
+ style: { width: 48, flexShrink: 0 },
2001
1954
  display: { initial: "none", md: "flex" },
2002
1955
  children: /* @__PURE__ */ jsxRuntime.jsx(
2003
1956
  themes.IconButton,
2004
1957
  {
2005
- size: "3",
1958
+ size: "2",
2006
1959
  variant: "ghost",
2007
1960
  color: "gray",
2008
1961
  onClick: goToPrev,
2009
1962
  style: {
2010
1963
  cursor: "pointer",
2011
- width: 44,
2012
- height: 44,
2013
- borderRadius: 12,
1964
+ width: 36,
1965
+ height: 36,
1966
+ borderRadius: 8,
2014
1967
  background: "var(--gray-a3)"
2015
1968
  },
2016
1969
  "aria-label": "Previous",
2017
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 24 })
1970
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 20 })
2018
1971
  }
2019
1972
  )
2020
1973
  }
@@ -2022,73 +1975,47 @@ function AdCarousel({
2022
1975
  /* @__PURE__ */ jsxRuntime.jsxs(
2023
1976
  themes.Flex,
2024
1977
  {
2025
- direction: { initial: "column", md: "row" },
2026
1978
  align: "center",
2027
- gap: { initial: "4", md: "6" },
2028
- p: { initial: "4", md: "5" },
1979
+ gap: { initial: "3", md: "4" },
1980
+ px: { initial: "3", md: "4" },
1981
+ py: "3",
2029
1982
  style: {
2030
1983
  flex: 1,
2031
1984
  opacity: isAnimating ? 0 : 1,
2032
- transform: isAnimating ? "translateX(-20px) scale(0.98)" : "translateX(0) scale(1)",
2033
- transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
1985
+ transform: isAnimating ? "translateX(-16px) scale(0.98)" : "translateX(0) scale(1)",
1986
+ transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
2034
1987
  },
2035
1988
  children: [
2036
- /* @__PURE__ */ jsxRuntime.jsxs(
2037
- themes.Flex,
1989
+ /* @__PURE__ */ jsxRuntime.jsx(
1990
+ themes.Box,
2038
1991
  {
2039
- direction: "column",
2040
- align: "center",
2041
- gap: "3",
2042
- style: { flexShrink: 0 },
2043
- children: [
2044
- /* @__PURE__ */ jsxRuntime.jsx(
2045
- themes.Box,
2046
- {
2047
- style: {
2048
- width: 100,
2049
- height: 100,
2050
- borderRadius: 20,
2051
- background: `linear-gradient(145deg, ${displayColor}20 0%, ${displayColor}10 100%)`,
2052
- border: `2px solid ${displayColor}30`,
2053
- display: "flex",
2054
- alignItems: "center",
2055
- justifyContent: "center",
2056
- boxShadow: `0 8px 32px ${displayColor}20, inset 0 1px 0 ${displayColor}20`
2057
- },
2058
- dangerouslySetInnerHTML: { __html: displayIcon }
2059
- }
2060
- ),
2061
- /* @__PURE__ */ jsxRuntime.jsxs(
2062
- themes.Badge,
2063
- {
2064
- size: "2",
2065
- style: {
2066
- background: `${displayColor}15`,
2067
- color: displayColor,
2068
- fontWeight: 600,
2069
- padding: "4px 12px"
2070
- },
2071
- children: [
2072
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { size: 12, style: { marginRight: 4 } }),
2073
- getProductTypeLabel()
2074
- ]
2075
- }
2076
- )
2077
- ]
1992
+ style: {
1993
+ width: 64,
1994
+ height: 64,
1995
+ borderRadius: 12,
1996
+ background: `linear-gradient(145deg, ${displayColor}20 0%, ${displayColor}10 100%)`,
1997
+ border: `1.5px solid ${displayColor}30`,
1998
+ display: "flex",
1999
+ alignItems: "center",
2000
+ justifyContent: "center",
2001
+ flexShrink: 0,
2002
+ boxShadow: `0 4px 16px ${displayColor}15`
2003
+ },
2004
+ dangerouslySetInnerHTML: { __html: displayIcon }
2078
2005
  }
2079
2006
  ),
2080
2007
  /* @__PURE__ */ jsxRuntime.jsxs(
2081
2008
  themes.Flex,
2082
2009
  {
2083
2010
  direction: "column",
2084
- gap: "3",
2085
- style: { flex: 1, minWidth: 0, textAlign: "left" },
2011
+ gap: "1",
2012
+ style: { flex: 1, minWidth: 0 },
2086
2013
  children: [
2087
- /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "2", wrap: "wrap", children: [
2014
+ /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "2", children: [
2088
2015
  /* @__PURE__ */ jsxRuntime.jsx(
2089
2016
  themes.Text,
2090
2017
  {
2091
- size: { initial: "5", md: "6" },
2018
+ size: { initial: "3", md: "4" },
2092
2019
  weight: "bold",
2093
2020
  style: { lineHeight: 1.2 },
2094
2021
  children: displayTitle
@@ -2099,14 +2026,15 @@ function AdCarousel({
2099
2026
  {
2100
2027
  align: "center",
2101
2028
  gap: "1",
2029
+ display: { initial: "none", sm: "flex" },
2102
2030
  style: {
2103
2031
  background: `${displayColor}15`,
2104
- padding: "4px 8px",
2105
- borderRadius: 6
2032
+ padding: "2px 6px",
2033
+ borderRadius: 4
2106
2034
  },
2107
2035
  children: [
2108
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Star, { size: 12, fill: displayColor, color: displayColor }),
2109
- /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "1", weight: "medium", style: { color: displayColor }, children: "Featured" })
2036
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Star, { size: 10, fill: displayColor, color: displayColor }),
2037
+ /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "1", weight: "medium", style: { color: displayColor, fontSize: 10 }, children: "Featured" })
2110
2038
  ]
2111
2039
  }
2112
2040
  )
@@ -2114,109 +2042,85 @@ function AdCarousel({
2114
2042
  /* @__PURE__ */ jsxRuntime.jsx(
2115
2043
  themes.Text,
2116
2044
  {
2117
- size: { initial: "2", md: "3" },
2045
+ size: "2",
2118
2046
  color: "gray",
2119
2047
  style: {
2120
- lineHeight: 1.5,
2121
- display: "-webkit-box",
2122
- WebkitLineClamp: 2,
2123
- WebkitBoxOrient: "vertical",
2124
- overflow: "hidden"
2048
+ overflow: "hidden",
2049
+ textOverflow: "ellipsis",
2050
+ whiteSpace: "nowrap"
2125
2051
  },
2126
- children: displayDescription
2052
+ children: displayTagline
2127
2053
  }
2128
2054
  ),
2129
2055
  displayFeatures.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
2130
2056
  themes.Flex,
2131
2057
  {
2132
- gap: { initial: "2", md: "4" },
2133
- wrap: "wrap",
2134
- mt: "1",
2135
- children: displayFeatures.slice(0, 4).map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs(
2058
+ gap: "2",
2059
+ display: { initial: "none", md: "flex" },
2060
+ style: { marginTop: 4 },
2061
+ children: displayFeatures.slice(0, 3).map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs(
2136
2062
  themes.Flex,
2137
2063
  {
2138
2064
  align: "center",
2139
- gap: "2",
2065
+ gap: "1",
2140
2066
  style: {
2141
2067
  background: "var(--gray-a3)",
2142
- padding: "6px 12px",
2143
- borderRadius: 8
2068
+ padding: "3px 8px",
2069
+ borderRadius: 4
2144
2070
  },
2145
2071
  children: [
2146
- /* @__PURE__ */ jsxRuntime.jsx(
2147
- themes.Box,
2148
- {
2149
- style: {
2150
- width: 18,
2151
- height: 18,
2152
- borderRadius: 4,
2153
- background: `${displayColor}20`,
2154
- display: "flex",
2155
- alignItems: "center",
2156
- justifyContent: "center"
2157
- },
2158
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, color: displayColor, strokeWidth: 3 })
2159
- }
2160
- ),
2161
- /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "1", weight: "medium", children: feature })
2072
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 10, color: displayColor, strokeWidth: 3 }),
2073
+ /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "1", style: { fontSize: 11 }, children: feature })
2162
2074
  ]
2163
2075
  },
2164
2076
  i
2165
2077
  ))
2166
2078
  }
2167
- ),
2168
- /* @__PURE__ */ jsxRuntime.jsxs(
2169
- themes.Flex,
2170
- {
2171
- gap: "3",
2172
- align: "center",
2173
- mt: { initial: "2", md: "3" },
2174
- wrap: "wrap",
2175
- children: [
2176
- /* @__PURE__ */ jsxRuntime.jsx(
2177
- themes.Button,
2178
- {
2179
- size: { initial: "2", md: "3" },
2180
- onClick: () => handleClick(campaign),
2181
- style: {
2182
- background: `linear-gradient(135deg, ${displayColor} 0%, ${displayColor}dd 100%)`,
2183
- color: "white",
2184
- fontWeight: 600,
2185
- padding: "0 24px",
2186
- height: 44,
2187
- boxShadow: `0 4px 16px ${displayColor}40`,
2188
- border: "none",
2189
- cursor: "pointer"
2190
- },
2191
- children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
2192
- displayCta,
2193
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 18 })
2194
- ] })
2195
- }
2196
- ),
2197
- /* @__PURE__ */ jsxRuntime.jsx(
2198
- themes.Button,
2199
- {
2200
- size: { initial: "2", md: "3" },
2201
- variant: "ghost",
2202
- onClick: () => handleClick(campaign),
2203
- style: {
2204
- color: displayColor,
2205
- fontWeight: 500,
2206
- cursor: "pointer"
2207
- },
2208
- children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
2209
- "View Details",
2210
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 14 })
2211
- ] })
2212
- }
2213
- )
2214
- ]
2215
- }
2216
2079
  )
2217
2080
  ]
2218
2081
  }
2219
- )
2082
+ ),
2083
+ /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "2", align: "center", style: { flexShrink: 0 }, children: [
2084
+ /* @__PURE__ */ jsxRuntime.jsx(
2085
+ themes.Button,
2086
+ {
2087
+ size: "2",
2088
+ onClick: () => handleClick(campaign),
2089
+ style: {
2090
+ background: `linear-gradient(135deg, ${displayColor} 0%, ${displayColor}dd 100%)`,
2091
+ color: "white",
2092
+ fontWeight: 600,
2093
+ padding: "0 16px",
2094
+ height: 36,
2095
+ boxShadow: `0 3px 12px ${displayColor}40`,
2096
+ border: "none",
2097
+ cursor: "pointer"
2098
+ },
2099
+ children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
2100
+ displayCta,
2101
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { size: 14 })
2102
+ ] })
2103
+ }
2104
+ ),
2105
+ /* @__PURE__ */ jsxRuntime.jsx(
2106
+ themes.Button,
2107
+ {
2108
+ size: "1",
2109
+ variant: "ghost",
2110
+ onClick: () => handleClick(campaign),
2111
+ style: {
2112
+ color: displayColor,
2113
+ fontWeight: 500,
2114
+ cursor: "pointer",
2115
+ fontSize: 11
2116
+ },
2117
+ children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
2118
+ "Details",
2119
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 11 })
2120
+ ] })
2121
+ }
2122
+ )
2123
+ ] })
2220
2124
  ]
2221
2125
  }
2222
2126
  ),
@@ -2225,24 +2129,24 @@ function AdCarousel({
2225
2129
  {
2226
2130
  align: "center",
2227
2131
  justify: "center",
2228
- style: { width: 60, flexShrink: 0 },
2132
+ style: { width: 48, flexShrink: 0 },
2229
2133
  display: { initial: "none", md: "flex" },
2230
2134
  children: /* @__PURE__ */ jsxRuntime.jsx(
2231
2135
  themes.IconButton,
2232
2136
  {
2233
- size: "3",
2137
+ size: "2",
2234
2138
  variant: "ghost",
2235
2139
  color: "gray",
2236
2140
  onClick: goToNext,
2237
2141
  style: {
2238
2142
  cursor: "pointer",
2239
- width: 44,
2240
- height: 44,
2241
- borderRadius: 12,
2143
+ width: 36,
2144
+ height: 36,
2145
+ borderRadius: 8,
2242
2146
  background: "var(--gray-a3)"
2243
2147
  },
2244
2148
  "aria-label": "Next",
2245
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 24 })
2149
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 20 })
2246
2150
  }
2247
2151
  )
2248
2152
  }
@@ -2255,10 +2159,10 @@ function AdCarousel({
2255
2159
  {
2256
2160
  justify: "center",
2257
2161
  align: "center",
2258
- gap: "3",
2162
+ gap: "2",
2259
2163
  style: {
2260
2164
  position: "absolute",
2261
- bottom: 16,
2165
+ bottom: 8,
2262
2166
  left: 0,
2263
2167
  right: 0
2264
2168
  },
@@ -2272,21 +2176,21 @@ function AdCarousel({
2272
2176
  onClick: goToPrev,
2273
2177
  style: { cursor: "pointer" },
2274
2178
  "aria-label": "Previous",
2275
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
2179
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 14 })
2276
2180
  }
2277
2181
  ) }),
2278
- /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { gap: "2", children: campaigns.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
2182
+ /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { gap: "1", children: campaigns.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
2279
2183
  themes.Box,
2280
2184
  {
2281
2185
  onClick: () => goToSlide(i),
2282
2186
  style: {
2283
- width: i === currentIndex ? 32 : 10,
2284
- height: 10,
2285
- borderRadius: 5,
2187
+ width: i === currentIndex ? 20 : 8,
2188
+ height: 8,
2189
+ borderRadius: 4,
2286
2190
  background: i === currentIndex ? `linear-gradient(90deg, ${c.product?.color || displayColor}, ${c.product?.color || displayColor}cc)` : "var(--gray-a4)",
2287
2191
  cursor: "pointer",
2288
- transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
2289
- boxShadow: i === currentIndex ? `0 2px 8px ${c.product?.color || displayColor}40` : "none"
2192
+ transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
2193
+ boxShadow: i === currentIndex ? `0 2px 6px ${c.product?.color || displayColor}40` : "none"
2290
2194
  }
2291
2195
  },
2292
2196
  i
@@ -2300,7 +2204,7 @@ function AdCarousel({
2300
2204
  onClick: goToNext,
2301
2205
  style: { cursor: "pointer" },
2302
2206
  "aria-label": "Next",
2303
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
2207
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14 })
2304
2208
  }
2305
2209
  ) })
2306
2210
  ]
@@ -2954,4 +2858,4 @@ exports.TopbarAdBanner = TopbarAdBanner;
2954
2858
  exports.VideoVariant = VideoVariant;
2955
2859
  exports.getLargePanelVariant = getLargePanelVariant;
2956
2860
  exports.getSmallPanelVariant = getSmallPanelVariant;
2957
- //# sourceMappingURL=index-ClreioC9.cjs.map
2861
+ //# sourceMappingURL=index-QOlXErYT.cjs.map