@digital-b2c/coreui-kit 0.4.2 → 0.4.4

package/dist/index.cjs

@@ -1,15 +1,18 @@
 'use strict';
 
-var clsx3 = require('clsx');
+var clsx19 = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 var React52 = require('react');
 var gsap = require('gsap');
 var react = require('@gsap/react');
 var ScrollTrigger = require('gsap/ScrollTrigger');
+var react$1 = require('swiper/react');
+var modules = require('swiper/modules');
+require('swiper/css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var clsx3__default = /*#__PURE__*/_interopDefault(clsx3);
+var clsx19__default = /*#__PURE__*/_interopDefault(clsx19);
 var React52__default = /*#__PURE__*/_interopDefault(React52);
 var gsap__default = /*#__PURE__*/_interopDefault(gsap);
 
@@ -63,7 +66,7 @@ var Picture = (_a) => {
       __spreadValues({
         src: desktop.src,
         alt: desktop.alt,
-        className: clsx3__default.default(className, Picture_module_default["image-desktop"])
+        className: clsx19__default.default(className, Picture_module_default["image-desktop"])
       }, rest)
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -71,7 +74,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__default.default(className, Picture_module_default["image-mobile"])
+        className: clsx19__default.default(className, Picture_module_default["image-mobile"])
       }, rest)
     )
   ] });
@@ -385,7 +388,7 @@ var Button = (_a) => {
   ]);
   const isLink = !!href;
   const props = __spreadValues(__spreadValues({
-    className: clsx3__default.default(
+    className: clsx19__default.default(
       Button_module_default.button,
       variant ? Button_module_default[variant] : null,
       { [Button_module_default.fullWidth]: !!fullWidth },
@@ -494,9 +497,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"
 };
@@ -506,37 +507,136 @@ var BrandsStrip = ({
   title,
   logos = [],
   cta,
-  size,
-  animate = false
+  size
 }) => {
   const [show, setShow] = React52.useState(false);
+  const [shouldAnimate, setShouldAnimate] = React52.useState(false);
   const { is } = useViewPort_default();
   const isTabletBelow = is("tablet", "below");
-  const shouldAnimate = title && animate;
+  const containerRef = React52.useRef(null);
+  const marqueeRef = React52.useRef(null);
+  const timeline = React52.useRef(null);
+  const horizontalLoop = (items, config) => {
+    const itemsArray = gsap__default.default.utils.toArray(items);
+    const cfg = config || {};
+    const tl = gsap__default.default.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__default.default.utils.snap(cfg.snap || 1);
+    gsap__default.default.set(itemsArray, {
+      xPercent: (i, target) => {
+        const w = widths[i] = parseFloat(gsap__default.default.getProperty(target, "width", "px"));
+        xPercents[i] = snap(
+          parseFloat(gsap__default.default.getProperty(target, "x", "px")) / w * 100 + gsap__default.default.getProperty(target, "xPercent")
+        );
+        return xPercents[i];
+      }
+    });
+    gsap__default.default.set(itemsArray, { x: 0 });
+    const totalWidth = itemsArray[length - 1].offsetLeft + xPercents[length - 1] / 100 * widths[length - 1] - startX + itemsArray[length - 1].offsetWidth * gsap__default.default.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__default.default.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;
+  };
+  react.useGSAP(
+    () => {
+      const refreshCalculations = () => {
+        if (!marqueeRef.current || !containerRef.current || logos.length === 0) return;
+        const items = gsap__default.default.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__default.default.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 = React52.useMemo(() => {
+    if (logos.length === 0) return [];
+    if (!shouldAnimate) return [...logos];
+    return [...logos, ...logos];
+  }, [logos]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: clsx3__default.default(
+      ref: containerRef,
+      className: clsx19__default.default(
         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__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(BrandsStrip_module_default.container, { [BrandsStrip_module_default.blurred]: show && logos.length > 1 }), children: [
-          title && logos.length == 1 && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: clsx3__default.default("body", BrandsStrip_module_default.title), children: title }),
-          logos.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(BrandsStrip_module_default.logos, { [BrandsStrip_module_default.marquee]: shouldAnimate }), children: logos.map((logo, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default(BrandsStrip_module_default.container, { [BrandsStrip_module_default.blurred]: show && logos.length > 1 }), children: [
+          title && logos.length === 1 && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: clsx19__default.default("body", BrandsStrip_module_default.title), children: title }),
+          logos.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: clsx3__default.default(BrandsStrip_module_default.logoWrapper, { [BrandsStrip_module_default.paused]: show }),
-              style: { "--item-index": index },
-              children: /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: BrandsStrip_module_default.logo }, logo))
-            },
-            index
-          )) })
+              ref: marqueeRef,
+              className: clsx19__default.default(BrandsStrip_module_default.logos, { [BrandsStrip_module_default.marqueeGSAP]: shouldAnimate }),
+              children: duplicatedLogos.map((logo, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: BrandsStrip_module_default.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: BrandsStrip_module_default.logo }, logo)) }, `${logo.alt}-${index}`))
+            }
+          )
         ] }),
         cta && show && logos.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
           Button,
