@zenpatient-org/healthspan-marketing-ui 0.1.171 → 0.2.1

package/dist/modules/ExpandingDetails/ExpandingDetails.es.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useGSAP as L } from "../../node_modules/@gsap/react/src/index.es.js";
-import { gsap as d } from "../../node_modules/gsap/index.es.js";
+import { useGSAP as L } from "@gsap/react";
+import d from "gsap";
 import { ScrollTrigger as z } from "../../node_modules/gsap/ScrollTrigger.es.js";
-import { useRef as X } from "react";
-import { HighlightedTitle as F } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { useRef as w } from "react";
+import l from "../../modules/ExpandingDetails/expandingDetails.module.css";
 import { Typography as y } from "../../components/Typography/Typography.es.js";
-import l from "./expandingDetails.module.css.es.js";
+import { HighlightedTitle as F } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 d.registerPlugin(z);
-const C = ({ colorScheme: p, label: S, title: w, sections: B }) => {
-  const h = X(null), a = X({});
+const C = ({ colorScheme: p, label: S, title: W, sections: B }) => {
+  const h = w(null), a = w({});
   return L(
     () => h.current ? ((() => {
       var P;
@@ -39,7 +39,7 @@ const C = ({ colorScheme: p, label: S, title: w, sections: B }) => {
             isDesktop: `(min-width: ${x + 1}px)`
           },
           (I) => {
-            var v, E, M, H, V, k, T, A, $, D, W;
+            var v, E, M, H, V, k, T, A, $, D, X;
             const s = e == null ? void 0 : e.querySelector('[data-scroll-id="heading"]'), m = e == null ? void 0 : e.querySelector('[data-scroll-id="content"]');
             if (!s || !m) return;
             const g = I.conditions, f = g == null ? void 0 : g.isMobile, G = g == null ? void 0 : g.isDesktop;
@@ -127,7 +127,7 @@ const C = ({ colorScheme: p, label: S, title: w, sections: B }) => {
               { scale: 1 },
               "<"
             ).to(
-              ((W = e.nextElementSibling) == null ? void 0 : W.querySelector(
+              ((X = e.nextElementSibling) == null ? void 0 : X.querySelector(
                 '[data-scroll-id="image-circle"]'
               )) || null,
               { scale: 1, yPercent: 5 },
@@ -170,7 +170,7 @@ const C = ({ colorScheme: p, label: S, title: w, sections: B }) => {
           mobileVariant: "headingXl",
           colorScheme: p,
           className: l.title,
-          title: w
+          title: W
         }
       )
     ] }),

package/dist/modules/ExpandingDetails/expandingDetails.module.css

@@ -0,0 +1,262 @@
+.root {
+  box-sizing: border-box;
+  padding: 0;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.dark {
+  background-color: var(--color-bg-base-dark);
+  color: var(--color-text-primary-inverted);
+}
+
+.expandingDetailsWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
+}
+
+.header {
+  text-align: center;
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: var(--spacing-88, 88px) 1.5vw 0;
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.title {
+  justify-content: center;
+  line-height: 1;
+  p {
+    @media (max-height: 670px) {
+      font-size: var(--font-size-heading-lg, 32px);
+    }
+  }
+}
+
+.label {
+  text-transform: uppercase;
+  padding-bottom: var(--spacing-16, 16px);
+}
+
+.title {
+  margin: 0;
+}
+
+.sections {
+  width: 100%;
+  width: 100%;
+  max-width: calc(var(--content-max-width) + 6vw);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  position: relative;
+  z-index: 1;
+  overflow-x: visible;
+}
+
+.section {
+  padding: 0 3vw;
+  overflow-y: hidden;
+  overflow-x: visible;
+  position: relative;
+  background-color: var(--color-bg-base-light);
+}
+
+.section::before, .section::after {
+  content: '';
+  position: absolute;
+  height: var(--border-width-sm);
+  left: 5vw;
+  right: 5vw;
+  background: var(--border-color-light);
+  z-index: 3;
+}
+
+.dark .section::before, .dark .section::after {
+  background: var(--border-color-alpha-white-20);
+}
+
+.section::before {
+  top: 0;
+}
+
+.section::after {
+  bottom: 0;
+}
+
+.leftBorder, .rightBorder {
+  position: absolute;
+  top: var(--spacing-16);
+  bottom: var(--spacing-16);
+  width: var(--border-width-sm);
+  background-color: var(--border-color-light);
+  z-index: 3;
+}
+
+.leftBorder {
+  left: 4vw;
+}
+
+.rightBorder {
+  right: 4vw;
+}
+
+.leftEyebrow, .rightEyebrow {
+  position: absolute;
+  top: 0;
+  width: 3vw;
+  height: var(--border-width-sm);
+  background-color: var(--border-color-light);
+  z-index: 10;
+}
+
+.leftEyebrow {
+  left: 0;
+}
+
+.rightEyebrow {
+  right: 0;
+}
+
+.dark {
+  .leftBorder, .rightBorder, .leftEyebrow, .rightEyebrow {
+    background-color: var(--border-color-alpha-white-20);
+  }
+}
+
+.dark .section {
+  background-color: var(--color-bg-base-dark);
+}
+
+.heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--spacing-24) var(--spacing-48);
+  background-color: var(--color-bg-base-light);
+  position: relative;
+  z-index: 2;
+}
+
+.dark .heading {
+  background-color: var(--color-bg-base-dark);
+}
+
+.sectionTitleWrapper {
+  transform-origin: left;
+}
+
+.sectionIndexWrapper {
+  transform-origin: right;
+}
+
+.content {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 10vw;
+  padding: var(--spacing-48);
+  padding-top: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.protocolWrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 36rem;
+  transform-origin: bottom;
+  gap: 2vw;
+}
+
+.imageCircle {
+  border-radius: var(--border-radius-full);
+  overflow: hidden;
+  transform-origin: bottom;
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  @media (max-width: 1366px) and (min-width: 933px) {
+    max-width: 17vw;
+  }
+  @media (width <= 932px) {
+    max-width: none;
+    width: 100%;
+  }
+}
+
+.imageCircle img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  object-position: center;
+  aspect-ratio: 4 / 3;
+
+  @media (width <= 932px) {
+    aspect-ratio: 5 / 3;
+  }
+}
+
+@media (width <= 1366px) {
+  .protocolSubtitle {
+    font-size: 1.5rem;
+    font-weight: "bold";
+  }
+}
+
+@media (width <= 932px) {
+  .header {
+    position: initial;
+    transform: none;
+    padding: var(--spacing-88) var(--spacing-16) 0;
+    height: 30vh;
+    height: 30dvh;
+  }
+  .sections {
+    min-height: 70vh;
+    min-height: 70dvh;
+  }
+  .heading {
+    padding: var(--spacing-16);
+  }
+  .section {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-16);
+    position: relative;
+  }
+  .sectionIndex {
+    top: 0.7rem;
+    right: 0.7rem;
+  }
+  .content {
+    gap: var(--spacing-16);
+    padding: var(--spacing-12) var(--spacing-16);
+  }
+}
+
+@media (width <= 430px) {
+  .content {
+    flex-direction: column;
+  }
+  .protocolWrapper {
+    order: 2;
+  }
+  .imageCircle {
+    order: 1;
+    width: 90%;
+    height: auto;
+    margin: 0 auto;
+  }
+}

package/dist/modules/FAQModule/FAQModule.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),i=require("../../components/Button/Button.cjs.js"),n=require("../../components/FAQComponent/FAQComponent.cjs.js"),t=require("./faqModule.module.css.cjs.js"),a=({title:l,questions:s})=>e.jsx("section",{className:t.default.root,children:e.jsxs("div",{className:t.default.container,children:[e.jsxs("div",{className:t.default.header,children:[e.jsx(o.HighlightedTitle,{title:l,defaultVariant:"displayMd",mobileVariant:"headingXl"}),e.jsx("div",{className:t.default.buttonWrapperDesktop,children:e.jsx(i.Button,{variant:"muted",size:"lg",as:"a",href:"/faqs",children:"VIEW ALL FAQ"})}),e.jsx("div",{className:t.default.buttonWrapperMobile,children:e.jsx(i.Button,{variant:"muted",size:"sm",as:"a",href:"/faqs",children:"VIEW ALL FAQ"})})]}),e.jsx("div",{className:t.default.contentDesktop,children:e.jsx(n.FAQComponent,{items:s,mode:"multiple"})}),e.jsx("div",{className:t.default.contentMobile,children:e.jsx(n.FAQComponent,{items:s,mode:"multiple"})})]})});exports.FAQModule=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../src/modules/FAQModule/faqModule.module.css"),l=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Button/Button.cjs.js"),i=require("../../components/FAQComponent/FAQComponent.cjs.js"),r=({title:o,questions:s})=>e.jsx("section",{className:t.root,children:e.jsxs("div",{className:t.container,children:[e.jsxs("div",{className:t.header,children:[e.jsx(l.HighlightedTitle,{title:o,defaultVariant:"displayMd",mobileVariant:"headingXl"}),e.jsx("div",{className:t.buttonWrapperDesktop,children:e.jsx(n.Button,{variant:"muted",size:"lg",as:"a",href:"/faqs",children:"VIEW ALL FAQ"})}),e.jsx("div",{className:t.buttonWrapperMobile,children:e.jsx(n.Button,{variant:"muted",size:"sm",as:"a",href:"/faqs",children:"VIEW ALL FAQ"})})]}),e.jsx("div",{className:t.contentDesktop,children:e.jsx(i.FAQComponent,{items:s,mode:"multiple"})}),e.jsx("div",{className:t.contentMobile,children:e.jsx(i.FAQComponent,{items:s,mode:"multiple"})})]})});exports.FAQModule=r;

package/dist/modules/FAQModule/FAQModule.es.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import i from "../../modules/FAQModule/faqModule.module.css";
 import { HighlightedTitle as o } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Button as r } from "../../components/Button/Button.es.js";
 import { FAQComponent as l } from "../../components/FAQComponent/FAQComponent.es.js";
