@digital-b2c/coreui-kit 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import clsx3 from 'clsx';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React, { useState } from 'react';
+import React, { Children, isValidElement, useState, useCallback, useEffect } from 'react';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -33,6 +33,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__ */ jsx("img", __spreadValues({ className }, props));
+  }
+  const _a2 = props, { desktop, mobile } = _a2, rest = __objRest(_a2, ["desktop", "mobile"]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      __spreadValues({
+        src: desktop.src,
+        alt: desktop.alt,
+        className: clsx3(className, Picture_module_default["image-desktop"])
+      }, rest)
+    ),
+    /* @__PURE__ */ 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(className, Picture_module_default["image-mobile"])
+      }, rest)
+    )
+  ] });
+};
 var Anchor = (_a) => {
   var _b = _a, { children, isExternal } = _b, props = __objRest(_b, ["children", "isExternal"]);
   return /* @__PURE__ */ jsx(
@@ -290,7 +319,8 @@ var Button = (_a) => {
     fullWidth,
     href,
     isExternal,
-    icon
+    icon,
+    logo
   } = _b, rest = __objRest(_b, [
     "className",
     "children",
@@ -298,7 +328,8 @@ var Button = (_a) => {
     "fullWidth",
     "href",
     "isExternal",
-    "icon"
+    "icon",
+    "logo"
   ]);
   const isLink = !!href;
   const props = __spreadValues(__spreadValues({
@@ -311,18 +342,185 @@ var Button = (_a) => {
   }, isLink ? { href, isExternal } : {}), rest);
   return /* @__PURE__ */ jsxs(ConditionalWrapper, __spreadProps(__spreadValues({ wrapper: Anchor, fallback: "button", condition: isLink }, props), { children: [
     children,
-    icon && /* @__PURE__ */ jsx(Icon, { type: icon })
+    logo ? /* @__PURE__ */ jsx(Picture, __spreadValues({ className: Button_module_default.logo }, logo)) : icon && /* @__PURE__ */ 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] = useState(
+    () => typeof window !== "undefined" ? getDeviceType(window.innerWidth) : "desktop"
+  );
+  const getOtherDevices = useCallback(
+    (list, what, includeSelf = false) => {
+      const deviceIndex = list.indexOf(what) + (!includeSelf ? 1 : 0);
+      return [...list].slice(deviceIndex);
+    },
+    []
+  );
+  const onWindowResize = useCallback(() => {
+    setDevice(getDeviceType(window.innerWidth));
+  }, []);
+  const onWindowResizeDebounce = useDebounce_default(onWindowResize, 100);
+  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] = useState(false);
+  const { is } = useViewPort_default();
+  const isTabletBelow = is("tablet", "below");
+  const shouldAnimate = !title && animate;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx3(
+        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__ */ 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(
+            "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
+          )) })
+        ] }),
+        cta && show && logos.length > 1 && /* @__PURE__ */ 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__ */ jsx(Fragment, { children });
+};
+var CardSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+function resolveCompoundSlots(children, slots) {
+  const resolved = {};
+  Children.forEach(children, (child) => {
+    if (!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__ */ jsxs("div", { className: clsx3(Card_module_default.card, className), children: [
     icon && /* @__PURE__ */ jsx(Icon, { type: icon }),
     /* @__PURE__ */ jsxs("div", { className: Card_module_default.content, children: [
-      /* @__PURE__ */ jsx("h3", { className: "h4", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { children: subtitle })
+      titleNode && /* @__PURE__ */ jsx("h3", { className: "h4", children: titleNode }),
+      subtitleNode && /* @__PURE__ */ jsx("p", { children: subtitleNode })
     ] }),
     cta && /* @__PURE__ */ jsx(
       Button,
@@ -337,59 +535,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__ */ jsx("img", __spreadValues({ className }, props));
-  }
-  const _a2 = props, { desktop, mobile } = _a2, rest = __objRest(_a2, ["desktop", "mobile"]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "img",
-      __spreadValues({
-        src: desktop.src,
-        alt: desktop.alt,
-        className: clsx3(className, Picture_module_default["image-desktop"])
-      }, rest)
-    ),
-    /* @__PURE__ */ 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(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__ */ jsx(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__ */ jsxs("div", { className: clsx3(CountingCard_module_default["counting-card"], className), children: [
     /* @__PURE__ */ jsxs("div", { className: CountingCard_module_default.content, children: [
-      title && /* @__PURE__ */ jsx("div", { className: "body", children: title }),
+      titleNode && /* @__PURE__ */ jsx("div", { className: "body", children: titleNode }),
       count && /* @__PURE__ */ jsx("div", { className: clsx3(CountingCard_module_default.count, "h1"), children: count })
     ] }),
     image && /* @__PURE__ */ 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__ */ jsx(Fragment, { children });
+};
+var InfoCardSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: clsx3(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,
-      title && /* @__PURE__ */ jsx("div", { className: "h4", children: title })
+      titleNode && /* @__PURE__ */ jsx("div", { className: "h4", children: titleNode })
     ] }),
-    subtitle && /* @__PURE__ */ jsx("div", { className: "body", children: subtitle })
+    subtitleNode && /* @__PURE__ */ 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 = ({
@@ -478,6 +685,38 @@ var Container = (_a) => {
   return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: clsx3(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__ */ jsx("div", { className: clsx3(PracticeCard_module_default["practice-card"], className), children: /* @__PURE__ */ jsxs(
+    ConditionalWrapper,
+    __spreadProps(__spreadValues({
+      className: PracticeCard_module_default.wrapper,
+      wrapper: Anchor,
+      fallback: "div",
+      condition: !!href
+    }, href ? { href, isExternal } : {}), {
+      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 }),
+          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" })
+          ] })
+        ] })
+      ]
+    })
+  ) });
+};
+var CardCollectionTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var CardCollectionSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
 // src/widgets/CardCollection/CardCollection.module.scss
 var CardCollection_module_default = {};
 var CardCollection = ({
@@ -485,17 +724,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__ */ jsxs(Container, { className: clsx3(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className), children: [
     /* @__PURE__ */ jsxs("div", { className: CardCollection_module_default.content, children: [
-      title && /* @__PURE__ */ jsx("h2", { children: title }),
-      subtitle && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitle })
+      titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
+      subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: CardCollection_module_default.wrapper, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsx(Card2, __spreadValues({ className: CardCollection_module_default.card }, card), key)) })
+  ] });
+};
+
+// src/widgets/CardCollection/index.ts
+var CardCollection2 = Object.assign(CardCollection, {
+  Title: CardCollectionTitle,
+  Subtitle: CardCollectionSubtitle
+});
+var ContactModuleTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var ContactModuleSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(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__ */ jsx("div", { className: clsx3(ContactModule_module_default["contact-module"], { [ContactModule_module_default.blurred]: blurred }, className), children: /* @__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: "subheading", children: subtitleNode })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: ContactModule_module_default["cta-wrapper"], children: ctas == null ? void 0 : ctas.map((cta, key) => /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: clsx3(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: [
+        (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.text, children: [
+          title && /* @__PURE__ */ jsx("h1", { className: clsx3(HeroBanner_module_default.title, "h1"), children: title }),
+          subtitle && /* @__PURE__ */ jsx("div", { className: clsx3(HeroBanner_module_default.subtitle, "subtitle"), children: subtitle })
+        ] }),
+        cta && cta.length > 0 && !vBannerPodcast && /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.ctaContainer, children: cta.map((cta2, key) => {
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              href: cta2.url,
+              isExternal: cta2.isExternal,
+              variant: key % 2 ? vMainHeroBanner && !isTabletBelow ? "nofill" : "grey" : "primary",
+              fullWidth: isTabletBelow,
+              children: cta2.label
+            },
+            key
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.logoWrapper, children: logo && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: HeroBanner_module_default.logo }, logo)) }),
+      !vBannerPodcast && /* @__PURE__ */ jsx(
+        BrandsStrip,
+        __spreadValues({
+          className: HeroBanner_module_default.brandsStrip,
+          variant: "light",
+          size: isTabletBelow || vMainHeroBanner ? "small" : void 0,
+          animate: animated
+        }, brands)
+      ),
+      backgroundImage && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: HeroBanner_module_default.backgroundImage }, backgroundImage))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.horizontalGradient, children: [
+      /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.lensCrafters }),
+      /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.forEyes }),
+      /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.optical }),
+      /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.pearleVision })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: CardCollection_module_default.wrapper, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsx(Card, __spreadValues({ className: CardCollection_module_default.card }, card), key)) })
+    !vBannerPodcast && /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.scrollDown, children: /* @__PURE__ */ jsx(Icon, { type: "downChevronBlack", className: HeroBanner_module_default.arrow }) })
+  ] });
+};
+var MiniBannerTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var MiniBannerSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(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__ */ 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 })
+    ] })
   ] });
 };
 