@@ -588,7 +688,7 @@ var Card = React52.forwardRef(
     });
     const titleNode = (_a = slots.title) != null ? _a : title;
     const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx3__default.default(Card_module_default.card, className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx19__default.default(Card_module_default.card, className), children: [
       (logo == null ? void 0 : logo.src) ? /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: Card_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon, className: Card_module_default.logo }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Card_module_default.content, children: [
         titleNode && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "h4", children: titleNode }),
@@ -630,10 +730,10 @@ var CountingCard = ({ className, title, count, image, children }) => {
     title: CountingCardTitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(CountingCard_module_default["counting-card"], className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default(CountingCard_module_default["counting-card"], className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CountingCard_module_default.content, children: [
       titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "body", children: titleNode }),
-      count && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(CountingCard_module_default.count, "h1"), children: count })
+      count && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(CountingCard_module_default.count, "h1"), children: count })
     ] }),
     image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: CountingCard_module_default.logo }, image))
   ] });
@@ -665,9 +765,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__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(InfoCard_module_default["info-card"], { [InfoCard_module_default.hasIcon]: !!icon }, className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default(InfoCard_module_default["info-card"], { [InfoCard_module_default.hasIcon]: !!icon }, className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: InfoCard_module_default.header, children: [
-      icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon }) : badge ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(InfoCard_module_default.badge, "h4"), children: badge }) : null,
+      icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon }) : badge ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(InfoCard_module_default.badge, "h4"), children: badge }) : null,
       titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h4", children: titleNode })
     ] }),
     subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "body", children: subtitleNode })
@@ -729,7 +829,7 @@ var Pagination = ({
     setActivePage(page);
     onPageChange == null ? void 0 : onPageChange(page);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(Pagination_module_default.pagination, className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default(Pagination_module_default.pagination, className), children: [
     !disableArrows && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -746,7 +846,7 @@ var Pagination = ({
         "button",
         {
           onClick: () => goToPage(page),
-          className: clsx3__default.default(Pagination_module_default.page, {
+          className: clsx19__default.default(Pagination_module_default.page, {
             [Pagination_module_default.active]: activePage === page,
             [Pagination_module_default.number]: hasNumber
           }),
@@ -776,7 +876,7 @@ var Container_module_default = {
 var Container = React52.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className: clsx3__default.default(Container_module_default.container, className) }, props), { children }));
+    return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className: clsx19__default.default(Container_module_default.container, className) }, props), { children }));
   }
 );
 Container.displayName = "Container";
