@digital-b2c/coreui-kit 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -40,6 +40,35 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+
+// src/components/Picture/Picture.module.scss
+var Picture_module_default = {};
+var Picture = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b2, _c;
+  if ("src" in props) {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", __spreadValues({ className }, props));
+  }
+  const _a2 = props, { desktop, mobile } = _a2, rest = __objRest(_a2, ["desktop", "mobile"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      __spreadValues({
+        src: desktop.src,
+        alt: desktop.alt,
+        className: clsx3__default.default(className, Picture_module_default["image-desktop"])
+      }, rest)
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      __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"])
+      }, rest)
+    )
+  ] });
+};
 var Anchor = (_a) => {
   var _b = _a, { children, isExternal } = _b, props = __objRest(_b, ["children", "isExternal"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -297,7 +326,8 @@ var Button = (_a) => {
     fullWidth,
     href,
     isExternal,
-    icon
+    icon,
+    logo
   } = _b, rest = __objRest(_b, [
     "className",
     "children",
@@ -305,7 +335,8 @@ var Button = (_a) => {
     "fullWidth",
     "href",
     "isExternal",
-    "icon"
+    "icon",
+    "logo"
   ]);
   const isLink = !!href;
   const props = __spreadValues(__spreadValues({
@@ -318,18 +349,185 @@ var Button = (_a) => {
   }, isLink ? { href, isExternal } : {}), rest);
   return /* @__PURE__ */ jsxRuntime.jsxs(ConditionalWrapper, __spreadProps(__spreadValues({ wrapper: Anchor, fallback: "button", condition: isLink }, props), { children: [
     children,
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon })
+    logo ? /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: Button_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon, className: Button_module_default.icon })
   ] }));
 };
 
+// src/hooks/useDebounce.ts
+var useDebounce = (fn, delay) => {
+  let timer;
+  return (...args) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+};
+var useDebounce_default = useDebounce;
+
+// src/hooks/useViewPort.ts
+var ORDER = [
+  "mobile-s",
+  "mobile-m",
+  "mobile-l",
+  "tablet",
+  "desktop",
+  "desktop-l",
+  "desktop-xl"
+];
+var breakpointConditions = {
+  "mobile-s": (size) => size <= 320,
+  "mobile-m": (size) => size > 320 && size <= 375,
+  "mobile-l": (size) => size > 375 && size <= 425,
+  tablet: (size) => size > 425 && size <= 768,
+  desktop: (size) => size > 768 && size <= 1024,
+  "desktop-l": (size) => size > 1024 && size <= 1440,
+  "desktop-xl": (size) => size > 1440
+};
+var getDeviceType = (width) => {
+  for (const key in breakpointConditions) {
+    const deviceType = key;
+    if (breakpointConditions[deviceType](width)) {
+      return deviceType;
+    }
+  }
+  return "desktop";
+};
+var useViewPort = () => {
+  const [device, setDevice] = React.useState(
+    () => typeof window !== "undefined" ? getDeviceType(window.innerWidth) : "desktop"
+  );
+  const getOtherDevices = React.useCallback(
+    (list, what, includeSelf = false) => {
+      const deviceIndex = list.indexOf(what) + (!includeSelf ? 1 : 0);
+      return [...list].slice(deviceIndex);
+    },
+    []
+  );
+  const onWindowResize = React.useCallback(() => {
+    setDevice(getDeviceType(window.innerWidth));
+  }, []);
+  const onWindowResizeDebounce = useDebounce_default(onWindowResize, 100);
+  React.useEffect(() => {
+    window.addEventListener("resize", onWindowResizeDebounce);
+    return () => window.removeEventListener("resize", onWindowResizeDebounce);
+  }, [onWindowResizeDebounce]);
+  const is = (what, range) => {
+    const isArray = Array.isArray(what);
+    if (!range && !isArray) {
+      return what === device;
+    }
+    if (!range && isArray) {
+      return device ? what.includes(device) : false;
+    }
+    const list = range === "above" ? ORDER : [...ORDER].reverse();
+    const devices = getOtherDevices(list, what, true);
+    return device && devices.includes(device);
+  };
+  const isNot = (what) => !is(what);
+  const biggerThan = (what) => {
+    const devices = getOtherDevices(ORDER, what);
+    return device && devices.includes(device);
+  };
+  const smallerThan = (what) => {
+    const reverseOrder = [...ORDER].reverse();
+    const devices = getOtherDevices(reverseOrder, what);
+    return device && devices.includes(device);
+  };
+  return { is, isNot, biggerThan, smallerThan, device };
+};
+var useViewPort_default = useViewPort;
+
+// src/components/BrandsStrip/BrandsStrip.module.scss
+var BrandsStrip_module_default = {};
+var BrandsStrip = ({
+  className,
+  variant = "light",
+  title,
+  logos = [],
+  cta,
+  size,
+  animate = false
+}) => {
+  const [show, setShow] = React.useState(false);
+  const { is } = useViewPort_default();
+  const isTabletBelow = is("tablet", "below");
+  const shouldAnimate = !title && animate;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx3__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 },
+      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(
+            "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
+          )) })
+        ] }),
+        cta && show && logos.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            className: BrandsStrip_module_default.cta,
+            variant: "secondary",
+            href: cta.url,
+            isExternal: cta.isExternal,
+            icon: "tiltedRightBlack",
+            fullWidth: isTabletBelow,
+            children: cta == null ? void 0 : cta.label
+          }
+        )
+      ]
+    }
+  );
+};
+var CardTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var CardSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+function resolveCompoundSlots(children, slots) {
+  const resolved = {};
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    Object.entries(slots).forEach(([key, Component]) => {
+      if (child.type === Component) {
+        resolved[key] = child.props.children;
+      }
+    });
+  });
+  return resolved;
+}
+
 // src/components/Card/Card.module.scss
 var Card_module_default = {};