-import i from "./faqModule.module.css.es.js";
 const h = ({ title: s, questions: t }) => /* @__PURE__ */ e("section", { className: i.root, children: /* @__PURE__ */ a("div", { className: i.container, children: [
   /* @__PURE__ */ a("div", { className: i.header, children: [
     /* @__PURE__ */ e(o, { title: s, defaultVariant: "displayMd", mobileVariant: "headingXl" }),

package/dist/modules/FAQModule/faqModule.module.css

@@ -0,0 +1,76 @@
+.root {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: 120px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.buttonWrapperDesktop {
+    display: flex;
+}
+
+.buttonWrapperMobile {
+    display: none;
+}
+
+.contentDesktop {
+    display: flex;
+    width: 100%;
+}
+
+.contentMobile {
+    display: none;
+    width: 100%;
+}
+
+@media (width <= 1024px) {
+    .container {
+        padding: 64px;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        gap: 40px;
+        padding: 64px 20px;
+    }
+
+    .header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 24px;
+    }
+
+    .buttonWrapperDesktop {
+        display: none;
+    }
+
+    .buttonWrapperMobile {
+        display: flex;
+    }
+
+    .contentDesktop {
+        display: none;
+        width: 100%;
+    }
+
+    .contentMobile {
+        display: flex;
+        width: 100%;
+    }
+}

package/dist/modules/FeaturedIn/FeaturedIn.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),i=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),l=require("../../components/Typography/Typography.cjs.js"),s=require("../../utils/cn/cn.cjs.js"),a=require("./featuredIn.module.css.cjs.js"),c=require("./components/CtaFeaturedIn.cjs.js");function m({media:n}){return e.jsx("div",{className:a.default.mediaFeaturedInBlock,children:n.filter(r=>!!r.logo).map(({logo:r,url:t},u)=>{const d=t?"a":"div";return e.jsx(d,{href:t,target:"_blank",rel:"noopener noreferrer",className:a.default.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.default.mediaFeaturedInImage,style:{backgroundImage:`url(${r})`}})},`${t}_${u}`)})})}function f({quote:n}){return e.jsx("div",{className:a.default.quoteFeaturedInBlock,children:e.jsxs(l.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.default.quoteFeaturedInText,children:["“",n,"”"]})})}function p({label:n,content:r}){return e.jsxs("section",{className:a.default.container,children:[e.jsx("p",{className:s.cn(a.default.title,a.default.customTitle),children:"(Featured In)"}),e.jsx(l.Typography,{as:"p",defaultVariant:"displayMd",className:s.cn(a.default.title,a.default.defaultTitle),children:"(Featured In)"}),e.jsx(l.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.default.label,children:n}),e.jsx(i.InfiniteScroll,{items:r,contentClassName:a.default.content,itemClassName:a.default.item,rootClassName:a.default.scrollRoot,renderItem:t=>e.jsxs(o.Fragment,{children:[t.type==="media"&&e.jsx(m,{media:t.media}),t.type==="quote"&&e.jsx(f,{quote:t.quote}),t.type==="cta"&&e.jsx(c.CtaFeaturedIn,{button_label:t.button_label})]},t.type)})]})}exports.FeaturedIn=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),l=require("../../utils/cn/cn.cjs.js"),a=require("../../src/modules/FeaturedIn/featuredIn.module.css"),u=require("./components/CtaFeaturedIn.cjs.js"),s=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js");function m({media:n}){return e.jsx("div",{className:a.mediaFeaturedInBlock,children:n.filter(r=>!!r.logo).map(({logo:r,url:t},o)=>{const i=t?"a":"div";return e.jsx(i,{href:t,target:"_blank",rel:"noopener noreferrer",className:a.mediaFeaturedInImageContainer,children:e.jsx("div",{className:a.mediaFeaturedInImage,style:{backgroundImage:`url(${r})`}})},`${t}_${o}`)})})}function p({quote:n}){return e.jsx("div",{className:a.quoteFeaturedInBlock,children:e.jsxs(s.Typography,{as:"p",defaultVariant:"headingSm",mobileVariant:"headingXxs",className:a.quoteFeaturedInText,children:["“",n,"”"]})})}function I({label:n,content:r}){return e.jsxs("section",{className:a.container,children:[e.jsx("p",{className:l.cn(a.title,a.customTitle),children:"(Featured In)"}),e.jsx(s.Typography,{as:"p",defaultVariant:"displayMd",className:l.cn(a.title,a.defaultTitle),children:"(Featured In)"}),e.jsx(s.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:a.label,children:n}),e.jsx(d.InfiniteScroll,{items:r,contentClassName:a.content,itemClassName:a.item,rootClassName:a.scrollRoot,renderItem:t=>e.jsxs(c.Fragment,{children:[t.type==="media"&&e.jsx(m,{media:t.media}),t.type==="quote"&&e.jsx(p,{quote:t.quote}),t.type==="cta"&&e.jsx(u.CtaFeaturedIn,{button_label:t.button_label})]},t.type)})]})}exports.FeaturedIn=I;

package/dist/modules/FeaturedIn/FeaturedIn.es.js

@@ -1,10 +1,10 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import { Fragment as d } from "react";
-import { InfiniteScroll as s } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-import { Typography as o } from "../../components/Typography/Typography.es.js";
 import { cn as i } from "../../utils/cn/cn.es.js";
-import e from "./featuredIn.module.css.es.js";
-import { CtaFeaturedIn as c } from "./components/CtaFeaturedIn.es.js";
+import e from "../../modules/FeaturedIn/featuredIn.module.css";
+import { CtaFeaturedIn as s } from "./components/CtaFeaturedIn.es.js";
+import { Typography as o } from "../../components/Typography/Typography.es.js";
+import { InfiniteScroll as c } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
 function u({ media: r }) {
   return /* @__PURE__ */ t("div", { className: e.mediaFeaturedInBlock, children: r.filter((n) => !!n.logo).map(({ logo: n, url: a }, m) => /* @__PURE__ */ t(
     a ? "a" : "div",
@@ -40,7 +40,7 @@ function q({ label: r, content: n }) {
     /* @__PURE__ */ t(o, { as: "p", defaultVariant: "displayMd", className: i(e.title, e.defaultTitle), children: "(Featured In)" }),
     /* @__PURE__ */ t(o, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, className: e.label, children: r }),
     /* @__PURE__ */ t(
-      s,
+      c,
       {
         items: n,
         contentClassName: e.content,
@@ -49,7 +49,7 @@ function q({ label: r, content: n }) {
         renderItem: (a) => /* @__PURE__ */ l(d, { children: [
           a.type === "media" && /* @__PURE__ */ t(u, { media: a.media }),
           a.type === "quote" && /* @__PURE__ */ t(p, { quote: a.quote }),
-          a.type === "cta" && /* @__PURE__ */ t(c, { button_label: a.button_label })
+          a.type === "cta" && /* @__PURE__ */ t(s, { button_label: a.button_label })
         ] }, a.type)
       }
     )

package/dist/modules/FeaturedIn/components/CtaFeaturedIn.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("../../../types/analytics/analytics.cjs.js"),c=require("../featuredIn.module.css.cjs.js");function s({button_label:r}){const e="https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",i=()=>{var t;(t=window.eventBus)==null||t.emit("analytics",{event:a.EAnalyticsEvent.ctaClicked,type:a.EAnalyticsEventType.interaction,component:"FeaturedIn",element:"primary_button",payload:{link:e}})};return n.jsx("a",{href:e,onClick:i,className:c.default.ctaFeaturedIn,children:n.jsx("span",{className:c.default.ctaFeaturedInText,children:r})})}exports.CtaFeaturedIn=s;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("../../../types/analytics/analytics.cjs.js"),c=require("../../../src/modules/FeaturedIn/featuredIn.module.css");function r({button_label:s}){const e="https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",i=()=>{var t;(t=window.eventBus)==null||t.emit("analytics",{event:a.EAnalyticsEvent.ctaClicked,type:a.EAnalyticsEventType.interaction,component:"FeaturedIn",element:"primary_button",payload:{link:e}})};return n.jsx("a",{href:e,onClick:i,className:c.ctaFeaturedIn,children:n.jsx("span",{className:c.ctaFeaturedInText,children:s})})}exports.CtaFeaturedIn=r;

package/dist/modules/FeaturedIn/components/CtaFeaturedIn.es.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
 import { EAnalyticsEventType as i, EAnalyticsEvent as o } from "../../../types/analytics/analytics.es.js";
-import a from "../featuredIn.module.css.es.js";
+import a from "../../../modules/FeaturedIn/featuredIn.module.css";
 function d({ button_label: c }) {
   const t = "https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948";
   return /* @__PURE__ */ n("a", { href: t, onClick: () => {

package/dist/modules/FeaturedIn/featuredIn.module.css

@@ -0,0 +1,198 @@
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing-120) 0;
+    position: relative;
+}
+
+.label {
+    text-align: center;
+}
+
+.scrollRoot {
+    margin-top: 67px;
+}
+
+.label + .scrollRoot {
+    margin-top: 91px;
+}
+
+.item {
+    display: flex;
+    flex-direction: row;
+    padding-inline: var(--spacing-32, 32px);
+    border-right: var(--border-width-sm) solid var(--color-bg-fill-alpha-black-10);
+}
+
+.title {
+    position: absolute;
+    color: var(--color-text-primary);
+    text-align: center;
+    opacity: 0.2;
+    margin-top: 48px;
+    width: 100%;
+}
+
+.customTitle {
+    font-family: var(--font-default);
+    font-size: 144px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%;
+    letter-spacing: -4.32px;
+    font-feature-settings: "case";
+}
+
+.defaultTitle {
+    display: none;
+}
+
+.content {
+    align-items: initial;
+    padding: var(--spacing-32) 0;
+    border-bottom: var(--border-width-sm) solid var(--color-bg-fill-alpha-black-10);
+    border-top: var(--border-width-sm) solid var(--color-bg-fill-alpha-black-10);
+}
+
+.mediaFeaturedInBlock {
+    display: flex;
+    align-items: center;
+    column-gap: var(--spacing-32, 32px);
+}
+
+.mediaFeaturedInImageContainer {
+    display: flex;
+    width: 160px;
+    height: 160px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background-color: var(--color-neutral-200);
+    background:
+        linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%), var(--color-bg-fill-alpha-white-20);
+    backdrop-filter: blur(6px);
+    padding: 25px;
+}
+
+.mediaFeaturedInImage {
+    height: 100%;
+    width: 100%;
+    background-size: contain;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+
+.quoteFeaturedInBlock {
+    display: flex;
+    align-items: center;
+    width: 320px;
+}
+
+.quoteFeaturedInText {
+    white-space: normal;
+    text-align: center;
+}
+
+.ctaFeaturedIn {
+    display: flex;
+    width: 600px;
+    height: 180px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 32px;
+    text-decoration: none;
+    background: linear-gradient(90deg, var(--color-indigo-200) 0%, var(--color-indigo-400) 50%, var(--color-indigo-200) 100%);
+    background-size: 200% 100%;
+    background-position: 200% center;
+    backdrop-filter: blur(6px);
+}
+
+.ctaFeaturedIn:hover {
+    animation: gradientShift 3s infinite;
+}
+
+@keyframes gradientShift {
+    0% {
+        background-position: 200% center;
+    }
+    100% {
+        background-position: 0% center;
+    }
+}
+
+.ctaFeaturedInText {
+    color: var(--color-text-primary-inverted);
+    font-family: var(--font-decorative);
+    font-size: var(--font-size-heading-xl);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-sm);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+
+.spacer {
+    width: 1px;
+    background-color: var(--color-bg-fill-alpha-black-10);
+    margin: 0 32px;
+}
+
+@media (width <= 900px) {
+    .customTitle {
+        display: none;
+    }
+    .defaultTitle {
+        display: block;
+        font-feature-settings: "case";
+    }
+    .mediaFeaturedInBlock {
+        column-gap: var(--spacing-16, 16px);
+    }
+    .item {
+        padding-inline: var(--spacing-16, 16px);
+    }
+}
+
+@media (width <= 768px) {
+    .scrollRoot {
+        margin-top: 36px;
+    }
+
+    .label + .scrollRoot {
+        margin-top: 52px;
+    }
+
+    .title {
+        margin-top: 32px;
+    }
+
+    .content {
+        padding: 15px 0;
+    }
+
+    .mediaFeaturedInImageContainer {
+        width: 96px;
+        height: 96px;
+        padding: 10px;
+    }
+
+    .quoteFeaturedInBlock {
+        width: 240px;
+    }
+
+    .ctaFeaturedIn {
+        height: 93px;
+        width: 275px;
+        border-radius: 16px;
+        letter-spacing: 0.9px;
+    }
+
+    .ctaFeaturedInText {
+        font-size: 18px;
+    }
+
+    .spacer {
+        margin: 0 15px;
+    }
+}

package/dist/modules/FeaturesGallery/FeaturesGallery.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),u=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),c=require("../../components/Typography/Typography.cjs.js"),d=require("./components/FeatureGrid/FeatureGrid.cjs.js"),a=require("./featuresGallery.module.css.cjs.js"),h=({label:t,url:r})=>e.jsx("a",{href:r,className:a.default.label,children:e.jsx(c.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:t})}),m=({title:t,description:r,features:i,labels:n})=>e.jsxs("section",{className:a.default.root,children:[e.jsxs("div",{className:a.default.container,children:[e.jsxs("div",{className:a.default.header,children:[e.jsx(o.HighlightedTitle,{title:t,className:a.default.title,defaultVariant:"displayMd",mobileVariant:"headingXl"}),r&&e.jsx(c.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",children:r})]}),e.jsxs("div",{className:a.default.features,children:[e.jsx("div",{className:a.default.primaryFeatures,children:i.slice(0,2).map((l,s)=>e.jsx(d.FeatureGrid,{feature:l,index:s,type:"primary"},l.label))}),i.length>2&&e.jsx("div",{className:a.default.secondaryFeatures,children:i.slice(2).map((l,s)=>e.jsx(d.FeatureGrid,{feature:l,index:s,type:"secondary"},l.label))})]})]}),n.length>0&&e.jsx("div",{className:a.default.footer,children:e.jsx(u.InfiniteScroll,{items:n,renderItem:h})})]});exports.FeaturesGallery=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../src/modules/FeaturesGallery/featuresGallery.module.css"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),c=require("./components/FeatureGrid/FeatureGrid.cjs.js"),h=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),m=({label:s,url:i})=>e.jsx("a",{href:i,className:r.label,children:e.jsx(d.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:s})}),y=({title:s,description:i,features:l,labels:n})=>e.jsxs("section",{className:r.root,children:[e.jsxs("div",{className:r.container,children:[e.jsxs("div",{className:r.header,children:[e.jsx(o.HighlightedTitle,{title:s,className:r.title,defaultVariant:"displayMd",mobileVariant:"headingXl"}),i&&e.jsx(d.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",children:i})]}),e.jsxs("div",{className:r.features,children:[e.jsx("div",{className:r.primaryFeatures,children:l.slice(0,2).map((a,t)=>e.jsx(c.FeatureGrid,{feature:a,index:t,type:"primary"},a.label))}),l.length>2&&e.jsx("div",{className:r.secondaryFeatures,children:l.slice(2).map((a,t)=>e.jsx(c.FeatureGrid,{feature:a,index:t,type:"secondary"},a.label))})]})]}),n.length>0&&e.jsx("div",{className:r.footer,children:e.jsx(h.InfiniteScroll,{items:n,renderItem:m})})]});exports.FeaturesGallery=y;