@harshit-wander/component-lib 1.1.3 → 1.1.4

package/dist/index.js

@@ -63,7 +63,7 @@ var ContactForm = forwardRef(
     variant = "card",
     headerVariant,
     eyebrow = "Wanderlust Calling?",
-    heading: heading2 = "Allow Us to Call You Back!",
+    heading = "Allow Us to Call You Back!",
     submitLabel = "Submit",
     headerIllustration,
     countryCodes,
@@ -106,7 +106,7 @@ var ContactForm = forwardRef(
           resolvedHeader === "none" ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-md w-full py-md pt-lg px-xl pb-md bg-brand-shade-1 max-md:pt-5 max-md:px-lg max-md:pb-3.5", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs flex-auto min-w-0", children: [
               /* @__PURE__ */ jsx("p", { className: "m-0 text-form-eyebrow text-primary", children: eyebrow }),
-              /* @__PURE__ */ jsx("p", { className: "m-0 text-form-heading text-text", children: heading2 })
+              /* @__PURE__ */ jsx("p", { className: "m-0 text-form-heading text-text", children: heading })
             ] }),
             resolvedHeader === "illustration" && headerIllustration ? /* @__PURE__ */ jsx(
               "div",
@@ -463,53 +463,34 @@ var FaqExpandable = forwardRef(
   }
 );
 FaqExpandable.displayName = "FaqExpandable";