-var Card = ({ className, title, subtitle, cta, icon }) => {
+var Card = ({ className, title, subtitle, cta, icon, 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__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(Card_module_default.card, className), children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Card_module_default.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "h4", children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { children: subtitle })
+      titleNode && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "h4", children: titleNode }),
+      subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("p", { children: subtitleNode })
     ] }),
     cta && /* @__PURE__ */ jsxRuntime.jsx(
       Button,
@@ -344,59 +542,68 @@ var Card = ({ className, title, subtitle, cta, icon }) => {
   ] });
 };
 
-// src/components/Picture/Picture.module.scss
-var Picture_module_default = {};
-var Picture = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  var _b2, _c;
-  if ("src" in props) {
-    return /* @__PURE__ */ jsxRuntime.jsx("img", __spreadValues({ className }, props));
-  }
-  const _a2 = props, { desktop, mobile } = _a2, rest = __objRest(_a2, ["desktop", "mobile"]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      __spreadValues({
-        src: desktop.src,
-        alt: desktop.alt,
-        className: clsx3__default.default(className, Picture_module_default["image-desktop"])
-      }, rest)
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      __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"])
-      }, rest)
-    )
-  ] });
+// src/components/Card/index.ts
+var Card2 = Object.assign(Card, {
+  Title: CardTitle,
+  Subtitle: CardSubtitle
+});
+var CountingCardTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
 
 // src/components/CountingCard/CountingCard.module.scss
 var CountingCard_module_default = {};
-var CountingCard = ({ className, title, count, image }) => {
+var CountingCard = ({ className, title, count, image, children }) => {
+  var _a;
+  const slots = resolveCompoundSlots(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: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CountingCard_module_default.content, children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "body", children: title }),
+      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 })
     ] }),
     image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: CountingCard_module_default.logo }, image))
   ] });
 };
 
+// src/components/CountingCard/index.ts
+var CountingCard2 = Object.assign(CountingCard, {
+  Title: CountingCardTitle
+});
+var InfoCardTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var InfoCardSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+
 // src/components/InfoCard/InfoCard.module.scss
 var InfoCard_module_default = {};
