@harshit-wander/component-lib 1.0.0 → 1.0.1

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.
package/dist/index.cjs CHANGED
@@ -1321,7 +1321,35 @@ var CategoryNavbar = react.forwardRef(
1321
1321
  onMouseEnter: () => openCategory(index),
1322
1322
  onMouseLeave: scheduleCloseCategory,
1323
1323
  children: [
1324
- /* @__PURE__ */ jsxRuntime.jsxs(
1324
+ category.href ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1325
+ /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: category.href, className: categoryTriggerClass, children: [
1326
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: category.label }),
1327
+ category.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center ml-xs", children: category.badge }) : null
1328
+ ] }),
1329
+ /* @__PURE__ */ jsxRuntime.jsx(
1330
+ "button",
1331
+ {
1332
+ type: "button",
1333
+ "aria-expanded": isOpen,
1334
+ "aria-controls": itemPanelId,
1335
+ "aria-label": `Open ${category.label} menu`,
1336
+ onClick: () => openCategory(index),
1337
+ onFocus: () => openCategory(index),
1338
+ className: "inline-flex items-center justify-center p-0 bg-transparent border-none text-inherit cursor-pointer focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 focus-visible:rounded-sm",
1339
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1340
+ "span",
1341
+ {
1342
+ "aria-hidden": "true",
1343
+ className: cn(
1344
+ "inline-flex items-center justify-center w-4 h-4 transition-transform duration-200 ease-in",
1345
+ isOpen ? "rotate-180" : "rotate-0"
1346
+ ),
1347
+ children: /* @__PURE__ */ jsxRuntime.jsx(ChevronSvg2, {})
1348
+ }
1349
+ )
1350
+ }
1351
+ )
1352
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
1325
1353
  "button",
1326
1354
  {
1327
1355
  type: "button",
@@ -1431,7 +1459,7 @@ var ContactSection = react.forwardRef(
1431
1459
  ref,
1432
1460
  className: cn(
1433
1461
  "flex w-full justify-center",
1434
- "lg:items-center lg:justify-between lg:gap-xl lg:py-xl lg:px-[80px] lg:bg-primary lg:rounded-lg lg:shadow-card",
1462
+ "lg:items-center lg:justify-between lg:gap-xl lg:py-xl lg:bg-primary lg:rounded-lg lg:shadow-card",
1435
1463
  className
1436
1464
  ),
1437
1465
  ...rest,
@@ -1470,39 +1498,31 @@ var CtaBanner = react.forwardRef(
1470
1498
  }
1471
1499
  cta.onClick?.();
1472
1500
  };
1473
- return /* @__PURE__ */ jsxRuntime.jsx(
1474
- "section",
1501
+ return /* @__PURE__ */ jsxRuntime.jsx("section", { ref, className: cn("flex justify-center bg-surface", className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
1502
+ "div",
1475
1503
  {
1476
- ref,
1477
- className: cn("flex justify-center px-[80px] bg-surface max-md:px-md", className),
1478
- ...rest,
1479
- children: /* @__PURE__ */ jsxRuntime.jsx(
1480
- "div",
1481
- {
1482
- className: "relative flex items-center w-full min-h-[300px] pl-[50px] rounded-md bg-cover bg-center overflow-hidden max-md:px-lg",
1483
- style: {
1484
- backgroundColor: backgroundColor ?? "var(--color-primary)",
1485
- backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0
1486
- },
1487
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xl max-w-[550px]", children: [
1488
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs text-white", children: [
1489
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold leading-button", children: title }),
1490
- subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm font-medium leading-body", children: subtitle }) : null
1491
- ] }),
1492
- /* @__PURE__ */ jsxRuntime.jsx(
1493
- "button",
1494
- {
1495
- type: "button",
1496
- onClick: handleCtaClick,
1497
- className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
1498
- children: cta.label
1499
- }
1500
- )
1501
- ] })
1502
- }
1503
- )
1504
+ className: "relative flex items-center w-full min-h-[300px] pl-[50px] rounded-md bg-cover bg-center overflow-hidden max-md:px-lg",
1505
+ style: {
1506
+ backgroundColor: backgroundColor ?? "var(--color-primary)",
1507
+ backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0
1508
+ },
1509
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xl max-w-[550px]", children: [
1510
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs text-white", children: [
1511
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold leading-button", children: title }),
1512
+ subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm font-medium leading-body", children: subtitle }) : null
1513
+ ] }),
1514
+ /* @__PURE__ */ jsxRuntime.jsx(
1515
+ "button",
1516
+ {
1517
+ type: "button",
1518
+ onClick: handleCtaClick,
1519
+ className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
1520
+ children: cta.label
1521
+ }
1522
+ )
1523
+ ] })
1504
1524
  }