@@ -794,7 +894,7 @@ var PracticeCard_module_default = {
 };
 var PracticeCard = ({ className, title, cta, image }) => {
   const { url: href, isExternal } = cta != null ? cta : {};
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(PracticeCard_module_default["practice-card"], className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(PracticeCard_module_default["practice-card"], className), children: /* @__PURE__ */ jsxRuntime.jsxs(
     ConditionalWrapper,
     __spreadProps(__spreadValues({
       className: PracticeCard_module_default.wrapper,
@@ -805,7 +905,7 @@ var PracticeCard = ({ className, title, cta, image }) => {
       children: [
         image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: PracticeCard_module_default.background }, image)),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PracticeCard_module_default.container, children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(PracticeCard_module_default.title, "h3"), children: title }),
+          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(PracticeCard_module_default.title, "h3"), children: title }),
           href && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PracticeCard_module_default.cta, children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: PracticeCard_module_default.ctaRest, type: "right" }),
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: PracticeCard_module_default.ctaHover, type: "tiltedRight" })
@@ -892,13 +992,13 @@ var CardCollection = ({
     Container,
     {
       ref: container,
-      className: clsx3__default.default(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className),
+      className: clsx19__default.default(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CardCollection_module_default.content, children: [
           titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: titleNode }),
           subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitleNode })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardCollection_module_default.wrapper, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(CardCollection_module_default.cardWrapper, { [CardCollection_module_default["is-expanded"]]: isExpanded }), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardCollection_module_default.wrapper, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default(CardCollection_module_default.cardWrapper, { [CardCollection_module_default["is-expanded"]]: isExpanded }), children: [
           visibleCards.map((card, key) => /* @__PURE__ */ jsxRuntime.jsx(Card2, __spreadValues({ className: CardCollection_module_default.card }, card), key)),
           isExamCard && hiddenCards.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: revealWrapper, className: CardCollection_module_default["reveal-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardCollection_module_default["reveal-inner"], children: hiddenCards.map((card, key) => /* @__PURE__ */ jsxRuntime.jsx(Card2, __spreadValues({ ref: extraCard, className: CardCollection_module_default.card }, card), key)) }) }),
           isExamCard && !isExpanded && ctaLabel && /* @__PURE__ */ jsxRuntime.jsx(
@@ -991,7 +1091,7 @@ var ContactModule = ({
     },
     { scope: containerRef, dependencies: [blurred, animateBlur] }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: clsx3__default.default(ContactModule_module_default["contact-module"], className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: clsx19__default.default(ContactModule_module_default["contact-module"], className), children: [
     blurred && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1006,8 +1106,8 @@ var ContactModule = ({
     /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: ContactModule_module_default.container, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContactModule_module_default.wrapper, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContactModule_module_default.content, children: [
-          titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(ContactModule_module_default.title, "h1"), children: titleNode }),
-          subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(ContactModule_module_default.subtitle, "subheading"), children: subtitleNode })
+          titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(ContactModule_module_default.title, "h1"), children: titleNode }),
+          subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(ContactModule_module_default.subtitle, "subheading"), children: subtitleNode })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContactModule_module_default["cta-wrapper"], children: ctas == null ? void 0 : ctas.map((cta, key) => /* @__PURE__ */ jsxRuntime.jsx(
           Button,
@@ -1068,7 +1168,7 @@ var Footer = ({
     disclaimer: FooterDisclaimer
   });
   const titleNode = (_a = slots.disclaimer) != null ? _a : disclaimer;
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: clsx3__default.default(Footer_module_default.footer, className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: Footer_module_default.container, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: clsx19__default.default(Footer_module_default.footer, className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: Footer_module_default.container, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Footer_module_default.bottom, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Footer_module_default["bottom-left"], children: [
         supporters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Footer_module_default.supporters, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Footer_module_default["supporters-logos"], children: supporters.map(
@@ -1084,7 +1184,7 @@ var Footer = ({
             index
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: Footer_module_default["supporter-link-primary"], children: /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({}, supporter.image)) }, index)
         ) }) }),
-        titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(Footer_module_default.disclaimer, "p"), children: titleNode }),
+        titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(Footer_module_default.disclaimer, "p"), children: titleNode }),
         copyright && /* @__PURE__ */ jsxRuntime.jsx("p", { className: Footer_module_default.copyright, children: copyright })
       ] }),
       columns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: Footer_module_default["bottom-right"], children: columns.map((column, colIndex) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Footer_module_default["nav-list"], children: column.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1145,22 +1245,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__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(HeroBanner_module_default.heroBanner, HeroBanner_module_default[variant], className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default(HeroBanner_module_default.heroBanner, HeroBanner_module_default[variant], className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: HeroBanner_module_default.container, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: HeroBanner_module_default.banner, children: [
         (titleNode || subtitleNode) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: HeroBanner_module_default.text, children: [
-          titleNode && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: clsx3__default.default(HeroBanner_module_default.title, "h1"), children: titleNode }),
-          subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(HeroBanner_module_default.subtitle, "subtitle"), children: subtitleNode })
+          titleNode && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: clsx19__default.default(HeroBanner_module_default.title, "h1"), children: titleNode }),
+          subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(HeroBanner_module_default.subtitle, "subtitle"), children: subtitleNode })
         ] }),
         cta && cta.length > 0 && !vBannerPodcast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBanner_module_default.ctaContainer, children: cta.slice(0, 2).map((cta2, key) => {
           return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1183,8 +1281,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__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: HeroBanner_module_default.backgroundImage }, backgroundImage))
