@zenpatient-org/healthspan-marketing-ui 0.1.54 → 0.1.56

package/dist/modules/Curiosity/Curiosity.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../components/Button/Button.cjs.js"),m=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),o=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),a=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/StudyGridCard/StudyGridCard.cjs.js"),t=require("./curiosity.module.css.cjs.js"),f=require("../../utils/cn/cn.cjs.js"),h=({title:c,description:r,studies:s,indexed:i})=>e.jsx("div",{className:t.default.root,children:e.jsxs("div",{className:f.cn(t.default.contentContainer,{[t.default.notIndexed]:!i}),children:[e.jsxs("div",{className:t.default.containerHeader,children:[e.jsx(m.HighlightedTitle,{title:c,className:t.default.title,defaultVariant:"displayXl",mobileVariant:"displayXs"}),e.jsxs("div",{className:t.default.contentTextContainer,children:[r&&e.jsx(a.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodySm",className:t.default.contentText,children:r}),e.jsx("div",{className:t.default.buttonContainer,children:e.jsx(u.Button,{as:"a",href:"/",variant:"muted",size:"lg",children:"View all studies"})})]})]}),i&&e.jsxs("div",{className:t.default.dividerContainer,children:[e.jsx(a.Typography,{defaultVariant:"labelMd",children:i.number}),e.jsx("div",{className:t.default.divider}),e.jsx(a.Typography,{defaultVariant:"labelMd",emphasis:!0,children:i.label})]}),e.jsxs("div",{className:t.default.containerBottom,children:[e.jsx(o.InfiniteScroll,{items:s,speed:50,contentClassName:t.default.infiniteScrollContent,itemClassName:t.default.infiniteScrollItem,rootClassName:t.default.infiniteScrollRoot,renderItem:(l,n)=>e.jsx(d.StudyGridCard,{...l,compressed:!0},n)}),e.jsx(o.InfiniteScroll,{items:s,speed:50,direction:"right",contentClassName:t.default.infiniteScrollContent,itemClassName:t.default.infiniteScrollItemTwo,rootClassName:t.default.infiniteScrollRoot,renderItem:(l,n)=>e.jsx(d.StudyGridCard,{...l,compressed:!0},n)})]})]})});exports.Curiosity=h;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../components/Button/Button.cjs.js"),m=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),o=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),a=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/StudyGridCard/StudyGridCard.cjs.js"),t=require("./curiosity.module.css.cjs.js"),f=require("../../utils/cn/cn.cjs.js"),h=({title:c,description:r,studies:s,indexed:i})=>e.jsxs("div",{className:f.cn(t.default.root,{[t.default.notIndexed]:!i}),children:[e.jsxs("div",{className:t.default.contentContainer,children:[e.jsxs("div",{className:t.default.containerHeader,children:[e.jsx(m.HighlightedTitle,{title:c,className:t.default.title,defaultVariant:"displayXl",mobileVariant:"displayXs"}),e.jsxs("div",{className:t.default.contentTextContainer,children:[r&&e.jsx(a.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodySm",className:t.default.contentText,children:r}),e.jsx("div",{className:t.default.buttonContainer,children:e.jsx(u.Button,{as:"a",href:"/",variant:"muted",size:"lg",children:"View all studies"})})]})]}),i&&e.jsxs("div",{className:t.default.dividerContainer,children:[e.jsx(a.Typography,{defaultVariant:"labelMd",children:i.number}),e.jsx("div",{className:t.default.divider}),e.jsx(a.Typography,{defaultVariant:"labelMd",emphasis:!0,children:i.label})]})]}),e.jsxs("div",{className:t.default.containerBottom,children:[e.jsx(o.InfiniteScroll,{items:s,speed:50,contentClassName:t.default.infiniteScrollContent,itemClassName:t.default.infiniteScrollItem,rootClassName:t.default.infiniteScrollRoot,renderItem:(l,n)=>e.jsx(d.StudyGridCard,{...l,compressed:!0},n)}),e.jsx(o.InfiniteScroll,{items:s,speed:50,direction:"right",contentClassName:t.default.infiniteScrollContent,itemClassName:t.default.infiniteScrollItemTwo,rootClassName:t.default.infiniteScrollRoot,renderItem:(l,n)=>e.jsx(d.StudyGridCard,{...l,compressed:!0},n)})]})]});exports.Curiosity=h;

package/dist/modules/Curiosity/Curiosity.es.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { Button as f } from "../../components/Button/Button.es.js";
 import { HighlightedTitle as h } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { InfiniteScroll as m } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
@@ -7,27 +7,29 @@ import { Typography as l } from "../../components/Typography/Typography.es.js";
 import { StudyGridCard as d } from "../../components/StudyGridCard/StudyGridCard.es.js";
 import e from "./curiosity.module.css.es.js";
 import { cn as p } from "../../utils/cn/cn.es.js";