1505
- );
1525
+ ) });
1506
1526
  }
1507
1527
  );
1508
1528
  CtaBanner.displayName = "CtaBanner";
@@ -1511,39 +1531,31 @@ var DestinationsSection = react.forwardRef(
1511
1531
  const half = Math.ceil(destinations.length / 2);
1512
1532
  const firstRow = destinations.slice(0, half);
1513
1533
  const secondRow = destinations.slice(half);
1514
- return /* @__PURE__ */ jsxRuntime.jsxs(
1515
- "section",
1516
- {
1517
- ref,
1518
- className: cn("flex flex-col gap-lg px-md bg-surface", className),
1519
- ...rest,
1520
- children: [
1521
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
1522
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-md overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
1523
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-md w-max", children: firstRow.map((destination) => /* @__PURE__ */ jsxRuntime.jsx(
1524
- DestinationCard,
1525
- {
1526
- image: destination.image,
1527
- alt: destination.alt,
1528
- label: destination.label,
1529
- href: destination.href
1530
- },
1531
- `r1-${destination.label}`
1532
- )) }),
1533
- secondRow.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-md w-max", children: secondRow.map((destination) => /* @__PURE__ */ jsxRuntime.jsx(
1534
- DestinationCard,
1535
- {
1536
- image: destination.image,
1537
- alt: destination.alt,
1538
- label: destination.label,
1539
- href: destination.href
1540
- },
1541
- `r2-${destination.label}`
1542
- )) }) : null
1543
- ] })
1544
- ]
1545
- }
1546
- );
1534
+ return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: cn("flex flex-col gap-lg bg-surface", className), ...rest, children: [
1535
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
1536
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-md overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
1537
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-md w-max", children: firstRow.map((destination) => /* @__PURE__ */ jsxRuntime.jsx(
1538
+ DestinationCard,
1539
+ {
1540
+ image: destination.image,
1541
+ alt: destination.alt,
1542
+ label: destination.label,
1543
+ href: destination.href
1544
+ },
1545
+ `r1-${destination.label}`
1546
+ )) }),
1547
+ secondRow.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-md w-max", children: secondRow.map((destination) => /* @__PURE__ */ jsxRuntime.jsx(
1548
+ DestinationCard,
1549
+ {
1550
+ image: destination.image,
1551
+ alt: destination.alt,
1552
+ label: destination.label,
1553
+ href: destination.href
1554
+ },
1555
+ `r2-${destination.label}`
1556
+ )) }) : null
1557
+ ] })
1558
+ ] });
1547
1559
  }
1548
1560
  );
1549
1561
  DestinationsSection.displayName = "DestinationsSection";
@@ -1627,10 +1639,7 @@ var EventCarousel = react.forwardRef(
1627
1639
  "section",
1628
1640
  {
1629
1641
  ref,
1630
- className: cn(
1631
- "relative flex flex-col items-center gap-md px-[80px] bg-surface max-md:px-md",
1632
- className
1633
- ),
1642
+ className: cn("relative flex flex-col items-center gap-md bg-surface", className),
1634
1643
  ...rest,
1635
1644
  children: [
1636
1645
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1686,7 +1695,7 @@ var EventCarousel = react.forwardRef(
1686
1695
  onClick: scrollPrev,
1687
1696
  disabled: !canPrev,
1688
1697
  "aria-label": variant === "video" ? "Previous video" : "Previous event",
1689
- className: cn(arrowBase, "left-[60px]"),
1698
+ className: cn(arrowBase, "left-2"),
1690
1699
  children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {})
1691
1700
  }
1692
1701
  ),
@@ -1697,7 +1706,7 @@ var EventCarousel = react.forwardRef(
1697
1706
  onClick: scrollNext,
1698
1707
  disabled: !canNext,
1699
1708
  "aria-label": variant === "video" ? "Next video" : "Next event",
1700
- className: cn(arrowBase, "right-[60px]"),
1709
+ className: cn(arrowBase, "right-2"),
1701
1710
  children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
1702
1711
  }
1703
1712
  )
@@ -1708,7 +1717,7 @@ var EventCarousel = react.forwardRef(
1708
1717
  );
1709
1718
  EventCarousel.displayName = "EventCarousel";
