@digital-b2c/coreui-kit 0.1.0 → 0.2.1

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,38 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+
+// src/components/Picture/Picture.module.scss
+var Picture_module_default = {
+  "image-desktop": "Picture_module_image-desktop",
+  "image-mobile": "Picture_module_image-mobile"
+};
+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(
@@ -281,7 +313,20 @@ var Icon = React.memo(
 Icon.displayName = "Icon";
 
 // src/components/Button/Button.module.scss
-var Button_module_default = {};
+var Button_module_default = {
+  button: "Button_module_button",
+  fullWidth: "Button_module_fullWidth",
+  primary: "Button_module_primary",
+  secondary: "Button_module_secondary",
+  ghost: "Button_module_ghost",
+  nofill: "Button_module_nofill",
+  nofillblack: "Button_module_nofillblack",
+  grey: "Button_module_grey",
+  shiny: "Button_module_shiny",
+  rotateGradient: "Button_module_rotateGradient",
+  icon: "Button_module_icon",
+  logo: "Button_module_logo"
+};
 var Button = (_a) => {
   var _b = _a, {
     className,
@@ -290,7 +335,8 @@ var Button = (_a) => {
     fullWidth,
     href,
     isExternal,
-    icon
+    icon,
+    logo
   } = _b, rest = __objRest(_b, [
     "className",
     "children",
@@ -298,7 +344,8 @@ var Button = (_a) => {
     "fullWidth",
     "href",
     "isExternal",
-    "icon"
+    "icon",
+    "logo"
   ]);
   const isLink = !!href;
   const props = __spreadValues(__spreadValues({
@@ -311,18 +358,202 @@ 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 = {
+  brandsStrip: "BrandsStrip_module_brandsStrip",
+  light: "BrandsStrip_module_light",
+  dark: "BrandsStrip_module_dark",
+  small: "BrandsStrip_module_small",
+  logoWrapper: "BrandsStrip_module_logoWrapper",
+  container: "BrandsStrip_module_container",
+  title: "BrandsStrip_module_title",
+  blurred: "BrandsStrip_module_blurred",
+  logos: "BrandsStrip_module_logos",
+  marquee: "BrandsStrip_module_marquee",
+  scrollIndividual: "BrandsStrip_module_scrollIndividual",
+  paused: "BrandsStrip_module_paused",
+  logo: "BrandsStrip_module_logo",
+  cta: "BrandsStrip_module_cta"
+};
+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_module_default = {
+  card: "Card_module_card"
+};
+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,61 +568,87 @@ 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_module_default = {
+  "counting-card": "CountingCard_module_counting-card",
+  count: "CountingCard_module_count",
+  logo: "CountingCard_module_logo"
+};
+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_module_default = {
+  "info-card": "InfoCard_module_info-card",
+  header: "InfoCard_module_header",
+  badge: "InfoCard_module_badge",
+  hasIcon: "InfoCard_module_hasIcon"
+};
+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_module_default = {
+  pagination: "Pagination_module_pagination",
+  next: "Pagination_module_next",
+  prev: "Pagination_module_prev",
+  pages: "Pagination_module_pages",
+  page: "Pagination_module_page",
+  active: "Pagination_module_active",
+  number: "Pagination_module_number"
+};
 var Pagination = ({
   className,
   totalPages,
@@ -472,43 +729,338 @@ var Pagination = ({
 };
 
 // src/components/primitives/Container/Container.module.scss
-var Container_module_default = {};
+var Container_module_default = {
+  container: "Container_module_container"
+};
 var Container = (_a) => {
   var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: clsx3(Container_module_default.container, className) }, props), { children }));
 };
 
+// src/components/PracticeCard/PracticeCard.module.scss
+var PracticeCard_module_default = {
+  "practice-card": "PracticeCard_module_practice-card",
+  wrapper: "PracticeCard_module_wrapper",
+  background: "PracticeCard_module_background",
+  container: "PracticeCard_module_container",
+  title: "PracticeCard_module_title",
+  cta: "PracticeCard_module_cta",
+  ctaRest: "PracticeCard_module_ctaRest",
+  ctaHover: "PracticeCard_module_ctaHover"
+};
+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_module_default = {
+  "card-collection": "CardCollection_module_card-collection",
+  content: "CardCollection_module_content",
+  wrapper: "CardCollection_module_wrapper",
+  threeCols: "CardCollection_module_threeCols",
+  examCard: "CardCollection_module_examCard"
+};
 var CardCollection = ({
   className,
   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(Card, __spreadValues({ className: CardCollection_module_default.card }, card), key)) })
+    /* @__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 = {
+  "contact-module": "ContactModule_module_contact-module",
+  container: "ContactModule_module_container",
+  wrapper: "ContactModule_module_wrapper",
+  content: "ContactModule_module_content",
+  "cta-wrapper": "ContactModule_module_cta-wrapper",
+  cta: "ContactModule_module_cta",
+  title: "ContactModule_module_title",
+  image: "ContactModule_module_image"
+};
+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
+});
+var HeroBannerTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var HeroBannerSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
+// src/widgets/HeroBanner/HeroBanner.module.scss
+var HeroBanner_module_default = {
+  heroBanner: "HeroBanner_module_heroBanner",
+  mainHeroBanner: "HeroBanner_module_mainHeroBanner",
+  container: "HeroBanner_module_container",
+  bannerPodcast: "HeroBanner_module_bannerPodcast",
+  banner: "HeroBanner_module_banner",
+  text: "HeroBanner_module_text",
+  title: "HeroBanner_module_title",
+  subtitle: "HeroBanner_module_subtitle",
+  logoWrapper: "HeroBanner_module_logoWrapper",
+  logo: "HeroBanner_module_logo",
+  horizontalGradient: "HeroBanner_module_horizontalGradient",
+  lensCrafters: "HeroBanner_module_lensCrafters",
+  forEyes: "HeroBanner_module_forEyes",
+  optical: "HeroBanner_module_optical",
+  pearleVision: "HeroBanner_module_pearleVision",
+  ctaContainer: "HeroBanner_module_ctaContainer",
+  brandsStrip: "HeroBanner_module_brandsStrip",
+  backgroundImage: "HeroBanner_module_backgroundImage",
+  scrollDown: "HeroBanner_module_scrollDown",
+  arrow: "HeroBanner_module_arrow"
+};
+var HeroBanner = ({
+  className,
+  variant = "pageHeroBanner",
+  title,
+  subtitle,
+  backgroundImage,
+  logo,
+  cta,
+  brands,
+  children
+}) => {
+  var _a, _b;
+  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;
+  const slots = resolveCompoundSlots(children, {
+    title: HeroBannerTitle,
+    subtitle: HeroBannerSubtitle
+  });
+  const titleNode = (_a = slots.title) != null ? _a : title;
+  const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
+  return /* @__PURE__ */ jsxs("div", { className: clsx3(HeroBanner_module_default.heroBanner, HeroBanner_module_default[variant], className), children: [
+    /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.container, children: [
+      /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.banner, children: [
+        (titleNode || subtitleNode) && /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.text, children: [
+          titleNode && /* @__PURE__ */ jsx("h1", { className: clsx3(HeroBanner_module_default.title, "h1"), children: titleNode }),
+          subtitleNode && /* @__PURE__ */ jsx("div", { className: clsx3(HeroBanner_module_default.subtitle, "subtitle"), children: subtitleNode })
+        ] }),
+        cta && cta.length > 0 && !vBannerPodcast && /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.ctaContainer, children: cta.slice(0, 2).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 })
+    ] }),
+    !vBannerPodcast && /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.scrollDown, children: /* @__PURE__ */ jsx(Icon, { type: "downChevronBlack", className: HeroBanner_module_default.arrow }) })
+  ] });
+};
+
+// src/widgets/HeroBanner/index.ts
+var HeroBanner2 = Object.assign(HeroBanner, {
+  Title: HeroBannerTitle,
+  Subtitle: HeroBannerSubtitle
+});
+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 = {
+  minibanner: "MiniBanner_module_minibanner",
+  background: "MiniBanner_module_background",
+  container: "MiniBanner_module_container",
+  miniBannerNoBG: "MiniBanner_module_miniBannerNoBG"
+};
+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_module_default = {
+  miniSectionCta: "MiniSectionCta_module_miniSectionCta",
+  container: "MiniSectionCta_module_container",
+  col: "MiniSectionCta_module_col",
+  BgColorBlack: "MiniSectionCta_module_BgColorBlack",
+  infoCallout: "MiniSectionCta_module_infoCallout",
+  miniTextCenterCta: "MiniSectionCta_module_miniTextCenterCta",
+  cta: "MiniSectionCta_module_cta",
+  BgColorGrey: "MiniSectionCta_module_BgColorGrey",
+  subtitle: "MiniSectionCta_module_subtitle"
+};
 var MiniSectionCta = ({
   className,
   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 +1068,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,39 +1076,155 @@ 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 = {
+  "practice-path-cards": "PracticePathCards_module_practice-path-cards",
+  container: "PracticePathCards_module_container",
+  wrapper: "PracticePathCards_module_wrapper",
+  ctaWrapper: "PracticePathCards_module_ctaWrapper",
+  cta: "PracticePathCards_module_cta",
+  content: "PracticePathCards_module_content",
+  cards: "PracticePathCards_module_cards",
+  card: "PracticePathCards_module_card"
+};
+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_module_default = {
+  "teaser5050-3text": "Teaser5050With3Text_module_teaser5050-3text",
+  container: "Teaser5050With3Text_module_container",
+  content: "Teaser5050With3Text_module_content",
+  right: "Teaser5050With3Text_module_right",
+  title: "Teaser5050With3Text_module_title",
+  image: "Teaser5050With3Text_module_image"
+};
 var Teaser5050With3Text = ({
   className,
   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
+});
+var Teaser5050WithCtaTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var Teaser5050WithCtaSubtitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
 // src/widgets/Teaser5050WithCta/Teaser5050WithCta.module.scss
-var Teaser5050WithCta_module_default = {};
+var Teaser5050WithCta_module_default = {
+  teaser5050: "Teaser5050WithCta_module_teaser5050",
+  container: "Teaser5050WithCta_module_container",
+  right: "Teaser5050WithCta_module_right",
+  wrapper: "Teaser5050WithCta_module_wrapper",
+  title: "Teaser5050WithCta_module_title",
+  image: "Teaser5050WithCta_module_image",
+  cta: "Teaser5050WithCta_module_cta"
+};
 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 +1241,12 @@ var Teaser5050WithCta = ({
   ] }) });
 };
 
-export { Anchor, Button, Card, CardCollection, ConditionalWrapper, Container, CountingCard, Icon, InfoCard, MiniSectionCta, Pagination, Picture, Teaser5050With3Text, Teaser5050WithCta, svgs };
+// src/widgets/Teaser5050WithCta/index.ts
+var Teaser5050WithCta2 = Object.assign(Teaser5050WithCta, {
+  Title: Teaser5050WithCtaTitle,
+  Subtitle: Teaser5050WithCtaSubtitle
+});
+
+export { Anchor, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, HeroBanner2 as HeroBanner, Icon, InfoCard2 as InfoCard, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, svgs };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map