-var InfoCard = ({ className, title, subtitle, icon, badge }) => {
+var InfoCard = ({ className, title, subtitle, icon, badge, children }) => {
+  var _a, _b;
+  const slots = resolveCompoundSlots(children, {
+    title: InfoCardTitle,
+    subtitle: InfoCardSubtitle
+  });
+  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: [
     /* @__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,
-      title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h4", children: title })
+      titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h4", children: titleNode })
     ] }),
-    subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "body", children: subtitle })
+    subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "body", children: subtitleNode })
   ] });
 };
 
+// src/components/InfoCard/index.ts
+var InfoCard2 = Object.assign(InfoCard, {
+  Title: InfoCardTitle,
+  Subtitle: InfoCardSubtitle
+});
+
 // src/components/Pagination/Pagination.module.scss
 var Pagination_module_default = {};
 var Pagination = ({
@@ -485,6 +692,38 @@ var Container = (_a) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ className: clsx3__default.default(Container_module_default.container, className) }, props), { children }));
 };
 
+// src/components/PracticeCard/PracticeCard.module.scss
+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(
+    ConditionalWrapper,
+    __spreadProps(__spreadValues({
+      className: PracticeCard_module_default.wrapper,
+      wrapper: Anchor,
+      fallback: "div",
+      condition: !!href
+    }, href ? { href, isExternal } : {}), {
+      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 }),
+          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" })
+          ] })
+        ] })
+      ]
+    })
+  ) });
+};
+var CardCollectionTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var CardCollectionSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+
 // src/widgets/CardCollection/CardCollection.module.scss
 var CardCollection_module_default = {};
 var CardCollection = ({
@@ -492,17 +731,190 @@ var CardCollection = ({
   variant = "default",
   title,
   subtitle,
-  cards
+  cards,
+  children
 }) => {
+  var _a, _b;
+  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__ */ jsxRuntime.jsxs(Container, { className: clsx3__default.default(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CardCollection_module_default.content, children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitle })
+      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: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsxRuntime.jsx(Card2, __spreadValues({ className: CardCollection_module_default.card }, card), key)) })
+  ] });
+};
+
+// src/widgets/CardCollection/index.ts
+var CardCollection2 = Object.assign(CardCollection, {
+  Title: CardCollectionTitle,
+  Subtitle: CardCollectionSubtitle
+});
+var ContactModuleTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var ContactModuleSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+
+// src/widgets/ContactModule/ContactModule.module.scss
+var ContactModule_module_default = {};
+var ContactModule = ({
+  className,
+  children,
+  title,
+  subtitle,
+  ctas,
+  image,
+  blurred
+}) => {
+  var _a, _b;
+  const slots = resolveCompoundSlots(children, {
+    title: ContactModuleTitle,
+    subtitle: ContactModuleSubtitle
+  });
+  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(ContactModule_module_default["contact-module"], { [ContactModule_module_default.blurred]: blurred }, className), children: /* @__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: "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,
+        {
+          className: ContactModule_module_default.cta,
+          href: cta.url,
+          isExternal: cta.isExternal,
+          variant: key % 2 === 0 ? "secondary" : "primary",
+          children: cta.label
+        },
+        key
+      )) })
+    ] }),
+    image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: ContactModule_module_default.image }, image))
+  ] }) });
+};
+
+// src/widgets/ContactModule/index.ts
+var ContactModule2 = Object.assign(ContactModule, {
+  Title: ContactModuleTitle,
+  Subtitle: ContactModuleSubtitle
+});
+
+// src/widgets/HeroBanner/HeroBanner.module.scss
+var HeroBanner_module_default = {};
+var HeroBanner = ({
+  className,
+  variant = "pageHeroBanner",
+  title,
+  subtitle,
+  backgroundImage,
+  logo,
+  cta,
+  brands
+}) => {
+  const { is } = useViewPort_default();
+  const isTabletBelow = is("tablet", "below");
+  const isDesktopBelow = is("desktop", "below");
+  const vMainHeroBanner = variant === "mainHeroBanner";
+  const vBannerPodcast = variant === "bannerPodcast";
+  const animated = brands && brands.logos && brands.logos.length >= 4 && isDesktopBelow;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__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: [
+        (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: HeroBanner_module_default.text, children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: clsx3__default.default(HeroBanner_module_default.title, "h1"), children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(HeroBanner_module_default.subtitle, "subtitle"), children: subtitle })
+        ] }),
+        cta && cta.length > 0 && !vBannerPodcast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBanner_module_default.ctaContainer, children: cta.map((cta2, key) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              href: cta2.url,
+              isExternal: cta2.isExternal,
+              variant: key % 2 ? vMainHeroBanner && !isTabletBelow ? "nofill" : "grey" : "primary",
+              fullWidth: isTabletBelow,
+              children: cta2.label
+            },
+            key
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBanner_module_default.logoWrapper, children: logo && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: HeroBanner_module_default.logo }, logo)) }),
+      !vBannerPodcast && /* @__PURE__ */ jsxRuntime.jsx(
+        BrandsStrip,
+        __spreadValues({
+          className: HeroBanner_module_default.brandsStrip,
+          variant: "light",
+          size: isTabletBelow || vMainHeroBanner ? "small" : void 0,
+          animate: animated
+        }, brands)
+      ),
+      backgroundImage && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: HeroBanner_module_default.backgroundImage }, backgroundImage))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: HeroBanner_module_default.horizontalGradient, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBanner_module_default.lensCrafters }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBanner_module_default.forEyes }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBanner_module_default.optical }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBanner_module_default.pearleVision })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardCollection_module_default.wrapper, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsxRuntime.jsx(Card, __spreadValues({ className: CardCollection_module_default.card }, card), key)) })
+    !vBannerPodcast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBanner_module_default.scrollDown, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "downChevronBlack", className: HeroBanner_module_default.arrow }) })
+  ] });
+};
+var MiniBannerTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var MiniBannerSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+
+// src/widgets/MiniBanner/MiniBanner.module.scss
+var MiniBanner_module_default = {};
+var MiniBanner = ({
+  className,
+  variant = "default",
+  title,
+  subtitle,
+  logo,
+  background,
+  children
+}) => {
+  var _a, _b;
+  const slots = resolveCompoundSlots(children, {
+    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 })
+    ] })
   ] });
 };
 