-var card = cva(
-  "relative block w-full aspect-[268/355] rounded-lg overflow-hidden shadow-card bg-cover bg-center bg-no-repeat px-lg pt-lg",
-  {
-    variants: {
-      hasImage: {
-        true: "bg-secondary",
-        false: "bg-surface border border-border"
-      }
-    }
-  }
-);
-var heading = cva("m-0 text-lg font-semibold leading-card", {
-  variants: {
-    hasImage: {
-      true: "text-surface",
-      false: "text-primary"
-    }
-  }
-});
-var description = cva("mt-sm mb-0 text-sm font-normal leading-body", {
-  variants: {
-    hasImage: {
-      true: "text-surface",
-      false: "text-text"
-    }
-  }
-});
 var FeatureCard = forwardRef(
-  ({ heading: h, description: d, imageUrl, className, style, ...rest }, ref) => {
-    const hasImage = Boolean(imageUrl);
-    const bgStyle = hasImage ? {
-      backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 70%), url(${imageUrl})`
-    } : void 0;
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        ref,
-        className: cn(card({ hasImage }), className),
-        style: { ...bgStyle, ...style },
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx("h3", { className: heading({ hasImage }), children: h }),
-          d ? /* @__PURE__ */ jsx("p", { className: description({ hasImage }), children: d }) : null
-        ]
-      }
-    );
-  }
+  ({ heading: h, description: d, imageUrl, className, style, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "article",
+    {
+      ref,
+      className: cn(
+        "relative flex flex-col w-full aspect-[268/355] rounded-lg overflow-hidden shadow-card border border-border bg-surface",
+        className
+      ),
+      style,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-sm px-lg pt-lg flex-1 min-h-0", children: [
+          /* @__PURE__ */ jsx("h3", { className: "m-0 text-lg font-semibold leading-card text-primary", children: h }),
+          d ? /* @__PURE__ */ jsx("p", { className: "m-0 text-sm font-normal leading-body text-text", children: d }) : null
+        ] }),
+        imageUrl ? /* @__PURE__ */ jsx("div", { className: "relative flex justify-center items-end h-[45%] shrink-0 overflow-hidden bg-brand-shade-1", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageUrl,
+            alt: "",
+            "aria-hidden": "true",
+            className: "w-full h-full object-contain object-bottom"
+          }
+        ) }) : null
+      ]
+    }
+  )
 );
 FeatureCard.displayName = "FeatureCard";
 var PinSvg = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
@@ -720,10 +701,10 @@ var PackageCard = forwardRef(
 );
 PackageCard.displayName = "PackageCard";
 var SectionHeader = forwardRef(
-  ({ heading: heading2, subheading, align = "center", className, ...rest }, ref) => {
+  ({ heading, subheading, align = "center", className, ...rest }, ref) => {
     const alignClass = align === "center" ? "items-center text-center" : "items-start text-left";
     return /* @__PURE__ */ jsxs("header", { ref, className: cn("flex flex-col mb-xl", alignClass, className), ...rest, children: [
-      /* @__PURE__ */ jsx("h2", { className: "m-0 text-section-heading", children: heading2 }),
+      /* @__PURE__ */ jsx("h2", { className: "m-0 text-section-heading", children: heading }),
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "block w-[96px] h-1 mt-sm mb-md bg-accent rounded-sm" }),
       subheading ? /* @__PURE__ */ jsx("p", { className: "m-0 max-w-[720px] text-section-subheading", children: subheading }) : null
     ] });
@@ -875,7 +856,7 @@ var TripCategoryCard = forwardRef(
 );
 TripCategoryCard.displayName = "TripCategoryCard";
 var WarriorCard = forwardRef(
-  ({ icon, name, description: description2, className, ...rest }, ref) => /* @__PURE__ */ jsxs(
+  ({ icon, name, description, className, ...rest }, ref) => /* @__PURE__ */ jsxs(
     "article",
     {
       ref,
@@ -901,7 +882,7 @@ var WarriorCard = forwardRef(
             className: "block w-[56px] h-[2px] mt-sm mb-md bg-accent rounded-sm"
           }
         ),
-        /* @__PURE__ */ jsx("p", { className: "m-0 text-card-body", children: description2 })
+        /* @__PURE__ */ jsx("p", { className: "m-0 text-card-body", children: description })
       ]
     }
   )
@@ -938,9 +919,9 @@ var BottomNav = forwardRef(
 );
 BottomNav.displayName = "BottomNav";
 var BrandsSection = forwardRef(
-  ({ heading: heading2, subheading, brands, className, ...rest }, ref) => {
+  ({ heading, subheading, brands, className, ...rest }, ref) => {
     return /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col w-full", className), ...rest, children: [
-      /* @__PURE__ */ jsx(SectionHeader, { heading: heading2, subheading }),
+      /* @__PURE__ */ jsx(SectionHeader, { heading, subheading }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-lg justify-center w-full", children: brands.map((brand) => /* @__PURE__ */ jsx(BrandLogo, { ...brand }, brand.name)) })
     ] });
   }
@@ -1460,7 +1441,7 @@ var ContactSection = forwardRef(
   ({
     illustration,
     eyebrow,
-    heading: heading2,
+    heading,
     submitLabel,
     headerIllustration,
     countryCodes,
@@ -1474,7 +1455,7 @@ var ContactSection = forwardRef(
       ref,
       className: cn(
         "flex w-full justify-center",
-        "lg:items-center lg:gap-16 lg:px-xl lg:py-xl lg:bg-primary lg:rounded-lg lg:shadow-card",
+        "lg:items-center lg:gap-24 lg:px-xl lg:py-xl lg:bg-primary lg:rounded-lg lg:shadow-card",
         className
       ),
       ...rest,
@@ -1491,7 +1472,7 @@ var ContactSection = forwardRef(
           ContactForm,
           {
             eyebrow,
-            heading: heading2,
+            heading,
             submitLabel,
             headerIllustration,
             countryCodes,
@@ -1542,12 +1523,12 @@ var CtaBanner = forwardRef(
 );
 CtaBanner.displayName = "CtaBanner";
 var DestinationsSection = forwardRef(
-  ({ heading: heading2, destinations, className, ...rest }, ref) => {
+  ({ heading, destinations, className, ...rest }, ref) => {
     const half = Math.ceil(destinations.length / 2);
     const firstRow = destinations.slice(0, half);
     const secondRow = destinations.slice(half);
     return /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col gap-lg bg-surface", className), ...rest, children: [
-      /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
+      /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-md overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
         /* @__PURE__ */ jsx("div", { className: "flex gap-md w-max", children: firstRow.map((destination) => /* @__PURE__ */ jsx(
           DestinationCard,
@@ -1620,7 +1601,16 @@ var useScrollSnap = (itemCount) => {
   const scrollToStart = useCallback(() => {
     elRef.current?.scrollTo({ left: 0, behavior: "smooth" });
   }, []);
-  return { ref: setRef, scrollPrev, scrollNext, scrollToStart, canPrev, canNext, activeIndex, scrollProgress };
+  return {
+    ref: setRef,
+    scrollPrev,
+    scrollNext,
+    scrollToStart,
+    canPrev,
+    canNext,
+    activeIndex,
+    scrollProgress
+  };
 };
 var ChevronLeft = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
   "path",
@@ -1751,8 +1741,8 @@ var EventCarousel = forwardRef(
 );
 EventCarousel.displayName = "EventCarousel";
 var ExploreSection = forwardRef(
-  ({ heading: heading2, items, className, ...rest }, ref) => /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col gap-lg bg-surface", className), ...rest, children: [
-    /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
+  ({ heading, items, className, ...rest }, ref) => /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col gap-lg bg-surface", className), ...rest, children: [
+    /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading }),
     /* @__PURE__ */ jsx("div", { className: "flex gap-md overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => /* @__PURE__ */ jsx(
       ExploreCard,
       {
@@ -1767,7 +1757,7 @@ var ExploreSection = forwardRef(
 );
 ExploreSection.displayName = "ExploreSection";
 var FaqSection = ({
-  heading: heading2,
+  heading,
   subheading,
   faqs,
   singleOpen = false,
@@ -1776,7 +1766,7 @@ var FaqSection = ({
 }) => {
   const [openIndex, setOpenIndex] = useState(null);
   return /* @__PURE__ */ jsxs("section", { className: cn("py-xl px-lg", className), ...rest, children: [
-    /* @__PURE__ */ jsx(SectionHeader, { heading: heading2, subheading }),
+    /* @__PURE__ */ jsx(SectionHeader, { heading, subheading }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-md max-w-[760px] mx-auto", children: faqs.map((faq, index) => {
       if (!singleOpen) {
         return /* @__PURE__ */ jsx(FaqExpandable, { ...faq }, faq.question);
@@ -1860,8 +1850,8 @@ var Footer = forwardRef(
     ...rest
   }, ref) => {
     const [openColumns, setOpenColumns] = useState({});
-    const toggleColumn = (heading2) => {
-      setOpenColumns((prev) => ({ ...prev, [heading2]: !prev[heading2] }));
+    const toggleColumn = (heading) => {
+      setOpenColumns((prev) => ({ ...prev, [heading]: !prev[heading] }));
     };
     return /* @__PURE__ */ jsxs("footer", { ref, className: cn("flex flex-col items-center", className), ...rest, children: [
       /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "w-full h-2 bg-primary rounded-t-[200px]" }),
@@ -2013,7 +2003,7 @@ var ChevronRight2 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16"
 var arrowBase2 = "absolute top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-8 h-8 bg-primary border-none rounded-full text-on-dark cursor-pointer shadow-card transition-opacity duration-150 ease-in z-[20] disabled:opacity-40 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 max-md:hidden";
 var curveBase = "pointer-events-none absolute z-10 left-0 right-0 h-[80px] bg-surface rounded-[50%] max-md:h-[40px]";
 var GallerySection = forwardRef(
-  ({ heading: heading2, subheading, photos, className, ...rest }, ref) => {
+  ({ heading, subheading, photos, className, ...rest }, ref) => {
     const { ref: trackRef, scrollPrev, scrollNext, canPrev, canNext } = useScrollSnap(photos.length);
     return /* @__PURE__ */ jsxs(
       "section",
@@ -2022,7 +2012,7 @@ var GallerySection = forwardRef(
         className: cn("relative flex flex-col items-center gap-lg bg-surface", className),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx(SectionHeader, { heading: heading2, subheading, align: "center" }),
+          /* @__PURE__ */ jsx(SectionHeader, { heading, subheading, align: "center" }),
           /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
             /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn(curveBase, "-top-[40px] max-md:-top-[20px]") }),
             /* @__PURE__ */ jsx(
@@ -2374,9 +2364,9 @@ var Navbar = forwardRef(
 );
 Navbar.displayName = "Navbar";
 var OfficesSection = forwardRef(
-  ({ heading: heading2, subheading, locations, className, ...rest }, ref) => {
+  ({ heading, subheading, locations, className, ...rest }, ref) => {
     return /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col w-full", className), ...rest, children: [
-      /* @__PURE__ */ jsx(SectionHeader, { heading: heading2, subheading }),
+      /* @__PURE__ */ jsx(SectionHeader, { heading, subheading }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-lg w-full [&>*]:flex-[1_1_280px]", children: locations.map((office) => /* @__PURE__ */ jsx(LocationCard, { ...office }, office.location)) })
     ] });
   }
@@ -2415,7 +2405,7 @@ var ArrowRight = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", v
 var arrowBase3 = "absolute top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-8 h-8 bg-primary border-none rounded-full text-on-dark cursor-pointer shadow-card transition-opacity duration-150 ease-in z-[1] disabled:opacity-40 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 max-md:hidden";
 var PackagesCarousel = forwardRef(
   ({
-    heading: heading2,
+    heading,
     viewAllHref,
     viewAllLabel = "View All",
     months,
@@ -2440,7 +2430,7 @@ var PackagesCarousel = forwardRef(
         ...rest,
         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xl w-full", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-lg", children: [
-            /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-5 text-secondary", children: heading2 }),
+            /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-5 text-secondary", children: heading }),
             viewAllHref ? /* @__PURE__ */ jsxs(
               "a",
               {
@@ -2515,7 +2505,7 @@ var SiteHeader = forwardRef(
 );
 SiteHeader.displayName = "SiteHeader";
 var TeamSection = forwardRef(
-  ({ heading: heading2, subheading, members, className, ...rest }, ref) => {
+  ({ heading, subheading, members, className, ...rest }, ref) => {
     const { ref: trackRef, activeIndex } = useScrollSnap(members.length);
     return /* @__PURE__ */ jsxs(
       "section",
@@ -2529,7 +2519,7 @@ var TeamSection = forwardRef(
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx(SectionHeader, { heading: heading2, subheading }),
+          /* @__PURE__ */ jsx(SectionHeader, { heading, subheading }),
           /* @__PURE__ */ jsx(
             "ul",
             {
@@ -2703,7 +2693,7 @@ var TestimonialsCarousel = forwardRef(
 );
 TestimonialsCarousel.displayName = "TestimonialsCarousel";
 var TextSection = forwardRef(
-  ({ heading: heading2, paragraphs, align = "left", className, ...rest }, ref) => /* @__PURE__ */ jsxs(
+  ({ heading, paragraphs, align = "left", className, ...rest }, ref) => /* @__PURE__ */ jsxs(
     "section",
     {
       ref,
@@ -2714,7 +2704,7 @@ var TextSection = forwardRef(
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("h2", { className: "m-0 text-section-heading", children: heading2 }),
+        /* @__PURE__ */ jsx("h2", { className: "m-0 text-section-heading", children: heading }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-md max-w-[760px]", children: paragraphs.map((paragraph) => /* @__PURE__ */ jsx("p", { className: "m-0 text-card-body", children: paragraph }, paragraph)) })
       ]
     }
@@ -2743,7 +2733,7 @@ var ChevronRight5 = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16"
 ) });
 var arrowBase4 = "absolute top-[calc(50%+30px)] -translate-y-1/2 inline-flex items-center justify-center w-8 h-8 bg-surface border border-border rounded-full text-primary cursor-pointer shadow-card transition-opacity duration-150 ease-in z-[1] disabled:opacity-40 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 max-md:hidden";
 var TripsCategorySection = forwardRef(
-  ({ title, description: description2, cta, poster, videoSrc, trips, className, ...rest }, ref) => {
+  ({ title, description, cta, poster, videoSrc, trips, className, ...rest }, ref) => {
     const {
       ref: trackRef,
       scrollPrev,
@@ -2765,7 +2755,7 @@ var TripsCategorySection = forwardRef(
         /* @__PURE__ */ 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__ */ jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, poster, src: videoSrc }) }),
         /* @__PURE__ */ 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: [
           /* @__PURE__ */ jsx("h2", { className: "m-0 text-hero-title max-w-[436px]", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description2 }),
+          /* @__PURE__ */ jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -2930,10 +2920,10 @@ var UctMobileBanner = forwardRef(
 );
 UctMobileBanner.displayName = "UctMobileBanner";
 var ValuesSection = forwardRef(
-  ({ heading: heading2, subheading, values, singleOpen = false, className, ...rest }, ref) => {
+  ({ heading, subheading, values, singleOpen = false, className, ...rest }, ref) => {
     const [openIndex, setOpenIndex] = useState(null);
     return /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col w-full", className), ...rest, children: [
-      /* @__PURE__ */ jsx(SectionHeader, { heading: heading2, subheading }),
+      /* @__PURE__ */ jsx(SectionHeader, { heading, subheading }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-md w-full", children: values.map((value, index) => {
         const serialNumber = index + 1;
         if (!singleOpen) {
@@ -2964,16 +2954,16 @@ var ValuesSection = forwardRef(
 );
 ValuesSection.displayName = "ValuesSection";
 var WarriorsSection = forwardRef(
-  ({ heading: heading2, subheading, warriors, className, ...rest }, ref) => {
+  ({ heading, subheading, warriors, className, ...rest }, ref) => {
     return /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col w-full", className), ...rest, children: [
-      /* @__PURE__ */ jsx(SectionHeader, { heading: heading2, subheading }),
+      /* @__PURE__ */ jsx(SectionHeader, { heading, subheading }),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(240px,1fr))] gap-lg w-full", children: warriors.map((warrior) => /* @__PURE__ */ jsx(WarriorCard, { ...warrior }, warrior.name)) })
     ] });
   }
 );
 WarriorsSection.displayName = "WarriorsSection";
 var WhyChooseSection = forwardRef(
-  ({ heading: heading2, features, className, ...rest }, ref) => {
+  ({ heading, features, className, ...rest }, ref) => {
     const { ref: trackRef, activeIndex } = useScrollSnap(features.length);
     return /* @__PURE__ */ jsxs(
       "section",
@@ -2988,7 +2978,7 @@ var WhyChooseSection = forwardRef(
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx("h2", { className: "m-0 text-section-h2 text-secondary text-center", children: heading2 }),
+          /* @__PURE__ */ jsx("h2", { className: "m-0 text-section-h2 text-secondary text-center", children: heading }),
           /* @__PURE__ */ jsx(
             "ul",
             {