@digital-b2c/coreui-kit 0.4.1 → 0.4.3

package/dist/index.mjs

@@ -1,9 +1,12 @@
-import clsx3 from 'clsx';
+import clsx19 from 'clsx';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React52, { useRef, Children, isValidElement, useState, useCallback, useEffect } from 'react';
-import { gsap } from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import React52, { forwardRef, Children, isValidElement, useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import gsap$1, { gsap } from 'gsap';
 import { useGSAP } from '@gsap/react';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { FreeMode } from 'swiper/modules';
+import 'swiper/css';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -55,7 +58,7 @@ var Picture = (_a) => {
       __spreadValues({
         src: desktop.src,
         alt: desktop.alt,
-        className: clsx3(className, Picture_module_default["image-desktop"])
+        className: clsx19(className, Picture_module_default["image-desktop"])
       }, rest)
     ),
     /* @__PURE__ */ jsx(
@@ -63,7 +66,7 @@ var Picture = (_a) => {
       __spreadValues({
         src: (_b2 = mobile == null ? void 0 : mobile.src) != null ? _b2 : desktop.src,
         alt: (_c = mobile == null ? void 0 : mobile.alt) != null ? _c : desktop.alt,
-        className: clsx3(className, Picture_module_default["image-mobile"])
+        className: clsx19(className, Picture_module_default["image-mobile"])
       }, rest)
     )
   ] });