+// src/widgets/MiniBanner/index.ts
+var MiniBanner2 = Object.assign(MiniBanner, {
+  Title: MiniBannerTitle,
+  Subtitle: MiniBannerSubtitle
+});
+var MiniSectionCtaTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var MiniSectionCtaSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+
 // src/widgets/MiniSectionCta/MiniSectionCta.module.scss
 var MiniSectionCta_module_default = {};
 var MiniSectionCta = ({
@@ -510,12 +922,20 @@ var MiniSectionCta = ({
   variant = "headerCTA",
   title,
   subtitle,
-  cta
+  cta,
+  children
 }) => {
+  var _a, _b;
+  const slots = resolveCompoundSlots(children, {
+    title: MiniSectionCtaTitle,
+    subtitle: MiniSectionCtaSubtitle
+  });
+  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.jsxs(Container, { className: MiniSectionCta_module_default.container, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniSectionCta_module_default.col, children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: variant === "BgColorBlack" || variant === "BgColorGrey" ? "h3" : "h2", children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"), children: subtitle })
+      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"), children: subtitleNode })
     ] }),
     cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: MiniSectionCta_module_default.col, children: /* @__PURE__ */ jsxRuntime.jsx(
       Button,
@@ -523,7 +943,7 @@ var MiniSectionCta = ({
         className: MiniSectionCta_module_default.cta,
         href: cta.url,
         isExternal: cta.isExternal,
-        variant: "primary",
+        variant: variant === "BgColorBlack" ? "shiny" : "primary",
         icon: variant === "miniTextCenterCta" ? "tiltedRightWhite" : void 0,
         children: cta.label
       }
@@ -531,6 +951,73 @@ var MiniSectionCta = ({
   ] }) });
 };
 