@@ -1215,32 +1312,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__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(MiniBanner_module_default.minibanner, MiniBanner_module_default[variant], className), children: [
-    background && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: MiniBanner_module_default.background }, background)),
-    /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: MiniBanner_module_default.container, children: [
-      logo && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: MiniBanner_module_default.logo }, logo)),
-      titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h4", children: titleNode }),
-      subtitleNode && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Container, { className: clsx19__default.default(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__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: MiniBanner_module_default.background }, background)),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniBanner_module_default.textContainer, children: [
+      (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: MiniBanner_module_default.logo }, logo)),
+      pretitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "small", children: pretitleNode }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: MiniBanner_module_default.headingWrapper, children: titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(MiniBanner_module_default.title, isMiniBannerTextLeft ? "h1" : "h4"), children: titleNode }) }),
+      subtitleNode && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx19__default.default(MiniBanner_module_default.title, {
+            subheading: isMiniBannerNoBG || isMiniBannerTextLeft,
+            h1: !isMiniBannerNoBG && !isMiniBannerTextLeft
+          }),
+          children: subtitleNode
+        }
+      )
+    ] }),
+    cta && cta.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: MiniBanner_module_default.ctaContainer, children: cta.slice(0, 2).map((cta2, key) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          href: cta2.url,
+          isExternal: cta2.isExternal,
+          variant: "secondary",
+          fullWidth: isTabletBelow,
+          logo: cta2.logo,
+          children: cta2.label
+        },
+        key
+      );
+    }) })
   ] });
 };
 
@@ -1283,13 +1420,13 @@ var MiniSectionCta = ({
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], className), children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniSectionCta_module_default.wrapper, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], className), children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniSectionCta_module_default.wrapper, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniSectionCta_module_default.col, children: [
       titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: variant === "BgColorBlack" || variant === "BgColorGrey" ? "h3" : "h2", children: titleNode }),
       subtitleNode && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: clsx3__default.default(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"),
+          className: clsx19__default.default(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"),
           children: subtitleNode
         }
       )