@@ -377,7 +380,7 @@ var Button = (_a) => {
   ]);
   const isLink = !!href;
   const props = __spreadValues(__spreadValues({
-    className: clsx3(
+    className: clsx19(
       Button_module_default.button,
       variant ? Button_module_default[variant] : null,
       { [Button_module_default.fullWidth]: !!fullWidth },
@@ -486,9 +489,7 @@ var BrandsStrip_module_default = {
   title: "BrandsStrip_module_title",
   blurred: "BrandsStrip_module_blurred",
   logos: "BrandsStrip_module_logos",
-  marquee: "BrandsStrip_module_marquee",
-  scrollIndividual: "BrandsStrip_module_scrollIndividual",
-  paused: "BrandsStrip_module_paused",
+  marqueeGSAP: "BrandsStrip_module_marqueeGSAP",
   logo: "BrandsStrip_module_logo",
   cta: "BrandsStrip_module_cta"
 };
@@ -498,37 +499,136 @@ var BrandsStrip = ({
   title,
   logos = [],
   cta,
-  size,
-  animate = false
+  size
 }) => {
   const [show, setShow] = useState(false);
+  const [shouldAnimate, setShouldAnimate] = useState(false);
   const { is } = useViewPort_default();
   const isTabletBelow = is("tablet", "below");
-  const shouldAnimate = title && animate;
+  const containerRef = useRef(null);
+  const marqueeRef = useRef(null);
+  const timeline = useRef(null);
+  const horizontalLoop = (items, config) => {
+    const itemsArray = gsap$1.utils.toArray(items);
+    const cfg = config || {};
+    const tl = gsap$1.timeline({
+      repeat: cfg.repeat,
+      paused: cfg.paused,
+      defaults: { ease: "none" },
+      onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100)
+    });
+    const length = itemsArray.length;
+    const startX = itemsArray[0].offsetLeft;
+    const widths = [];
+    const xPercents = [];
+    const pixelsPerSecond = (cfg.speed || 1) * 100;
+    const snap = cfg.snap === false ? (v) => v : gsap$1.utils.snap(cfg.snap || 1);
+    gsap$1.set(itemsArray, {
+      xPercent: (i, target) => {
+        const w = widths[i] = parseFloat(gsap$1.getProperty(target, "width", "px"));
+        xPercents[i] = snap(
+          parseFloat(gsap$1.getProperty(target, "x", "px")) / w * 100 + gsap$1.getProperty(target, "xPercent")
+        );
+        return xPercents[i];
+      }
+    });
+    gsap$1.set(itemsArray, { x: 0 });
+    const totalWidth = itemsArray[length - 1].offsetLeft + xPercents[length - 1] / 100 * widths[length - 1] - startX + itemsArray[length - 1].offsetWidth * gsap$1.getProperty(itemsArray[length - 1], "scaleX") + (parseFloat(cfg.paddingRight) || 0);
+    for (let i = 0; i < length; i++) {
+      const item = itemsArray[i];
+      const curX = xPercents[i] / 100 * widths[i];
+      const distanceToStart = item.offsetLeft - startX;
+      const distanceToLoop = distanceToStart + widths[i] * gsap$1.getProperty(item, "scaleX");
+      tl.to(
+        item,
+        {
+          xPercent: snap((curX - distanceToLoop) / widths[i] * 100),
+          duration: distanceToLoop / pixelsPerSecond
+        },
+        0
+      ).fromTo(
+        item,
+        { xPercent: snap((curX - distanceToLoop + totalWidth) / widths[i] * 100) },
+        {
+          xPercent: xPercents[i],
+          duration: (totalWidth - distanceToLoop) / pixelsPerSecond,
+          immediateRender: false
+        },
+        distanceToLoop / pixelsPerSecond
+      ).add("label" + i, distanceToStart / pixelsPerSecond);
+    }
+    return tl;
+  };
+  useGSAP(
+    () => {
+      const refreshCalculations = () => {
+        if (!marqueeRef.current || !containerRef.current || logos.length === 0) return;
+        const items = gsap$1.utils.toArray(marqueeRef.current.children);
+        if (items.length === 0) return;
+        const itemWidth = items[0].clientWidth;
+        const calculatedTotalWidth = shouldAnimate ? itemWidth * items.length + 120 * (items.length - 1) / 2 : itemWidth * items.length + 120 * (items.length - 1);
+        const containerWidth = containerRef.current.clientWidth;
+        if (containerWidth === 0) {
+          requestAnimationFrame(refreshCalculations);
+          return;
+        }
+        if (containerWidth < calculatedTotalWidth) {
+          setShouldAnimate(true);
+          const ctx = gsap$1.context(() => {
+            const loop = horizontalLoop(items, {
+              repeat: -1,
+              speed: 1,
+              paddingRight: 120
+            });
+            timeline.current = loop;
+          }, containerRef);
+          return () => ctx.revert();
+        }
+      };
+      refreshCalculations();
+    },
+    { scope: containerRef, dependencies: [logos] }
+  );
+  const handleMouseEnter = () => {
+    setShow(true);
+    if (timeline.current) {
+      timeline.current.pause();
+    }
+  };
+  const handleMouseLeave = () => {
+    setShow(false);
+    if (timeline.current) {
+      timeline.current.play();
+    }
+  };
+  const duplicatedLogos = useMemo(() => {
+    if (logos.length === 0) return [];
+    if (!shouldAnimate) return [...logos];
+    return [...logos, ...logos];
+  }, [logos]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx3(
+      ref: containerRef,
+      className: clsx19(
         BrandsStrip_module_default.brandsStrip,
         BrandsStrip_module_default[variant],
         { [BrandsStrip_module_default.small]: size === "small" },
         className
       ),
-      onMouseEnter: () => setShow(true),
-      onMouseLeave: () => setShow(false),
-      style: { "--total-items": logos.length },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: clsx3(BrandsStrip_module_default.container, { [BrandsStrip_module_default.blurred]: show && logos.length > 1 }), children: [
-          title && logos.length == 1 && /* @__PURE__ */ jsx("h2", { className: clsx3("body", BrandsStrip_module_default.title), children: title }),
-          logos.length > 0 && /* @__PURE__ */ jsx("div", { className: clsx3(BrandsStrip_module_default.logos, { [BrandsStrip_module_default.marquee]: shouldAnimate }), children: logos.map((logo, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: clsx19(BrandsStrip_module_default.container, { [BrandsStrip_module_default.blurred]: show && logos.length > 1 }), children: [
+          title && logos.length === 1 && /* @__PURE__ */ jsx("h2", { className: clsx19("body", BrandsStrip_module_default.title), children: title }),
+          logos.length > 0 && /* @__PURE__ */ jsx(
             "div",
             {
-              className: clsx3(BrandsStrip_module_default.logoWrapper, { [BrandsStrip_module_default.paused]: show }),
-              style: { "--item-index": index },
-              children: /* @__PURE__ */ jsx(Picture, __spreadValues({ className: BrandsStrip_module_default.logo }, logo))
-            },
-            index
-          )) })
+              ref: marqueeRef,
+              className: clsx19(BrandsStrip_module_default.logos, { [BrandsStrip_module_default.marqueeGSAP]: shouldAnimate }),
+              children: duplicatedLogos.map((logo, index) => /* @__PURE__ */ jsx("div", { className: BrandsStrip_module_default.logoWrapper, children: /* @__PURE__ */ jsx(Picture, __spreadValues({ className: BrandsStrip_module_default.logo }, logo)) }, `${logo.alt}-${index}`))
+            }
+          )
         ] }),
         cta && show && logos.length > 1 && /* @__PURE__ */ jsx(
           Button,
@@ -568,34 +668,38 @@ function resolveCompoundSlots(children, slots) {
 // src/components/Card/Card.module.scss
 var Card_module_default = {
   card: "Card_module_card",
-  logo: "Card_module_logo"
-};
-var Card = ({ className, title, subtitle, cta, icon, logo, children }) => {
-  var _a, _b;
-  const slots = resolveCompoundSlots(children, {
-    title: CardTitle,
-    subtitle: CardSubtitle
-  });
-  const titleNode = (_a = slots.title) != null ? _a : title;
-  const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxs("div", { className: clsx3(Card_module_default.card, className), children: [
-    logo ? /* @__PURE__ */ jsx(Picture, __spreadValues({ className: Card_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsx(Icon, { type: icon, className: Card_module_default.logo }),
-    /* @__PURE__ */ jsxs("div", { className: Card_module_default.content, children: [
-      titleNode && /* @__PURE__ */ jsx("h3", { className: "h4", children: titleNode }),
-      subtitleNode && subtitleNode
-    ] }),
-    cta && /* @__PURE__ */ jsx(
-      Button,
-      {
-        href: cta.url,
-        isExternal: cta.isExternal,
-        variant: "secondary",
-        icon: cta.url ? "rightBlack" : void 0,
-        children: cta.label
-      }
-    )
-  ] });
-};
+  logo: "Card_module_logo",
+  subtitle: "Card_module_subtitle"
+};
+var Card = forwardRef(
+  ({ className, title, subtitle, cta, icon, logo, children }, ref) => {
+    var _a, _b;
+    const slots = resolveCompoundSlots(children, {
+      title: CardTitle,
+      subtitle: CardSubtitle
+    });
+    const titleNode = (_a = slots.title) != null ? _a : title;
+    const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx19(Card_module_default.card, className), children: [
+      (logo == null ? void 0 : logo.src) ? /* @__PURE__ */ jsx(Picture, __spreadValues({ className: Card_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsx(Icon, { type: icon, className: Card_module_default.logo }),
+      /* @__PURE__ */ jsxs("div", { className: Card_module_default.content, children: [
+        titleNode && /* @__PURE__ */ jsx("h3", { className: "h4", children: titleNode }),
+        subtitleNode && /* @__PURE__ */ jsx("div", { className: Card_module_default.subtitle, children: subtitleNode })
+      ] }),
+      cta && /* @__PURE__ */ jsx(
+        Button,
+        {
+          href: cta.url,
+          isExternal: cta.isExternal,
+          variant: "secondary",
+          icon: cta.url ? "rightBlack" : void 0,
+          children: cta.label
+        }
+      )
+    ] });
+  }
+);
+Card.displayName = "Card";
 
 // src/components/Card/index.ts
 var Card2 = Object.assign(Card, {
@@ -618,10 +722,10 @@ var CountingCard = ({ className, title, count, image, children }) => {
     title: CountingCardTitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
-  return /* @__PURE__ */ jsxs("div", { className: clsx3(CountingCard_module_default["counting-card"], className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx19(CountingCard_module_default["counting-card"], className), children: [
     /* @__PURE__ */ jsxs("div", { className: CountingCard_module_default.content, children: [
       titleNode && /* @__PURE__ */ jsx("div", { className: "body", children: titleNode }),
-      count && /* @__PURE__ */ jsx("div", { className: clsx3(CountingCard_module_default.count, "h1"), children: count })
+      count && /* @__PURE__ */ jsx("div", { className: clsx19(CountingCard_module_default.count, "h1"), children: count })
     ] }),
     image && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: CountingCard_module_default.logo }, image))
   ] });
@@ -653,9 +757,9 @@ var InfoCard = ({ className, title, subtitle, icon, badge, children }) => {
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxs("div", { className: clsx3(InfoCard_module_default["info-card"], { [InfoCard_module_default.hasIcon]: !!icon }, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx19(InfoCard_module_default["info-card"], { [InfoCard_module_default.hasIcon]: !!icon }, className), children: [
     /* @__PURE__ */ jsxs("div", { className: InfoCard_module_default.header, children: [
-      icon ? /* @__PURE__ */ jsx(Icon, { type: icon }) : badge ? /* @__PURE__ */ jsx("div", { className: clsx3(InfoCard_module_default.badge, "h4"), children: badge }) : null,
+      icon ? /* @__PURE__ */ jsx(Icon, { type: icon }) : badge ? /* @__PURE__ */ jsx("div", { className: clsx19(InfoCard_module_default.badge, "h4"), children: badge }) : null,
       titleNode && /* @__PURE__ */ jsx("div", { className: "h4", children: titleNode })
     ] }),
     subtitleNode && /* @__PURE__ */ jsx("div", { className: "body", children: subtitleNode })
@@ -717,7 +821,7 @@ var Pagination = ({
     setActivePage(page);
     onPageChange == null ? void 0 : onPageChange(page);
   };
-  return /* @__PURE__ */ jsxs("div", { className: clsx3(Pagination_module_default.pagination, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx19(Pagination_module_default.pagination, className), children: [
     !disableArrows && /* @__PURE__ */ jsx(
       "button",
       {
@@ -734,7 +838,7 @@ var Pagination = ({
         "button",
         {
           onClick: () => goToPage(page),
-          className: clsx3(Pagination_module_default.page, {
+          className: clsx19(Pagination_module_default.page, {
             [Pagination_module_default.active]: activePage === page,
             [Pagination_module_default.number]: hasNumber
           }),
@@ -761,10 +865,13 @@ var Pagination = ({
 var Container_module_default = {
   container: "Container_module_container"
 };
-var Container = (_a) => {
-  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: clsx3(Container_module_default.container, className) }, props), { children }));
-};
+var Container = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className: clsx19(Container_module_default.container, className) }, props), { children }));
+  }
+);
+Container.displayName = "Container";
 
 // src/components/PracticeCard/PracticeCard.module.scss
 var PracticeCard_module_default = {
@@ -779,7 +886,7 @@ var PracticeCard_module_default = {
 };
 var PracticeCard = ({ className, title, cta, image }) => {
   const { url: href, isExternal } = cta != null ? cta : {};
-  return /* @__PURE__ */ jsx("div", { className: clsx3(PracticeCard_module_default["practice-card"], className), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: clsx19(PracticeCard_module_default["practice-card"], className), children: /* @__PURE__ */ jsxs(
     ConditionalWrapper,
     __spreadProps(__spreadValues({
       className: PracticeCard_module_default.wrapper,
@@ -790,7 +897,7 @@ var PracticeCard = ({ className, title, cta, image }) => {
       children: [
         image && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: PracticeCard_module_default.background }, image)),
         /* @__PURE__ */ jsxs("div", { className: PracticeCard_module_default.container, children: [
-          title && /* @__PURE__ */ jsx("div", { className: clsx3(PracticeCard_module_default.title, "h3"), children: title }),
+          title && /* @__PURE__ */ jsx("div", { className: clsx19(PracticeCard_module_default.title, "h3"), children: title }),
           href && /* @__PURE__ */ jsxs("div", { className: PracticeCard_module_default.cta, children: [
             /* @__PURE__ */ jsx(Icon, { className: PracticeCard_module_default.ctaRest, type: "right" }),
             /* @__PURE__ */ jsx(Icon, { className: PracticeCard_module_default.ctaHover, type: "tiltedRight" })
@@ -812,31 +919,94 @@ var CardCollection_module_default = {
   "card-collection": "CardCollection_module_card-collection",
   content: "CardCollection_module_content",
   wrapper: "CardCollection_module_wrapper",
+  cardWrapper: "CardCollection_module_cardWrapper",
   threeCols: "CardCollection_module_threeCols",
-  examCard: "CardCollection_module_examCard"
+  examCard: "CardCollection_module_examCard",
+  "reveal-wrapper": "CardCollection_module_reveal-wrapper",
+  "reveal-inner": "CardCollection_module_reveal-inner",
+  card: "CardCollection_module_card",
+  "is-expanded": "CardCollection_module_is-expanded",
+  cta: "CardCollection_module_cta"
 };
 var CardCollection = ({
   className,
   variant = "default",
   title,
   subtitle,
-  cards,
+  cards = [],
+  ctaLabel,
   children
 }) => {
   var _a, _b;
+  const container = useRef(null);
+  const revealWrapper = useRef(null);
+  const extraCard = useRef(null);
+  const [isExpanded, setIsExpanded] = useState(false);
   const slots = resolveCompoundSlots(children, {
     title: CardCollectionTitle,
     subtitle: CardCollectionSubtitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxs(Container, { className: clsx3(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className), children: [
-    /* @__PURE__ */ jsxs("div", { className: CardCollection_module_default.content, children: [
-      titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
-      subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: CardCollection_module_default.wrapper, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsx(Card2, __spreadValues({ className: CardCollection_module_default.card }, card), key)) })
-  ] });
+  const isExamCard = variant === "examCard";
+  const visibleCards = isExamCard ? cards.slice(0, 8) : cards;
+  const hiddenCards = isExamCard ? cards.slice(8) : [];
+  const { contextSafe } = useGSAP({ scope: container });
+  const handleShowMore = useCallback(() => {
+    contextSafe(() => {
+      setIsExpanded(true);
+      const tl = gsap$1.timeline({ defaults: { ease: "power3.inOut" } });
+      tl.to(`.${CardCollection_module_default.cta}`, {
+        opacity: 0,
+        y: 20,
+        duration: 0.3,
+        display: "none"
+      }).to(`.${CardCollection_module_default.cardWrapper}`, { height: "auto", duration: 0.2 }, "<").to(
+        revealWrapper.current,
+        {
+          height: "auto",
+          duration: 0.3
+        },
+        "-=0.1"
+      ).from(
+        extraCard.current,
+        {
+          opacity: 0,
+          y: 30,
+          duration: 0.3,
+          clearProps: "all"
+        },
+        "-=0.3"
+      );
+    })();
+  }, [contextSafe]);
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      ref: container,
+      className: clsx19(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: CardCollection_module_default.content, children: [
+          titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
+          subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: CardCollection_module_default.wrapper, children: /* @__PURE__ */ jsxs("div", { className: clsx19(CardCollection_module_default.cardWrapper, { [CardCollection_module_default["is-expanded"]]: isExpanded }), children: [
+          visibleCards.map((card, key) => /* @__PURE__ */ jsx(Card2, __spreadValues({ className: CardCollection_module_default.card }, card), key)),
+          isExamCard && hiddenCards.length > 0 && /* @__PURE__ */ jsx("div", { ref: revealWrapper, className: CardCollection_module_default["reveal-wrapper"], children: /* @__PURE__ */ jsx("div", { className: CardCollection_module_default["reveal-inner"], children: hiddenCards.map((card, key) => /* @__PURE__ */ jsx(Card2, __spreadValues({ ref: extraCard, className: CardCollection_module_default.card }, card), key)) }) }),
+          isExamCard && !isExpanded && ctaLabel && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              icon: "downChevronBlack",
+              className: CardCollection_module_default.cta,
+              onClick: handleShowMore,
+              children: ctaLabel
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
 };
 
 // src/widgets/CardCollection/index.ts
@@ -913,7 +1083,7 @@ var ContactModule = ({
     },
     { scope: containerRef, dependencies: [blurred, animateBlur] }
   );
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx3(ContactModule_module_default["contact-module"], className), children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx19(ContactModule_module_default["contact-module"], className), children: [
     blurred && /* @__PURE__ */ jsx(
       "div",
       {
@@ -928,8 +1098,8 @@ var ContactModule = ({
     /* @__PURE__ */ jsxs(Container, { className: ContactModule_module_default.container, children: [
       /* @__PURE__ */ jsxs("div", { className: ContactModule_module_default.wrapper, children: [
         /* @__PURE__ */ jsxs("div", { className: ContactModule_module_default.content, children: [
-          titleNode && /* @__PURE__ */ jsx("div", { className: clsx3(ContactModule_module_default.title, "h1"), children: titleNode }),
-          subtitleNode && /* @__PURE__ */ jsx("div", { className: clsx3(ContactModule_module_default.subtitle, "subheading"), children: subtitleNode })
+          titleNode && /* @__PURE__ */ jsx("div", { className: clsx19(ContactModule_module_default.title, "h1"), children: titleNode }),
+          subtitleNode && /* @__PURE__ */ jsx("div", { className: clsx19(ContactModule_module_default.subtitle, "subheading"), children: subtitleNode })
         ] }),
         /* @__PURE__ */ jsx("div", { className: ContactModule_module_default["cta-wrapper"], children: ctas == null ? void 0 : ctas.map((cta, key) => /* @__PURE__ */ jsx(
           Button,
@@ -953,6 +1123,75 @@ var ContactModule2 = Object.assign(ContactModule, {
   Title: ContactModuleTitle,
   Subtitle: ContactModuleSubtitle
 });
+var FooterDisclaimer = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
+// src/widgets/Footer/Footer.module.scss
+var Footer_module_default = {
+  footer: "Footer_module_footer",
+  container: "Footer_module_container",
+  bottom: "Footer_module_bottom",
+  "bottom-left": "Footer_module_bottom-left",
+  "bottom-right": "Footer_module_bottom-right",
+  supporters: "Footer_module_supporters",
+  "supporters-logos": "Footer_module_supporters-logos",
+  "supporter-link-primary": "Footer_module_supporter-link-primary",
+  "supporter-link": "Footer_module_supporter-link",
+  disclaimer: "Footer_module_disclaimer",
+  copyright: "Footer_module_copyright",
+  "nav-list": "Footer_module_nav-list",
+  "nav-link": "Footer_module_nav-link"
+};
+var Footer = ({
+  className,
+  supporters = [],
+  navigationLinks = [],
+  disclaimer,
+  copyright,
+  children
+}) => {
+  var _a;
+  const columns = [];
+  for (let i = 0; i < navigationLinks.length; i += 5) {
+    columns.push(navigationLinks.slice(i, i + 5));
+  }
+  const slots = resolveCompoundSlots(children, {
+    disclaimer: FooterDisclaimer
+  });
+  const titleNode = (_a = slots.disclaimer) != null ? _a : disclaimer;
+  return /* @__PURE__ */ jsx("footer", { className: clsx19(Footer_module_default.footer, className), children: /* @__PURE__ */ jsxs(Container, { className: Footer_module_default.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: Footer_module_default.bottom, children: [
+      /* @__PURE__ */ jsxs("div", { className: Footer_module_default["bottom-left"], children: [
+        supporters.length > 0 && /* @__PURE__ */ jsx("div", { className: Footer_module_default.supporters, children: /* @__PURE__ */ jsx("div", { className: Footer_module_default["supporters-logos"], children: supporters.map(
+          (supporter, index) => supporter.href ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: supporter.href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: Footer_module_default["supporter-link"],
+              children: /* @__PURE__ */ jsx(Picture, __spreadValues({}, supporter.image))
+            },
+            index
+          ) : /* @__PURE__ */ jsx("div", { className: Footer_module_default["supporter-link-primary"], children: /* @__PURE__ */ jsx(Picture, __spreadValues({}, supporter.image)) }, index)
+        ) }) }),
+        titleNode && /* @__PURE__ */ jsx("div", { className: clsx19(Footer_module_default.disclaimer, "p"), children: titleNode }),
+        copyright && /* @__PURE__ */ jsx("p", { className: Footer_module_default.copyright, children: copyright })
+      ] }),
+      columns.length > 0 && /* @__PURE__ */ jsx("nav", { className: Footer_module_default["bottom-right"], children: columns.map((column, colIndex) => /* @__PURE__ */ jsx("ul", { className: Footer_module_default["nav-list"], children: column.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        __spreadProps(__spreadValues({
+          href: link.href,
+          className: Footer_module_default["nav-link"]
+        }, link.isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {}), {
+          children: link.label
+        })
+      ) }, link.label)) }, colIndex)) })
+    ] }),
+    children
+  ] }) });
+};
 var HeroBannerTitle = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
@@ -998,22 +1237,20 @@ var HeroBanner = ({
   var _a, _b;
   const { is } = useViewPort_default();
   const isTabletBelow = is("tablet", "below");
-  const isDesktopBelow = is("desktop", "below");
   const vPageHeroBanner = variant === "pageHeroBanner";
   const vBannerPodcast = variant === "bannerPodcast";
-  const animated = brands && brands.logos && brands.logos.length >= 4 && isDesktopBelow;
   const slots = resolveCompoundSlots(children, {
     title: HeroBannerTitle,
     subtitle: HeroBannerSubtitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxs("div", { className: clsx3(HeroBanner_module_default.heroBanner, HeroBanner_module_default[variant], className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx19(HeroBanner_module_default.heroBanner, HeroBanner_module_default[variant], className), children: [
     /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.container, children: [
       /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.banner, children: [
         (titleNode || subtitleNode) && /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.text, children: [
-          titleNode && /* @__PURE__ */ jsx("h1", { className: clsx3(HeroBanner_module_default.title, "h1"), children: titleNode }),
-          subtitleNode && /* @__PURE__ */ jsx("div", { className: clsx3(HeroBanner_module_default.subtitle, "subtitle"), children: subtitleNode })
+          titleNode && /* @__PURE__ */ jsx("h1", { className: clsx19(HeroBanner_module_default.title, "h1"), children: titleNode }),
+          subtitleNode && /* @__PURE__ */ jsx("div", { className: clsx19(HeroBanner_module_default.subtitle, "subtitle"), children: subtitleNode })
         ] }),
         cta && cta.length > 0 && !vBannerPodcast && /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.ctaContainer, children: cta.slice(0, 2).map((cta2, key) => {
           return /* @__PURE__ */ jsx(
@@ -1036,8 +1273,7 @@ var HeroBanner = ({
         __spreadValues({
           className: HeroBanner_module_default.brandsStrip,
           variant: "light",
-          size: isTabletBelow || vPageHeroBanner ? "small" : void 0,
-          animate: animated
+          size: isTabletBelow || vPageHeroBanner ? "small" : void 0
         }, brands)
       ),
       backgroundImage && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: HeroBanner_module_default.backgroundImage }, backgroundImage))
@@ -1068,32 +1304,72 @@ var MiniBannerSubtitle = ({ children }) => {
 var MiniBanner_module_default = {
   minibanner: "MiniBanner_module_minibanner",
   background: "MiniBanner_module_background",
-  container: "MiniBanner_module_container",
-  miniBannerNoBG: "MiniBanner_module_miniBannerNoBG"
+  textContainer: "MiniBanner_module_textContainer",
+  logo: "MiniBanner_module_logo",
+  headingWrapper: "MiniBanner_module_headingWrapper",
+  title: "MiniBanner_module_title",
+  ctaContainer: "MiniBanner_module_ctaContainer",
+  miniBannerNoBG: "MiniBanner_module_miniBannerNoBG",
+  miniBannerTextLeft: "MiniBanner_module_miniBannerTextLeft"
+};
+var MiniBannerPreTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
 };
 var MiniBanner = ({
   className,
   variant = "default",
+  pretitle,
   title,
   subtitle,
   logo,
   background,
+  cta,
   children
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   const slots = resolveCompoundSlots(children, {
+    pretitle: MiniBannerPreTitle,
     title: MiniBannerTitle,
     subtitle: MiniBannerSubtitle
   });
-  const titleNode = (_a = slots.title) != null ? _a : title;
-  const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxs("div", { className: clsx3(MiniBanner_module_default.minibanner, MiniBanner_module_default[variant], className), children: [
-    background && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: MiniBanner_module_default.background }, background)),
-    /* @__PURE__ */ jsxs(Container, { className: MiniBanner_module_default.container, children: [
-      logo && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: MiniBanner_module_default.logo }, logo)),
-      titleNode && /* @__PURE__ */ jsx("div", { className: "h4", children: titleNode }),
-      subtitleNode && /* @__PURE__ */ jsx("div", { className: variant === "miniBannerNoBG" ? "subheading" : "h1", children: subtitleNode })
-    ] })
+  const { is } = useViewPort_default();
+  const isTabletBelow = is("tablet", "below");
+  const isMiniBannerNoBG = variant === "miniBannerNoBG";
+  const isMiniBannerTextLeft = variant === "miniBannerTextLeft";
+  const pretitleNode = (_a = slots.pretitle) != null ? _a : pretitle;
+  const titleNode = (_b = slots.title) != null ? _b : title;
+  const subtitleNode = (_c = slots.subtitle) != null ? _c : subtitle;
+  return /* @__PURE__ */ jsxs(Container, { className: clsx19(MiniBanner_module_default.minibanner, MiniBanner_module_default[variant], className), children: [
+    ((background == null ? void 0 : background.src) || ((_d = background == null ? void 0 : background.desktop) == null ? void 0 : _d.src) || ((_e = background == null ? void 0 : background.mobile) == null ? void 0 : _e.src)) && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: MiniBanner_module_default.background }, background)),
+    /* @__PURE__ */ jsxs("div", { className: MiniBanner_module_default.textContainer, children: [
+      (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: MiniBanner_module_default.logo }, logo)),
+      pretitleNode && /* @__PURE__ */ jsx("div", { className: "small", children: pretitleNode }),
+      /* @__PURE__ */ jsx("div", { className: MiniBanner_module_default.headingWrapper, children: titleNode && /* @__PURE__ */ jsx("div", { className: clsx19(MiniBanner_module_default.title, isMiniBannerTextLeft ? "h1" : "h4"), children: titleNode }) }),
+      subtitleNode && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx19(MiniBanner_module_default.title, {
+            subheading: isMiniBannerNoBG || isMiniBannerTextLeft,
+            h1: !isMiniBannerNoBG && !isMiniBannerTextLeft
+          }),
+          children: subtitleNode
+        }
+      )
+    ] }),
+    cta && cta.length > 0 && /* @__PURE__ */ jsx("div", { className: MiniBanner_module_default.ctaContainer, children: cta.slice(0, 2).map((cta2, key) => {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          href: cta2.url,
+          isExternal: cta2.isExternal,
+          variant: "secondary",
+          fullWidth: isTabletBelow,
+          logo: cta2.logo,
+          children: cta2.label
+        },
+        key
+      );
+    }) })
   ] });
 };
 
@@ -1136,13 +1412,13 @@ var MiniSectionCta = ({
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsx("div", { className: clsx3(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], className), children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: MiniSectionCta_module_default.wrapper, children: [
+  return /* @__PURE__ */ jsx("div", { className: clsx19(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], className), children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: MiniSectionCta_module_default.wrapper, children: [
     /* @__PURE__ */ jsxs("div", { className: MiniSectionCta_module_default.col, children: [
       titleNode && /* @__PURE__ */ jsx("h2", { className: variant === "BgColorBlack" || variant === "BgColorGrey" ? "h3" : "h2", children: titleNode }),
       subtitleNode && /* @__PURE__ */ jsx(
         "div",
         {
-          className: clsx3(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"),
+          className: clsx19(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"),
           children: subtitleNode
         }
       )
@@ -1205,7 +1481,7 @@ var PracticePathCards = ({
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
   const footerNode = (_c = slots.footer) != null ? _c : footer;
-  return /* @__PURE__ */ jsx("div", { className: clsx3(PracticePathCards_module_default["practice-path-cards"], className), children: /* @__PURE__ */ jsxs(Container, { className: PracticePathCards_module_default.container, children: [
+  return /* @__PURE__ */ jsx("div", { className: clsx19(PracticePathCards_module_default["practice-path-cards"], className), children: /* @__PURE__ */ jsxs(Container, { className: PracticePathCards_module_default.container, children: [
     /* @__PURE__ */ jsxs("div", { className: PracticePathCards_module_default.wrapper, children: [
       /* @__PURE__ */ jsxs("div", { className: PracticePathCards_module_default.content, children: [
         titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
@@ -1259,8 +1535,8 @@ var Teaser5050With3Text = ({
     title: Teaser5050With3TextTitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
-  return /* @__PURE__ */ jsx("div", { className: clsx3(Teaser5050With3Text_module_default["teaser5050-3text"], Teaser5050With3Text_module_default[variant], className), children: /* @__PURE__ */ jsxs(Container, { className: Teaser5050With3Text_module_default.container, children: [
-    titleNode && /* @__PURE__ */ jsx("div", { className: clsx3(Teaser5050With3Text_module_default.title, "h3"), children: titleNode }),
+  return /* @__PURE__ */ jsx("div", { className: clsx19(Teaser5050With3Text_module_default["teaser5050-3text"], Teaser5050With3Text_module_default[variant], className), children: /* @__PURE__ */ jsxs(Container, { className: Teaser5050With3Text_module_default.container, children: [
+    titleNode && /* @__PURE__ */ jsx("div", { className: clsx19(Teaser5050With3Text_module_default.title, "h3"), children: titleNode }),
     /* @__PURE__ */ jsxs("div", { className: Teaser5050With3Text_module_default.content, children: [
       /* @__PURE__ */ jsx("div", { className: Teaser5050With3Text_module_default.cards, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsx(InfoCard2, __spreadValues({}, card), key)) }),
       image && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: Teaser5050With3Text_module_default.image }, image))
@@ -1305,10 +1581,10 @@ var Teaser5050WithCta = ({
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsx("div", { className: clsx3(Teaser5050WithCta_module_default.teaser5050, Teaser5050WithCta_module_default[variant], className), children: /* @__PURE__ */ jsxs(Container, { className: Teaser5050WithCta_module_default.container, children: [
+  return /* @__PURE__ */ jsx("div", { className: clsx19(Teaser5050WithCta_module_default.teaser5050, Teaser5050WithCta_module_default[variant], className), children: /* @__PURE__ */ jsxs(Container, { className: Teaser5050WithCta_module_default.container, children: [
     /* @__PURE__ */ jsxs("div", { className: Teaser5050WithCta_module_default.wrapper, children: [
       /* @__PURE__ */ jsxs("div", { className: Teaser5050WithCta_module_default.content, children: [
-        titleNode && /* @__PURE__ */ jsx("div", { className: clsx3(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
+        titleNode && /* @__PURE__ */ jsx("div", { className: clsx19(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
         subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
       ] }),
       cta && /* @__PURE__ */ jsx(
@@ -1331,6 +1607,111 @@ var Teaser5050WithCta2 = Object.assign(Teaser5050WithCta, {
   Title: Teaser5050WithCtaTitle,
   Subtitle: Teaser5050WithCtaSubtitle
 });
+
+// src/components/UpcomingEventCard/UpcomingEventCard.module.scss
+var UpcomingEventCard_module_default = {
+  hidden: "UpcomingEventCard_module_hidden",
+  image: "UpcomingEventCard_module_image",
+  "text-content": "UpcomingEventCard_module_text-content",
+  cta: "UpcomingEventCard_module_cta",
+  date: "UpcomingEventCard_module_date",
+  location: "UpcomingEventCard_module_location",
+  description: "UpcomingEventCard_module_description"
+};
+var UpcomingEventCard = ({
+  className,
+  image,
+  date,
+  title,
+  location,
+  description,
+  cta
+}) => {
+  const { is } = useViewPort_default();
+  const hasCtaWithoutImage = cta && cta.url && !image;
+  const isBelowTablet = is("tablet", "below");
+  const isBelowMobile = is("mobile-l", "below");
+  return /* @__PURE__ */ jsxs("article", { className: clsx19(className), children: [
+    image && /* @__PURE__ */ jsx(Picture, __spreadProps(__spreadValues({}, image), { className: clsx19(UpcomingEventCard_module_default.image, className) })),
+    hasCtaWithoutImage && /* @__PURE__ */ jsx(Button, { variant: "secondary", className: clsx19(isBelowTablet && UpcomingEventCard_module_default.hidden), href: cta.url, children: cta.label }),
+    /* @__PURE__ */ jsxs("div", { className: clsx19(UpcomingEventCard_module_default["text-content"], className), children: [
+      /* @__PURE__ */ jsx("span", { className: UpcomingEventCard_module_default.date, children: date }),
+      title && /* @__PURE__ */ jsx("h3", { children: title }),
+      location && /* @__PURE__ */ jsx("span", { className: UpcomingEventCard_module_default.location, children: location }),
+      description && /* @__PURE__ */ jsx("div", { className: UpcomingEventCard_module_default.description, children: description }),
+      cta && cta.url && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          className: clsx19(!isBelowTablet && !image && UpcomingEventCard_module_default.hidden, UpcomingEventCard_module_default.cta),
+          fullWidth: isBelowMobile,
+          href: cta.url,
+          children: cta.label
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/Carousel/Carousel.module.scss
+var Carousel_module_default = {
+  "carousel-item": "Carousel_module_carousel-item"
+};
+var Carousel = (_a) => {
+  var _b = _a, { slides, className } = _b, props = __objRest(_b, ["slides", "className"]);
+  return /* @__PURE__ */ jsx(
+    Swiper,
+    __spreadProps(__spreadValues({
+      className: clsx19(Carousel_module_default.carousel, className),
+      spaceBetween: 0,
+      slidesPerView: 1,
+      modules: [FreeMode],
+      freeMode: { enabled: true, sticky: false, momentum: true },
+      wrapperTag: "ul",
+      loop: false
+    }, props), {
+      children: slides.map((slide, index) => /* @__PURE__ */ jsx(SwiperSlide, { tag: "li", className: Carousel_module_default["carousel-item"], children: slide }, index))
+    })
+  );
+};
+
+// src/widgets/EventList/EventList.module.scss
+var EventList_module_default = {
+  grey: "EventList_module_grey",
+  "header-container": "EventList_module_header-container"
+};
+var EventListTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var EventList = ({ className, title, items, cta, variant, children }) => {
+  var _a;
+  const { is } = useViewPort_default();
+  const slots = resolveCompoundSlots(children, {
+    title: EventListTitle
+  });
+  const titleNode = (_a = slots.title) != null ? _a : title;
+  const isBelowTablet = is("tablet", "below");
+  return /* @__PURE__ */ jsxs("section", { className: clsx19(EventList_module_default.section, variant && EventList_module_default[variant], className), children: [
+    /* @__PURE__ */ jsxs("div", { className: EventList_module_default["header-container"], children: [
+      titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
+      cta && cta.url && /* @__PURE__ */ jsx(Button, { className: EventList_module_default.cta, variant: "nofillblack", href: cta.url, icon: "rightBlack", children: cta.label })
+    ] }),
+    variant === "grey" && isBelowTablet && /* @__PURE__ */ jsx(
+      Carousel,
+      {
+        className: EventList_module_default[variant],
+        slides: items.map((item) => /* @__PURE__ */ jsx(UpcomingEventCard, __spreadValues({ className: variant }, item), item.title))
+      }
+    ),
+    variant === "grey" && !isBelowTablet && /* @__PURE__ */ jsx("ul", { className: clsx19(EventList_module_default[variant]), children: items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx("li", { className: variant, children: /* @__PURE__ */ jsx(UpcomingEventCard, __spreadProps(__spreadValues({}, item), { className: variant })) }, index)) }),
+    !variant && /* @__PURE__ */ jsx("ul", { children: items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(UpcomingEventCard, __spreadValues({}, item)) }, index)) })
+  ] });
+};
+
+// src/widgets/EventList/index.ts
+var EventList2 = Object.assign(EventList, {
+  Title: EventListTitle
+});
 function useIntersectionObserver({
   animateOnce = false,
   options = {}
@@ -1360,6 +1741,6 @@ function useIntersectionObserver({
   return { observeRef, isVisible };
 }
 
-export { Anchor, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, HeroBanner2 as HeroBanner, Icon, InfoCard2 as InfoCard, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, resolveCompoundSlots, svgs, useIntersectionObserver };
+export { Anchor, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, Footer, HeroBanner2 as HeroBanner, Icon, InfoCard2 as InfoCard, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, resolveCompoundSlots, svgs, useIntersectionObserver };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map