+// src/widgets/MiniSectionCta/index.ts
+var MiniSectionCta2 = Object.assign(MiniSectionCta, {
+  Title: MiniSectionCtaTitle,
+  Subtitle: MiniSectionCtaSubtitle
+});
+var PracticePathCardsFooter = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var PracticePathCardsSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var PracticePathCardsTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+
+// src/widgets/PracticePathCards/PracticePathCards.module.scss
+var PracticePathCards_module_default = {};
+var PracticePathCards = ({
+  className,
+  children,
+  cards,
+  title,
+  subtitle,
+  footer,
+  cta
+}) => {
+  var _a, _b, _c;
+  const slots = resolveCompoundSlots(children, {
+    title: PracticePathCardsTitle,
+    subtitle: PracticePathCardsSubtitle,
+    footer: PracticePathCardsFooter
+  });
+  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: [
+    /* @__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 }),
+        subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitleNode })
+      ] }),
+      (cta == null ? void 0 : cta.url) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: PracticePathCards_module_default.ctaWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          className: PracticePathCards_module_default.cta,
+          variant: "secondary",
+          href: cta.url,
+          isExternal: cta == null ? void 0 : cta.isExternal,
+          children: cta == null ? void 0 : cta.label
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: PracticePathCards_module_default.cards, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsxRuntime.jsx(PracticeCard, __spreadValues({ className: PracticePathCards_module_default.card }, card), key)) }),
+    footerNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "smallest", children: footerNode })
+  ] }) });
+};
+
+// src/widgets/PracticePathCards/index.ts
+var PracticePathCards2 = Object.assign(PracticePathCards, {
+  Title: PracticePathCardsTitle,
+  Subtitle: PracticePathCardsSubtitle,
+  Footer: PracticePathCardsFooter
+});
+var Teaser5050With3TextTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+
 // src/widgets/Teaser5050With3Text/Teaser5050With3Text.module.scss
 var Teaser5050With3Text_module_default = {};
 var Teaser5050With3Text = ({
@@ -538,32 +1025,57 @@ var Teaser5050With3Text = ({
   variant = "left",
   title,
   cards,
-  image
+  image,
+  children
 }) => {
+  var _a;
+  const slots = resolveCompoundSlots(children, {
+    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: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(Teaser5050With3Text_module_default.title, "h3"), children: title }),
+    titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__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(InfoCard, __spreadValues({}, card), key)) }),
+      /* @__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))
     ] })
   ] }) });
 };
 
+// src/widgets/Teaser5050With3Text/index.ts
+var Teaser5050With3Text2 = Object.assign(Teaser5050With3Text, {
+  Title: Teaser5050With3TextTitle
+});
+
 // src/widgets/Teaser5050WithCta/Teaser5050WithCta.module.scss
 var Teaser5050WithCta_module_default = {};
+var Teaser5050WithCtaTitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+var Teaser5050WithCtaSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
 var Teaser5050WithCta = ({
   className,
   variant = "left",
   title,
   subtitle,
   cta,
-  image
+  image,
+  children
 }) => {
+  var _a, _b;
+  const slots = resolveCompoundSlots(children, {
+    title: Teaser5050WithCtaTitle,
+    subtitle: Teaser5050WithCtaSubtitle
+  });
+  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: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Teaser5050WithCta_module_default.wrapper, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Teaser5050WithCta_module_default.content, children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(Teaser5050WithCta_module_default.title, "h3"), children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitle })
+        titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
+        subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitleNode })
       ] }),
       cta && /* @__PURE__ */ jsxRuntime.jsx(
         Button,
@@ -581,18 +1093,24 @@ var Teaser5050WithCta = ({
 };
 
 exports.Anchor = Anchor;
+exports.BrandsStrip = BrandsStrip;
 exports.Button = Button;
-exports.Card = Card;
-exports.CardCollection = CardCollection;
+exports.Card = Card2;
+exports.CardCollection = CardCollection2;
 exports.ConditionalWrapper = ConditionalWrapper;
+exports.ContactModule = ContactModule2;
 exports.Container = Container;
-exports.CountingCard = CountingCard;
+exports.CountingCard = CountingCard2;
+exports.HeroBanner = HeroBanner;
 exports.Icon = Icon;
-exports.InfoCard = InfoCard;
-exports.MiniSectionCta = MiniSectionCta;
+exports.InfoCard = InfoCard2;
+exports.MiniBanner = MiniBanner2;
+exports.MiniSectionCta = MiniSectionCta2;
 exports.Pagination = Pagination;
 exports.Picture = Picture;
-exports.Teaser5050With3Text = Teaser5050With3Text;
+exports.PracticeCard = PracticeCard;
+exports.PracticePathCards = PracticePathCards2;
+exports.Teaser5050With3Text = Teaser5050With3Text2;
 exports.Teaser5050WithCta = Teaser5050WithCta;
 exports.svgs = svgs;
 //# sourceMappingURL=index.cjs.map