1710
1719
  var ExploreSection = react.forwardRef(
1711
- ({ heading: heading2, items, className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: cn("flex flex-col gap-lg px-md bg-surface", className), ...rest, children: [
1720
+ ({ heading: heading2, items, className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: cn("flex flex-col gap-lg bg-surface", className), ...rest, children: [
1712
1721
  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
1713
1722
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-md overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
1714
1723
  ExploreCard,
@@ -1976,10 +1985,7 @@ var GallerySection = react.forwardRef(
1976
1985
  "section",
1977
1986
  {
1978
1987
  ref,
1979
- className: cn(
1980
- "relative flex flex-col items-center gap-lg px-[80px] bg-surface max-md:px-md",
1981
- className
1982
- ),
1988
+ className: cn("relative flex flex-col items-center gap-lg bg-surface", className),
1983
1989
  ...rest,
1984
1990
  children: [
1985
1991
  /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { heading: heading2, subheading, align: "center" }),
@@ -2396,10 +2402,7 @@ var PackagesCarousel = react.forwardRef(
2396
2402
  "section",
2397
2403
  {
2398
2404
  ref,
2399
- className: cn(
2400
- "flex flex-col items-center gap-xl px-[80px] bg-surface max-md:px-md",
2401
- className
2402
- ),
2405
+ className: cn("flex flex-col items-center gap-xl bg-surface", className),
2403
2406
  ...rest,
2404
2407
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xl w-full", children: [
2405
2408
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-lg", children: [
@@ -2581,10 +2584,7 @@ var TestimonialsCarousel = react.forwardRef(
2581
2584
  "section",
2582
2585
  {
2583
2586
  ref,
2584
- className: cn(
2585
- "flex flex-col items-center gap-[28px] px-[80px] bg-surface max-md:px-md",
2586
- className
2587
- ),
2587
+ className: cn("flex flex-col items-center gap-[28px] bg-surface", className),
2588
2588
  ...rest,
2589
2589
  children: [
2590
2590
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2709,92 +2709,84 @@ var TripsCategorySection = react.forwardRef(
2709
2709
  cta.onClick?.();
2710
2710
  };
2711
2711
  const progressWidth = Math.min(33 + scrollProgress * (120 - 33), 120);
2712
- return /* @__PURE__ */ jsxRuntime.jsxs(
2713
- "section",
2714
- {
2715
- ref,
2716
- className: cn("relative flex flex-col px-[80px] bg-surface max-md:px-md", className),
2717
- ...rest,
2718
- children: [
2719
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
2720
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 [&>img]:w-full [&>img]:h-full [&>img]:object-cover [&>video]:w-full [&>video]:h-full [&>video]:object-cover", children: /* @__PURE__ */ jsxRuntime.jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, poster, src: videoSrc }) }),
2721
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-center gap-lg p-[44px] text-on-image [text-shadow:0px_6px_24px_rgba(0,0,0,0.16)]", children: [
2722
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-hero-title max-w-[436px]", children: title }),
2723
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description2 }),
2724
- /* @__PURE__ */ jsxRuntime.jsx(
2725
- "button",
2726
- {
2727
- type: "button",
2728
- onClick: handleCtaClick,
2729
- className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
2730
- children: cta.label
2731
- }
2732
- )
2733
- ] })
2734
- ] }),
2735
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px]", children: [
2736
- /* @__PURE__ */ jsxRuntime.jsx(
2737
- "button",
2738
- {
2739
- type: "button",
2740
- onClick: scrollPrev,
2741
- disabled: !canPrev,
2742
- "aria-label": "Previous trips",
2743
- className: cn(arrowBase4, "left-2"),
2744
- children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft5, {})
2745
- }
2746
- ),
2747
- /* @__PURE__ */ jsxRuntime.jsx(
2748
- "div",
2749
- {
2750
- ref: trackRef,
2751
- className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
2752
- children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
2753
- TripCategoryCard,
2754
- {
2755
- image: trip.image,
2756
- alt: trip.alt,
2757
- destination: trip.destination,
2758
- startingPrice: trip.startingPrice,
2759
- href: trip.href
2760
- },
2761
- `${trip.image}|${trip.destination}`
2762
- ))
2763
- }
2764
- ),
2765
- /* @__PURE__ */ jsxRuntime.jsx(
2766
- "button",
2712
+ return /* @__PURE__ */ jsxRuntime.jsxs("section", { ref, className: cn("relative flex flex-col bg-surface", className), ...rest, children: [
2713
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
2714
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 [&>img]:w-full [&>img]:h-full [&>img]:object-cover [&>video]:w-full [&>video]:h-full [&>video]:object-cover", children: /* @__PURE__ */ jsxRuntime.jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, poster, src: videoSrc }) }),
2715
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-center gap-lg p-[44px] text-on-image [text-shadow:0px_6px_24px_rgba(0,0,0,0.16)]", children: [
2716
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-hero-title max-w-[436px]", children: title }),
2717
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description2 }),
2718
+ /* @__PURE__ */ jsxRuntime.jsx(
2719
+ "button",
2720
+ {
2721
+ type: "button",
2722
+ onClick: handleCtaClick,
2723
+ className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
2724
+ children: cta.label
2725
+ }
2726
+ )
2727
+ ] })
2728
+ ] }),
2729
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px]", children: [
2730
+ /* @__PURE__ */ jsxRuntime.jsx(
2731
+ "button",
2732
+ {
2733
+ type: "button",
2734
+ onClick: scrollPrev,
2735
+ disabled: !canPrev,
2736
+ "aria-label": "Previous trips",
2737
+ className: cn(arrowBase4, "left-2"),
2738
+ children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft5, {})
2739
+ }
2740
+ ),
2741
+ /* @__PURE__ */ jsxRuntime.jsx(
2742
+ "div",
2743
+ {
2744
+ ref: trackRef,
2745
+ className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
2746
+ children: trips.map((trip) => /* @__PURE__ */ jsxRuntime.jsx(
2747
+ TripCategoryCard,
2767
2748
  {
2768
- type: "button",
2769
- onClick: scrollNext,
2770
- disabled: !canNext,
2771
- "aria-label": "Next trips",
2772
- className: cn(arrowBase4, "right-2"),
2773
- children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight5, {})
2774
- }
2775
- ),
2776
- /* @__PURE__ */ jsxRuntime.jsx(
2777
- "div",
2749
+ image: trip.image,
2750
+ alt: trip.alt,
2751
+ destination: trip.destination,
2752
+ startingPrice: trip.startingPrice,
2753
+ href: trip.href
2754
+ },
2755
+ `${trip.image}|${trip.destination}`
2756
+ ))
2757
+ }
2758
+ ),
2759
+ /* @__PURE__ */ jsxRuntime.jsx(
2760
+ "button",
2761
+ {
2762
+ type: "button",
2763
+ onClick: scrollNext,
2764
+ disabled: !canNext,
2765
+ "aria-label": "Next trips",
2766
+ className: cn(arrowBase4, "right-2"),
2767
+ children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight5, {})
2768
+ }
2769
+ ),
2770
+ /* @__PURE__ */ jsxRuntime.jsx(
2771
+ "div",
2772
+ {
2773
+ role: "progressbar",
2774
+ "aria-valuenow": Math.round(scrollProgress * 100),
2775
+ "aria-valuemin": 0,
2776
+ "aria-valuemax": 100,
2777
+ "aria-label": "Scroll position",
2778
+ className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
2779
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2780
+ "span",
2778
2781
  {
2779
- role: "progressbar",
2780
- "aria-valuenow": Math.round(scrollProgress * 100),
2781
- "aria-valuemin": 0,
2782
- "aria-valuemax": 100,
2783
- "aria-label": "Scroll position",
2784
- className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
2785
- children: /* @__PURE__ */ jsxRuntime.jsx(
2786
- "span",
2787
- {
2788
- className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
2789
- style: { width: `${progressWidth}px` }
2790
- }
2791
- )
2782
+ className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
2783
+ style: { width: `${progressWidth}px` }
2792
2784
  }
2793
2785
  )
2794
- ] })
2795
- ]
2796
- }
2797
- );
2786
+ }
2787
+ )
2788
+ ] })
2789
+ ] });
2798
2790
  }
2799
2791
  );
2800
2792
  TripsCategorySection.displayName = "TripsCategorySection";
@@ -2850,11 +2842,9 @@ var WhyChooseSection = react.forwardRef(
2850
2842
  ref,
2851
2843
  className: cn(
2852
2844
  // Mobile (default)
2853
- "flex flex-col items-center gap-lg px-md bg-surface",
2845
+ "flex flex-col items-center gap-lg bg-surface",
2854
2846
  // Tablet
2855
- "md:gap-xl md:px-lg",
2856
- // Desktop
2857
- "lg:px-[80px]",
2847
+ "md:gap-xl",
2858
2848
  className
2859
2849
  ),
2860
2850
  ...rest,