@digital-b2c/coreui-kit 0.4.2 → 0.4.4

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, { forwardRef, Children, isValidElement, useRef, useState, useCallback, useEffect } from 'react';
+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,
@@ -580,7 +680,7 @@ var Card = forwardRef(
     });
     const titleNode = (_a = slots.title) != null ? _a : title;
     const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx3(Card_module_default.card, className), children: [
+    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 }),
@@ -622,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))
   ] });
@@ -657,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 })
@@ -721,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",
       {
@@ -738,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
           }),
@@ -768,7 +868,7 @@ var Container_module_default = {
 var Container = forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className: clsx3(Container_module_default.container, className) }, props), { children }));
+    return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className: clsx19(Container_module_default.container, className) }, props), { children }));
   }
 );
 Container.displayName = "Container";
@@ -786,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,
@@ -797,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" })
@@ -884,13 +984,13 @@ var CardCollection = ({
     Container,
     {
       ref: container,
-      className: clsx3(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className),
+      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: clsx3(CardCollection_module_default.cardWrapper, { [CardCollection_module_default["is-expanded"]]: isExpanded }), children: [
+        /* @__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(
@@ -983,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",
       {
@@ -998,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,
@@ -1060,7 +1160,7 @@ var Footer = ({
     disclaimer: FooterDisclaimer
   });
   const titleNode = (_a = slots.disclaimer) != null ? _a : disclaimer;
-  return /* @__PURE__ */ jsx("footer", { className: clsx3(Footer_module_default.footer, className), children: /* @__PURE__ */ jsxs(Container, { className: Footer_module_default.container, children: [
+  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(
@@ -1076,7 +1176,7 @@ var Footer = ({
             index
           ) : /* @__PURE__ */ jsx("div", { className: Footer_module_default["supporter-link-primary"], children: /* @__PURE__ */ jsx(Picture, __spreadValues({}, supporter.image)) }, index)
         ) }) }),
-        titleNode && /* @__PURE__ */ jsx("div", { className: clsx3(Footer_module_default.disclaimer, "p"), children: titleNode }),
+        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(
@@ -1137,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(
@@ -1175,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))
@@ -1207,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
+      );
+    }) })
   ] });
 };
 
@@ -1275,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
         }
       )
@@ -1344,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 }),
@@ -1398,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))
@@ -1444,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(
@@ -1470,6 +1607,112 @@ 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 = {
+  section: "EventList_module_section",
+  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 = {}
@@ -1499,6 +1742,6 @@ function useIntersectionObserver({
   return { observeRef, isVisible };
 }
 
-export { Anchor, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, 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 };
+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