-const g = ({ title: c, description: o, studies: s, indexed: r }) => /* @__PURE__ */ t("div", { className: e.root, children: /* @__PURE__ */ i("div", { className: p(e.contentContainer, { [e.notIndexed]: !r }), children: [
-  /* @__PURE__ */ i("div", { className: e.containerHeader, children: [
-    /* @__PURE__ */ t(
-      h,
-      {
-        title: c,
-        className: e.title,
-        defaultVariant: "displayXl",
-        mobileVariant: "displayXs"
-      }
-    ),
-    /* @__PURE__ */ i("div", { className: e.contentTextContainer, children: [
-      o && /* @__PURE__ */ t(l, { defaultVariant: "bodyLg", mobileVariant: "bodySm", className: e.contentText, children: o }),
-      /* @__PURE__ */ t("div", { className: e.buttonContainer, children: /* @__PURE__ */ t(f, { as: "a", href: "/", variant: "muted", size: "lg", children: "View all studies" }) })
+const g = ({ title: c, description: o, studies: s, indexed: r }) => /* @__PURE__ */ i("div", { className: p(e.root, { [e.notIndexed]: !r }), children: [
+  /* @__PURE__ */ i("div", { className: e.contentContainer, children: [
+    /* @__PURE__ */ i("div", { className: e.containerHeader, children: [
+      /* @__PURE__ */ t(
+        h,
+        {
+          title: c,
+          className: e.title,
+          defaultVariant: "displayXl",
+          mobileVariant: "displayXs"
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: e.contentTextContainer, children: [
+        o && /* @__PURE__ */ t(l, { defaultVariant: "bodyLg", mobileVariant: "bodySm", className: e.contentText, children: o }),
+        /* @__PURE__ */ t("div", { className: e.buttonContainer, children: /* @__PURE__ */ t(f, { as: "a", href: "/", variant: "muted", size: "lg", children: "View all studies" }) })
+      ] })
+    ] }),
+    r && /* @__PURE__ */ i("div", { className: e.dividerContainer, children: [
+      /* @__PURE__ */ t(l, { defaultVariant: "labelMd", children: r.number }),
+      /* @__PURE__ */ t("div", { className: e.divider }),
+      /* @__PURE__ */ t(l, { defaultVariant: "labelMd", emphasis: !0, children: r.label })
     ] })
   ] }),
-  r && /* @__PURE__ */ i("div", { className: e.dividerContainer, children: [
-    /* @__PURE__ */ t(l, { defaultVariant: "labelMd", children: r.number }),
-    /* @__PURE__ */ t("div", { className: e.divider }),
-    /* @__PURE__ */ t(l, { defaultVariant: "labelMd", emphasis: !0, children: r.label })
-  ] }),
   /* @__PURE__ */ i("div", { className: e.containerBottom, children: [
     /* @__PURE__ */ t(
       m,
@@ -53,7 +55,7 @@ const g = ({ title: c, description: o, studies: s, indexed: r }) => /* @__PURE__
       }
     )
   ] })
-] }) });
+] });
 export {
   g as Curiosity
 };

package/dist/modules/ExpandingDetails/ExpandingDetails.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),H=require("../../node_modules/@gsap/react/src/index.cjs.js"),d=require("../../node_modules/gsap/index.cjs.js"),u=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),w=require("react"),A=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),g=require("../../components/Typography/Typography.cjs.js"),V=require("../../utils/debounce.cjs.js"),r=require("./expandingDetails.module.css.cjs.js");d.gsap.registerPlugin(u.ScrollTrigger);const $=({colorScheme:h,label:N,title:P,sections:b})=>{const c=w.useRef(null);return H.useGSAP(()=>{if(!c.current)return;const a=()=>{var S;d.gsap.killTweensOf("*"),u.ScrollTrigger.getAll().forEach(e=>e.kill());const o=d.gsap.utils.toArray('[data-scroll-id="section"]'),t=(S=c.current)==null?void 0:S.querySelector('[data-scroll-id="sections"]');if(!t)return;const f=d.gsap.timeline({scrollTrigger:{trigger:c.current,start:"top top",end:()=>`+=${o.length*500}`,scrub:1,markers:!1,pin:!0}}),p=t==null?void 0:t.querySelector('[data-scroll-id="heading"]');if(!p)return;d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="section"]'),{height:p.offsetHeight||0}),d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="protocol"]'),{scale:.5,yPercent:0}),d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="image-circle"]'),{scale:.5,yPercent:5});const y=window.innerWidth<768?1.2:2,m=window.innerWidth<768?1.2:2;o.forEach((e,E)=>{var x,q,T,j,v;const n=e==null?void 0:e.querySelector('[data-scroll-id="heading"]'),i=e==null?void 0:e.querySelector('[data-scroll-id="content"]');!n||!i||(f.to(e,{height:n.offsetHeight+i.offsetHeight}).to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:y,yPercent:50},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:m,yPercent:50},"<").to(i,{height:i.offsetHeight},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:1},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:1,yPercent:5},"<"),E<o.length-1&&f.to(e,{height:n.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:n.offsetHeight+i.offsetHeight},"<").to(((x=e.nextElementSibling)==null?void 0:x.querySelector('[data-scroll-id="section-title"]'))||null,{scale:y,yPercent:100},"<").to(((q=e.nextElementSibling)==null?void 0:q.querySelector('[data-scroll-id="section-index"]'))||null,{scale:m,yPercent:100},"<").to(((T=e.nextElementSibling)==null?void 0:T.querySelector('[data-scroll-id="content"]'))||null,{height:i.offsetHeight,yPercent:0},"<").to(((j=e.nextElementSibling)==null?void 0:j.querySelector('[data-scroll-id="protocol"]'))||null,{scale:1},"<").to(((v=e.nextElementSibling)==null?void 0:v.querySelector('[data-scroll-id="image-circle"]'))||null,{scale:1,yPercent:5},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:1,yPercent:-15},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:1,yPercent:-15},"<").to(i,{height:0,yPercent:0},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:0,yPercent:200},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:0,yPercent:200},"<"))})};a();const s=V.default(()=>{a()},200);return window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s),u.ScrollTrigger.getAll().forEach(o=>o.kill()),d.gsap.killTweensOf("*")}},{scope:c,dependencies:[c]}),l.jsx("div",{ref:c,className:`${r.default.root} ${r.default[h]}`,children:l.jsxs("div",{className:r.default.expandingDetailsWrapper,children:[l.jsxs("header",{"data-scroll-id":"header",className:r.default.header,children:[l.jsx(g.Typography,{as:"div",defaultVariant:"labelSm",emphasis:!0,className:r.default.label,children:N}),l.jsx(A.HighlightedTitle,{as:"div",defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:h,className:r.default.title,title:P})]}),l.jsx("div",{"data-scroll-id":"sections",className:r.default.sections,children:b.map((a,s)=>l.jsxs("div",{id:`section-${s+1}`,"data-scroll-id":"section",className:r.default.section,children:[l.jsxs("div",{"data-scroll-id":"heading",className:r.default.heading,children:[l.jsx("div",{"data-scroll-id":"section-title",className:r.default.sectionTitleWrapper,children:l.jsx(g.Typography,{as:"h3",defaultVariant:"headingSm",className:r.default.sectionTitle,children:a.title})}),l.jsx("div",{"data-scroll-id":"section-index",className:r.default.sectionIndexWrapper,children:l.jsxs(g.Typography,{as:"p",defaultVariant:"headingSm",className:r.default.sectionIndex,children:["(",String(s+1).padStart(2,"0"),")"]})})]}),l.jsxs("div",{"data-scroll-id":"content",className:r.default.content,children:[l.jsx("div",{"data-scroll-id":"protocol",className:r.default.protocolWrapper,children:l.jsx(g.Typography,{as:"div",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:r.default.protocol,children:a.protocol})}),l.jsx("div",{"data-scroll-id":"image-circle",className:r.default.imageCircle,children:l.jsx("img",{src:a.image,alt:a.title})})]}),l.jsx("div",{className:r.default.leftBorder}),l.jsx("div",{className:r.default.rightBorder})]},a.title))})]})})};exports.ExpandingDetails=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),H=require("../../node_modules/@gsap/react/src/index.cjs.js"),d=require("../../node_modules/gsap/index.cjs.js"),u=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),w=require("react"),V=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),A=require("../../utils/debounce.cjs.js"),r=require("./expandingDetails.module.css.cjs.js");d.gsap.registerPlugin(u.ScrollTrigger);const $=({colorScheme:h,label:f,title:N,sections:P})=>{const s=w.useRef(null);return H.useGSAP(()=>{if(!s.current)return;const a=()=>{var x;d.gsap.killTweensOf("*"),u.ScrollTrigger.getAll().forEach(e=>e.kill());const o=d.gsap.utils.toArray('[data-scroll-id="section"]'),t=(x=s.current)==null?void 0:x.querySelector('[data-scroll-id="sections"]');if(!t)return;const p=d.gsap.timeline({scrollTrigger:{trigger:s.current,start:"top top",end:()=>`+=${o.length*500}`,scrub:1,markers:!1,pin:!0}}),y=t==null?void 0:t.querySelector('[data-scroll-id="heading"]');if(!y)return;d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="section"]'),{height:y.offsetHeight||0}),d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="protocol"]'),{scale:.5,yPercent:0}),d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="image-circle"]'),{scale:.5,yPercent:5});const m=window.innerWidth<768?1.2:2,S=window.innerWidth<768?1.2:2;o.forEach((e,E)=>{var q,T,j,b,v;const g=e==null?void 0:e.querySelector('[data-scroll-id="heading"]'),i=e==null?void 0:e.querySelector('[data-scroll-id="content"]');!g||!i||(p.to(e,{height:g.offsetHeight+i.offsetHeight}).to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:m,yPercent:50},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:S,yPercent:50},"<").to(i,{height:i.offsetHeight},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:1},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:1,yPercent:5},"<"),E<o.length-1&&p.to(e,{height:g.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:g.offsetHeight+i.offsetHeight},"<").to(((q=e.nextElementSibling)==null?void 0:q.querySelector('[data-scroll-id="section-title"]'))||null,{scale:m,yPercent:100},"<").to(((T=e.nextElementSibling)==null?void 0:T.querySelector('[data-scroll-id="section-index"]'))||null,{scale:S,yPercent:100},"<").to(((j=e.nextElementSibling)==null?void 0:j.querySelector('[data-scroll-id="content"]'))||null,{height:i.offsetHeight,yPercent:0},"<").to(((b=e.nextElementSibling)==null?void 0:b.querySelector('[data-scroll-id="protocol"]'))||null,{scale:1},"<").to(((v=e.nextElementSibling)==null?void 0:v.querySelector('[data-scroll-id="image-circle"]'))||null,{scale:1,yPercent:5},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:1,yPercent:-15},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:1,yPercent:-15},"<").to(i,{height:0,yPercent:0},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:0,yPercent:200},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:0,yPercent:200},"<"))})};a();const c=A.default(()=>{a()},200);return window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c),u.ScrollTrigger.getAll().forEach(o=>o.kill()),d.gsap.killTweensOf("*")}},{scope:s,dependencies:[s]}),l.jsx("div",{ref:s,className:`${r.default.root} ${r.default[h]}`,children:l.jsxs("div",{className:r.default.expandingDetailsWrapper,children:[l.jsxs("header",{"data-scroll-id":"header",className:r.default.header,children:[f&&l.jsx(n.Typography,{as:"div",defaultVariant:"labelSm",emphasis:!0,className:r.default.label,children:f}),l.jsx(V.HighlightedTitle,{as:"div",defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:h,className:r.default.title,title:N})]}),l.jsx("div",{"data-scroll-id":"sections",className:r.default.sections,children:P.map((a,c)=>l.jsxs("div",{id:`section-${c+1}`,"data-scroll-id":"section",className:r.default.section,children:[l.jsxs("div",{"data-scroll-id":"heading",className:r.default.heading,children:[l.jsx("div",{"data-scroll-id":"section-title",className:r.default.sectionTitleWrapper,children:l.jsx(n.Typography,{as:"h3",defaultVariant:"headingSm",className:r.default.sectionTitle,children:a.title})}),l.jsx("div",{"data-scroll-id":"section-index",className:r.default.sectionIndexWrapper,children:l.jsxs(n.Typography,{as:"p",defaultVariant:"headingSm",className:r.default.sectionIndex,children:["(",String(c+1).padStart(2,"0"),")"]})})]}),l.jsxs("div",{"data-scroll-id":"content",className:r.default.content,children:[l.jsxs("div",{"data-scroll-id":"protocol",className:r.default.protocolWrapper,children:[a.subtitle&&l.jsx(n.Typography,{as:"h4",defaultVariant:"headingLg",mobileVariant:"headingXs",children:a.subtitle}),l.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:a.description})]}),l.jsx("div",{"data-scroll-id":"image-circle",className:r.default.imageCircle,children:l.jsx("img",{src:a.image,alt:a.title})})]}),l.jsx("div",{className:r.default.leftBorder}),l.jsx("div",{className:r.default.rightBorder})]},a.title))})]})})};exports.ExpandingDetails=$;

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

@@ -1,77 +1,77 @@
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { useGSAP as A } from "../../node_modules/@gsap/react/src/index.es.js";
-import { gsap as d } from "../../node_modules/gsap/index.es.js";
-import { ScrollTrigger as g } from "../../node_modules/gsap/ScrollTrigger.es.js";
-import { useRef as V } from "react";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { useGSAP as V } from "../../node_modules/@gsap/react/src/index.es.js";
+import { gsap as i } from "../../node_modules/gsap/index.es.js";
+import { ScrollTrigger as m } from "../../node_modules/gsap/ScrollTrigger.es.js";
+import { useRef as A } from "react";
 import { HighlightedTitle as W } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as m } from "../../components/Typography/Typography.es.js";
+import { Typography as h } from "../../components/Typography/Typography.es.js";
 import k from "../../utils/debounce.es.js";
 import l from "./expandingDetails.module.css.es.js";
-d.registerPlugin(g);
-const O = ({ colorScheme: u, label: E, title: w, sections: T }) => {
-  const c = V(null);
-  return A(
+i.registerPlugin(m);
+const O = ({ colorScheme: u, label: f, title: w, sections: T }) => {
+  const o = A(null);
+  return V(
     () => {
-      if (!c.current) return;
+      if (!o.current) return;
       const a = () => {
-        var q;
-        d.killTweensOf("*"), g.getAll().forEach((e) => e.kill());
-        const n = d.utils.toArray('[data-scroll-id="section"]'), r = (q = c.current) == null ? void 0 : q.querySelector('[data-scroll-id="sections"]');
+        var v;
+        i.killTweensOf("*"), m.getAll().forEach((e) => e.kill());
+        const n = i.utils.toArray('[data-scroll-id="section"]'), r = (v = o.current) == null ? void 0 : v.querySelector('[data-scroll-id="sections"]');
         if (!r) return;
-        const f = d.timeline({
+        const p = i.timeline({
           scrollTrigger: {
-            trigger: c.current,
+            trigger: o.current,
             start: "top top",
             end: () => `+=${n.length * 500}`,
             scrub: 1,
             markers: !1,
             pin: !0
           }
-        }), p = r == null ? void 0 : r.querySelector('[data-scroll-id="heading"]');
-        if (!p) return;
-        d.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="section"]'), {
-          height: p.offsetHeight || 0
-        }), d.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="protocol"]'), {
+        }), y = r == null ? void 0 : r.querySelector('[data-scroll-id="heading"]');
+        if (!y) return;
+        i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="section"]'), {
+          height: y.offsetHeight || 0
+        }), i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="protocol"]'), {
           scale: 0.5,
           yPercent: 0
-        }), d.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="image-circle"]'), {
+        }), i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="image-circle"]'), {
           scale: 0.5,
           yPercent: 5
         });
-        const y = window.innerWidth < 768 ? 1.2 : 2, S = window.innerWidth < 768 ? 1.2 : 2;
+        const S = window.innerWidth < 768 ? 1.2 : 2, q = window.innerWidth < 768 ? 1.2 : 2;
         n.forEach((e, H) => {
-          var v, N, x, P, b;
-          const h = e == null ? void 0 : e.querySelector('[data-scroll-id="heading"]'), i = e == null ? void 0 : e.querySelector('[data-scroll-id="content"]');
-          !h || !i || (f.to(e, { height: h.offsetHeight + i.offsetHeight }).to(
+          var x, N, b, P, E;
+          const g = e == null ? void 0 : e.querySelector('[data-scroll-id="heading"]'), d = e == null ? void 0 : e.querySelector('[data-scroll-id="content"]');
+          !g || !d || (p.to(e, { height: g.offsetHeight + d.offsetHeight }).to(
             e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
-            { scale: y, yPercent: 50 },
+            { scale: S, yPercent: 50 },
             "<"
           ).to(
             e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
-            { scale: S, yPercent: 50 },
+            { scale: q, yPercent: 50 },
             "<"
-          ).to(i, { height: i.offsetHeight }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'), { scale: 1, yPercent: 5 }, "<"), H < n.length - 1 && f.to(e, { height: h.offsetHeight, delay: 0.5 }).to(
+          ).to(d, { height: d.offsetHeight }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'), { scale: 1, yPercent: 5 }, "<"), H < n.length - 1 && p.to(e, { height: g.offsetHeight, delay: 0.5 }).to(
             e.nextElementSibling,
-            { height: h.offsetHeight + i.offsetHeight },
+            { height: g.offsetHeight + d.offsetHeight },
             "<"
           ).to(
-            ((v = e.nextElementSibling) == null ? void 0 : v.querySelector('[data-scroll-id="section-title"]')) || null,
-            { scale: y, yPercent: 100 },
+            ((x = e.nextElementSibling) == null ? void 0 : x.querySelector('[data-scroll-id="section-title"]')) || null,
+            { scale: S, yPercent: 100 },
             "<"
           ).to(
             ((N = e.nextElementSibling) == null ? void 0 : N.querySelector('[data-scroll-id="section-index"]')) || null,
-            { scale: S, yPercent: 100 },
+            { scale: q, yPercent: 100 },
             "<"
           ).to(
-            ((x = e.nextElementSibling) == null ? void 0 : x.querySelector('[data-scroll-id="content"]')) || null,
-            { height: i.offsetHeight, yPercent: 0 },
+            ((b = e.nextElementSibling) == null ? void 0 : b.querySelector('[data-scroll-id="content"]')) || null,
+            { height: d.offsetHeight, yPercent: 0 },
             "<"
           ).to(
             ((P = e.nextElementSibling) == null ? void 0 : P.querySelector('[data-scroll-id="protocol"]')) || null,
             { scale: 1 },
             "<"
           ).to(
-            ((b = e.nextElementSibling) == null ? void 0 : b.querySelector('[data-scroll-id="image-circle"]')) || null,
+            ((E = e.nextElementSibling) == null ? void 0 : E.querySelector('[data-scroll-id="image-circle"]')) || null,
             { scale: 1, yPercent: 5 },
             "<"
           ).to(
@@ -82,7 +82,7 @@ const O = ({ colorScheme: u, label: E, title: w, sections: T }) => {
             e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
             { scale: 1, yPercent: -15 },
             "<"
-          ).to(i, { height: 0, yPercent: 0 }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 0, yPercent: 200 }, "<").to(
+          ).to(d, { height: 0, yPercent: 0 }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 0, yPercent: 200 }, "<").to(
             e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
             { scale: 0, yPercent: 200 },
             "<"
@@ -94,16 +94,16 @@ const O = ({ colorScheme: u, label: E, title: w, sections: T }) => {
         a();
       }, 200);
       return window.addEventListener("resize", s), () => {
-        window.removeEventListener("resize", s), g.getAll().forEach((n) => n.kill()), d.killTweensOf("*");
+        window.removeEventListener("resize", s), m.getAll().forEach((n) => n.kill()), i.killTweensOf("*");
       };
     },
     {
-      scope: c,
-      dependencies: [c]
+      scope: o,
+      dependencies: [o]
     }
-  ), /* @__PURE__ */ t("div", { ref: c, className: `${l.root} ${l[u]}`, children: /* @__PURE__ */ o("div", { className: l.expandingDetailsWrapper, children: [
-    /* @__PURE__ */ o("header", { "data-scroll-id": "header", className: l.header, children: [
-      /* @__PURE__ */ t(m, { as: "div", defaultVariant: "labelSm", emphasis: !0, className: l.label, children: E }),
+  ), /* @__PURE__ */ t("div", { ref: o, className: `${l.root} ${l[u]}`, children: /* @__PURE__ */ c("div", { className: l.expandingDetailsWrapper, children: [
+    /* @__PURE__ */ c("header", { "data-scroll-id": "header", className: l.header, children: [
+      f && /* @__PURE__ */ t(h, { as: "div", defaultVariant: "labelSm", emphasis: !0, className: l.label, children: f }),
       /* @__PURE__ */ t(
         W,
         {
@@ -116,32 +116,26 @@ const O = ({ colorScheme: u, label: E, title: w, sections: T }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ t("div", { "data-scroll-id": "sections", className: l.sections, children: T.map((a, s) => /* @__PURE__ */ o(
+    /* @__PURE__ */ t("div", { "data-scroll-id": "sections", className: l.sections, children: T.map((a, s) => /* @__PURE__ */ c(
       "div",
       {
         id: `section-${s + 1}`,
         "data-scroll-id": "section",
         className: l.section,
         children: [
-          /* @__PURE__ */ o("div", { "data-scroll-id": "heading", className: l.heading, children: [
-            /* @__PURE__ */ t("div", { "data-scroll-id": "section-title", className: l.sectionTitleWrapper, children: /* @__PURE__ */ t(m, { as: "h3", defaultVariant: "headingSm", className: l.sectionTitle, children: a.title }) }),
-            /* @__PURE__ */ t("div", { "data-scroll-id": "section-index", className: l.sectionIndexWrapper, children: /* @__PURE__ */ o(m, { as: "p", defaultVariant: "headingSm", className: l.sectionIndex, children: [
+          /* @__PURE__ */ c("div", { "data-scroll-id": "heading", className: l.heading, children: [
+            /* @__PURE__ */ t("div", { "data-scroll-id": "section-title", className: l.sectionTitleWrapper, children: /* @__PURE__ */ t(h, { as: "h3", defaultVariant: "headingSm", className: l.sectionTitle, children: a.title }) }),
+            /* @__PURE__ */ t("div", { "data-scroll-id": "section-index", className: l.sectionIndexWrapper, children: /* @__PURE__ */ c(h, { as: "p", defaultVariant: "headingSm", className: l.sectionIndex, children: [
               "(",
               String(s + 1).padStart(2, "0"),
               ")"
             ] }) })
           ] }),
-          /* @__PURE__ */ o("div", { "data-scroll-id": "content", className: l.content, children: [
-            /* @__PURE__ */ t("div", { "data-scroll-id": "protocol", className: l.protocolWrapper, children: /* @__PURE__ */ t(
-              m,
-              {
-                as: "div",
-                defaultVariant: "bodyMd",
-                mobileVariant: "bodySm",
-                className: l.protocol,
-                children: a.protocol
-              }
-            ) }),
+          /* @__PURE__ */ c("div", { "data-scroll-id": "content", className: l.content, children: [
+            /* @__PURE__ */ c("div", { "data-scroll-id": "protocol", className: l.protocolWrapper, children: [
+              a.subtitle && /* @__PURE__ */ t(h, { as: "h4", defaultVariant: "headingLg", mobileVariant: "headingXs", children: a.subtitle }),
+              /* @__PURE__ */ t(h, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: a.description })
+            ] }),
             /* @__PURE__ */ t("div", { "data-scroll-id": "image-circle", className: l.imageCircle, children: /* @__PURE__ */ t("img", { src: a.image, alt: a.title }) })
           ] }),
           /* @__PURE__ */ t("div", { className: l.leftBorder }),

package/dist/modules/ExpandingDetails/types.d.ts

@@ -3,11 +3,12 @@ import { TColorScheme } from '../../types/common';
 
 export type ExpandingDetailsProps = {
     colorScheme: TColorScheme;
-    label: string;
+    label?: string;
     title: ReactNode;
-    sections: {
+    sections: Array<{
         title: string;
-        protocol: React.ReactNode;
+        subtitle?: string;
+        description?: string;
         image: string;
-    }[];
+    }>;
 };

package/dist/modules/ImageWithText/ImageWithText.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),c=require("../../utils/cn/cn.cjs.js"),a=require("./imageWithText.module.css.cjs.js"),o=({image:r,text:i,title:l,view:t,colorScheme:s})=>e.jsx("section",{className:a.default.root,"data-scheme":s,children:e.jsxs("div",{className:a.default.container,children:[e.jsx("div",{className:a.default.imageContainer,children:e.jsx("img",{src:r,alt:"background image",className:a.default.image})}),e.jsxs("div",{className:c.cn(a.default.content,{[a.default.textAlignLeft]:t==="plain",[a.default.textAlignRight]:t==="complex"}),children:[t==="complex"&&e.jsxs("div",{className:a.default.richTextContainer,children:[l&&e.jsx(d.HighlightedTitle,{colorScheme:"dark",title:l,defaultVariant:"displayXs",mobileVariant:"headingLg"}),i&&e.jsx(n.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",children:i})]}),t==="plain"&&i&&e.jsx("div",{className:a.default.textContainer,children:e.jsx(n.Typography,{defaultVariant:"displayXs",mobileVariant:"headingXs",children:i})})]})]})});exports.ImageWithText=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),o=require("../../utils/cn/cn.cjs.js"),e=require("./imageWithText.module.css.cjs.js"),c=({image:d,text:t,title:l,view:i,colorScheme:r})=>a.jsx("section",{className:e.default.root,"data-scheme":r,children:a.jsxs("div",{className:e.default.container,"data-view":i,children:[a.jsx("div",{className:e.default.imageContainer,children:a.jsx("img",{src:d,alt:"background image",className:e.default.image})}),a.jsxs("div",{className:o.cn(e.default.content,{[e.default.textAlignLeft]:i==="plain"||i==="plain_with_title",[e.default.textAlignRight]:i==="complex"}),"data-view":i,children:[i==="complex"&&a.jsxs("div",{className:e.default.richTextContainer,children:[l&&a.jsx(s.HighlightedTitle,{colorScheme:"dark",title:l,defaultVariant:"displayXs",mobileVariant:"headingLg"}),t&&a.jsx(n.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodySm",children:t})]}),i==="plain"&&t&&a.jsx("div",{className:e.default.textContainer,children:a.jsx(n.Typography,{defaultVariant:"displayXs",mobileVariant:"headingXs",children:t})}),i==="plain_with_title"&&a.jsxs("div",{className:e.default.plainWithTitleContainer,children:[l&&a.jsx(n.Typography,{defaultVariant:"displayMd",mobileVariant:"headingLg",children:l}),t&&a.jsx(n.Typography,{defaultVariant:"bodyMd",mobileVariant:"bodyMd",children:t})]})]})]})});exports.ImageWithText=c;

package/dist/modules/ImageWithText/ImageWithText.es.js

@@ -1,21 +1,22 @@
-import { jsx as i, jsxs as n } from "react/jsx-runtime";
-import { HighlightedTitle as c } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { Typography as t } from "../../components/Typography/Typography.es.js";
-import { cn as s } from "../../utils/cn/cn.es.js";
+import { jsx as i, jsxs as r } from "react/jsx-runtime";
+import { HighlightedTitle as m } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as d } from "../../components/Typography/Typography.es.js";
+import { cn as c } from "../../utils/cn/cn.es.js";
 import a from "./imageWithText.module.css.es.js";
-const x = ({ image: o, text: e, title: l, view: r, colorScheme: m }) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": m, children: /* @__PURE__ */ n("div", { className: a.container, children: [
-  /* @__PURE__ */ i("div", { className: a.imageContainer, children: /* @__PURE__ */ i("img", { src: o, alt: "background image", className: a.image }) }),
-  /* @__PURE__ */ n(
+const b = ({ image: t, text: n, title: l, view: e, colorScheme: o }) => /* @__PURE__ */ i("section", { className: a.root, "data-scheme": o, children: /* @__PURE__ */ r("div", { className: a.container, "data-view": e, children: [
+  /* @__PURE__ */ i("div", { className: a.imageContainer, children: /* @__PURE__ */ i("img", { src: t, alt: "background image", className: a.image }) }),
+  /* @__PURE__ */ r(
     "div",
     {
-      className: s(a.content, {
-        [a.textAlignLeft]: r === "plain",
-        [a.textAlignRight]: r === "complex"
+      className: c(a.content, {
+        [a.textAlignLeft]: e === "plain" || e === "plain_with_title",
+        [a.textAlignRight]: e === "complex"
       }),
+      "data-view": e,
       children: [
-        r === "complex" && /* @__PURE__ */ n("div", { className: a.richTextContainer, children: [
+        e === "complex" && /* @__PURE__ */ r("div", { className: a.richTextContainer, children: [
           l && /* @__PURE__ */ i(
-            c,
+            m,
             {
               colorScheme: "dark",
               title: l,
@@ -23,13 +24,17 @@ const x = ({ image: o, text: e, title: l, view: r, colorScheme: m }) => /* @__PU
               mobileVariant: "headingLg"
             }
           ),
-          e && /* @__PURE__ */ i(t, { defaultVariant: "bodyMd", mobileVariant: "bodySm", children: e })
+          n && /* @__PURE__ */ i(d, { defaultVariant: "bodyMd", mobileVariant: "bodySm", children: n })
         ] }),
-        r === "plain" && e && /* @__PURE__ */ i("div", { className: a.textContainer, children: /* @__PURE__ */ i(t, { defaultVariant: "displayXs", mobileVariant: "headingXs", children: e }) })
+        e === "plain" && n && /* @__PURE__ */ i("div", { className: a.textContainer, children: /* @__PURE__ */ i(d, { defaultVariant: "displayXs", mobileVariant: "headingXs", children: n }) }),
+        e === "plain_with_title" && /* @__PURE__ */ r("div", { className: a.plainWithTitleContainer, children: [
+          l && /* @__PURE__ */ i(d, { defaultVariant: "displayMd", mobileVariant: "headingLg", children: l }),
+          n && /* @__PURE__ */ i(d, { defaultVariant: "bodyMd", mobileVariant: "bodyMd", children: n })
+        ] })
       ]
     }
   )
 ] }) });
 export {
-  x as ImageWithText
+  b as ImageWithText
 };

package/dist/modules/ImageWithText/imageWithText.module.css.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="imageWithText-module__root___Uq9G7",e="imageWithText-module__container___aRFfK",i="imageWithText-module__content___IKyX1",n="imageWithText-module__textAlignLeft___nxRQf",o="imageWithText-module__textAlignRight___ldGBP",_="imageWithText-module__textContainer___m5Jfs",a="imageWithText-module__richTextContainer___ochKF",g="imageWithText-module__imageContainer___bcAmi",m="imageWithText-module__image___paWe4",r={root:t,container:e,content:i,textAlignLeft:n,textAlignRight:o,textContainer:_,richTextContainer:a,imageContainer:g,image:m};exports.container=e;exports.content=i;exports.default=r;exports.image=m;exports.imageContainer=g;exports.richTextContainer=a;exports.root=t;exports.textAlignLeft=n;exports.textAlignRight=o;exports.textContainer=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="imageWithText-module__root___Uq9G7",e="imageWithText-module__container___aRFfK",i="imageWithText-module__content___IKyX1",n="imageWithText-module__textAlignLeft___nxRQf",o="imageWithText-module__textAlignRight___ldGBP",_="imageWithText-module__textContainer___m5Jfs",a="imageWithText-module__richTextContainer___ochKF",l="imageWithText-module__plainWithTitleContainer___VPVtI",r="imageWithText-module__imageContainer___bcAmi",g="imageWithText-module__image___paWe4",m={root:t,container:e,content:i,textAlignLeft:n,textAlignRight:o,textContainer:_,richTextContainer:a,plainWithTitleContainer:l,imageContainer:r,image:g};exports.container=e;exports.content=i;exports.default=m;exports.image=g;exports.imageContainer=r;exports.plainWithTitleContainer=l;exports.richTextContainer=a;exports.root=t;exports.textAlignLeft=n;exports.textAlignRight=o;exports.textContainer=_;

package/dist/modules/ImageWithText/imageWithText.module.css.es.js

@@ -1,4 +1,4 @@
-const t = "imageWithText-module__root___Uq9G7", e = "imageWithText-module__container___aRFfK", i = "imageWithText-module__content___IKyX1", n = "imageWithText-module__textAlignLeft___nxRQf", _ = "imageWithText-module__textAlignRight___ldGBP", o = "imageWithText-module__textContainer___m5Jfs", a = "imageWithText-module__richTextContainer___ochKF", m = "imageWithText-module__imageContainer___bcAmi", g = "imageWithText-module__image___paWe4", x = {
+const t = "imageWithText-module__root___Uq9G7", e = "imageWithText-module__container___aRFfK", i = "imageWithText-module__content___IKyX1", n = "imageWithText-module__textAlignLeft___nxRQf", _ = "imageWithText-module__textAlignRight___ldGBP", o = "imageWithText-module__textContainer___m5Jfs", a = "imageWithText-module__richTextContainer___ochKF", m = "imageWithText-module__plainWithTitleContainer___VPVtI", g = "imageWithText-module__imageContainer___bcAmi", l = "imageWithText-module__image___paWe4", x = {
   root: t,
   container: e,
   content: i,
@@ -6,15 +6,17 @@ const t = "imageWithText-module__root___Uq9G7", e = "imageWithText-module__conta
   textAlignRight: _,
   textContainer: o,
   richTextContainer: a,
-  imageContainer: m,
-  image: g
+  plainWithTitleContainer: m,
+  imageContainer: g,
+  image: l
 };
 export {
   e as container,
   i as content,
   x as default,
-  g as image,
-  m as imageContainer,
+  l as image,
+  g as imageContainer,
+  m as plainWithTitleContainer,
   a as richTextContainer,
   t as root,
   n as textAlignLeft,

package/dist/modules/ImageWithText/types.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
 import { TColorScheme } from '../../types/common';
 
+export type TImageWithTextView = 'plain' | 'complex' | 'plain_with_title';
 export type TImageWithTextProps = {
     image: string;
     title?: ReactNode;
     text?: ReactNode;
-    view: 'plain' | 'complex';
+    view: TImageWithTextView;
     colorScheme: TColorScheme;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.1.54",
+    "version": "0.1.56",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",