+// src/widgets/MiniBanner/index.ts
+var MiniBanner2 = Object.assign(MiniBanner, {
+  Title: MiniBannerTitle,
+  Subtitle: MiniBannerSubtitle
+});
+var MiniSectionCtaTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var MiniSectionCtaSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
 // src/widgets/MiniSectionCta/MiniSectionCta.module.scss
 var MiniSectionCta_module_default = {};
 var MiniSectionCta = ({
@@ -503,12 +915,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__ */ jsx("div", { className: clsx3(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], className), children: /* @__PURE__ */ jsxs(Container, { className: MiniSectionCta_module_default.container, children: [
     /* @__PURE__ */ jsxs("div", { className: MiniSectionCta_module_default.col, children: [
-      title && /* @__PURE__ */ jsx("h2", { className: variant === "BgColorBlack" || variant === "BgColorGrey" ? "h3" : "h2", children: title }),
-      subtitle && /* @__PURE__ */ jsx("div", { className: clsx3(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"), children: subtitle })
+      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"), children: subtitleNode })
     ] }),
     cta && /* @__PURE__ */ jsx("div", { className: MiniSectionCta_module_default.col, children: /* @__PURE__ */ jsx(
       Button,
@@ -516,7 +936,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
       }
@@ -524,6 +944,73 @@ var MiniSectionCta = ({
   ] }) });
 };
 
+// src/widgets/MiniSectionCta/index.ts
+var MiniSectionCta2 = Object.assign(MiniSectionCta, {
+  Title: MiniSectionCtaTitle,
+  Subtitle: MiniSectionCtaSubtitle
+});
+var PracticePathCardsFooter = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var PracticePathCardsSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var PracticePathCardsTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(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__ */ jsx("div", { className: clsx3(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 }),
+        subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
+      ] }),
+      (cta == null ? void 0 : cta.url) && /* @__PURE__ */ jsx("div", { className: PracticePathCards_module_default.ctaWrapper, children: /* @__PURE__ */ 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__ */ jsx("div", { className: PracticePathCards_module_default.cards, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsx(PracticeCard, __spreadValues({ className: PracticePathCards_module_default.card }, card), key)) }),
+    footerNode && /* @__PURE__ */ 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__ */ jsx(Fragment, { children });
+};
+
 // src/widgets/Teaser5050With3Text/Teaser5050With3Text.module.scss
 var Teaser5050With3Text_module_default = {};
 var Teaser5050With3Text = ({
@@ -531,32 +1018,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__ */ jsx("div", { className: clsx3(Teaser5050With3Text_module_default["teaser5050-3text"], Teaser5050With3Text_module_default[variant], className), children: /* @__PURE__ */ jsxs(Container, { className: Teaser5050With3Text_module_default.container, children: [
-    title && /* @__PURE__ */ jsx("div", { className: clsx3(Teaser5050With3Text_module_default.title, "h3"), children: title }),
+    titleNode && /* @__PURE__ */ jsx("div", { className: clsx3(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(InfoCard, __spreadValues({}, card), key)) }),
+      /* @__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))
     ] })
   ] }) });
 };
 
+// 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__ */ jsx(Fragment, { children });
+};
+var Teaser5050WithCtaSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(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__ */ jsx("div", { className: clsx3(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: [
-        title && /* @__PURE__ */ jsx("div", { className: clsx3(Teaser5050WithCta_module_default.title, "h3"), children: title }),
-        subtitle && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitle })
+        titleNode && /* @__PURE__ */ jsx("div", { className: clsx3(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
+        subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
       ] }),
       cta && /* @__PURE__ */ jsx(
         Button,
@@ -573,6 +1085,6 @@ var Teaser5050WithCta = ({
   ] }) });
 };
 
-export { Anchor, Button, Card, CardCollection, ConditionalWrapper, Container, CountingCard, Icon, InfoCard, MiniSectionCta, Pagination, Picture, Teaser5050With3Text, Teaser5050WithCta, svgs };
+export { Anchor, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, HeroBanner, Icon, InfoCard2 as InfoCard, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta, svgs };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map