@@ -1352,7 +1489,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__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(PracticePathCards_module_default["practice-path-cards"], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: PracticePathCards_module_default.container, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(PracticePathCards_module_default["practice-path-cards"], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: PracticePathCards_module_default.container, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PracticePathCards_module_default.wrapper, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PracticePathCards_module_default.content, children: [
         titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: titleNode }),
@@ -1406,8 +1543,8 @@ var Teaser5050With3Text = ({
     title: Teaser5050With3TextTitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(Teaser5050With3Text_module_default["teaser5050-3text"], Teaser5050With3Text_module_default[variant], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: Teaser5050With3Text_module_default.container, children: [
-    titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(Teaser5050With3Text_module_default.title, "h3"), children: titleNode }),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(Teaser5050With3Text_module_default["teaser5050-3text"], Teaser5050With3Text_module_default[variant], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: Teaser5050With3Text_module_default.container, children: [
+    titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(Teaser5050With3Text_module_default.title, "h3"), children: titleNode }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Teaser5050With3Text_module_default.content, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: Teaser5050With3Text_module_default.cards, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsxRuntime.jsx(InfoCard2, __spreadValues({}, card), key)) }),
       image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: Teaser5050With3Text_module_default.image }, image))
@@ -1452,10 +1589,10 @@ var Teaser5050WithCta = ({
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(Teaser5050WithCta_module_default.teaser5050, Teaser5050WithCta_module_default[variant], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: Teaser5050WithCta_module_default.container, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(Teaser5050WithCta_module_default.teaser5050, Teaser5050WithCta_module_default[variant], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: Teaser5050WithCta_module_default.container, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Teaser5050WithCta_module_default.wrapper, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Teaser5050WithCta_module_default.content, children: [
-        titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
+        titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
         subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitleNode })
       ] }),
       cta && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1478,6 +1615,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__ */ jsxRuntime.jsxs("article", { className: clsx19__default.default(className), children: [
+    image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadProps(__spreadValues({}, image), { className: clsx19__default.default(UpcomingEventCard_module_default.image, className) })),
+    hasCtaWithoutImage && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", className: clsx19__default.default(isBelowTablet && UpcomingEventCard_module_default.hidden), href: cta.url, children: cta.label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default(UpcomingEventCard_module_default["text-content"], className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.date, children: date }),
+      title && /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title }),
+      location && /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.location, children: location }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: UpcomingEventCard_module_default.description, children: description }),
+      cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "secondary",
+          className: clsx19__default.default(!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__ */ jsxRuntime.jsx(
+    react$1.Swiper,
+    __spreadProps(__spreadValues({
+      className: clsx19__default.default(Carousel_module_default.carousel, className),
+      spaceBetween: 0,
+      slidesPerView: 1,
+      modules: [modules.FreeMode],
+      freeMode: { enabled: true, sticky: false, momentum: true },
+      wrapperTag: "ul",
+      loop: false
+    }, props), {
+      children: slides.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(react$1.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__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsxs("section", { className: clsx19__default.default(EventList_module_default.section, variant && EventList_module_default[variant], className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: EventList_module_default["header-container"], children: [
+      titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: titleNode }),
+      cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(Button, { className: EventList_module_default.cta, variant: "nofillblack", href: cta.url, icon: "rightBlack", children: cta.label })
+    ] }),
+    variant === "grey" && isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx(
+      Carousel,
+      {
+        className: EventList_module_default[variant],
+        slides: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(UpcomingEventCard, __spreadValues({ className: variant }, item), item.title))
+      }
+    ),
+    variant === "grey" && !isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: clsx19__default.default(EventList_module_default[variant]), children: items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: variant, children: /* @__PURE__ */ jsxRuntime.jsx(UpcomingEventCard, __spreadProps(__spreadValues({}, item), { className: variant })) }, index)) }),
+    !variant && /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(UpcomingEventCard, __spreadValues({}, item)) }, index)) })
+  ] });
+};
+
+// src/widgets/EventList/index.ts
+var EventList2 = Object.assign(EventList, {
+  Title: EventListTitle
+});
 function useIntersectionObserver({
   animateOnce = false,
   options = {}
@@ -1516,6 +1759,7 @@ exports.ConditionalWrapper = ConditionalWrapper;
 exports.ContactModule = ContactModule2;
 exports.Container = Container;
 exports.CountingCard = CountingCard2;
+exports.EventList = EventList2;
 exports.Footer = Footer;
 exports.HeroBanner = HeroBanner2;
 exports.Icon = Icon;