@zenpatient-org/healthspan-marketing-ui 0.1.140 → 0.1.142
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/healthspan-marketing-ui.css +1 -1
- package/dist/modules/CallToAction/CallToAction.cjs.js +1 -1
- package/dist/modules/CallToAction/CallToAction.es.js +1 -1
- package/dist/modules/ExpandingDetails/ExpandingDetails.cjs.js +1 -1
- package/dist/modules/ExpandingDetails/ExpandingDetails.es.js +184 -111
- package/dist/modules/ScienceHero/ScienceHeroCursor.cjs.js +1 -1
- package/dist/modules/ScienceHero/ScienceHeroCursor.d.ts +2 -3
- package/dist/modules/ScienceHero/ScienceHeroCursor.es.js +6 -82
- package/dist/modules/ScienceHero/components/ScienceClientCursor.cjs.js +1 -0
- package/dist/modules/ScienceHero/components/ScienceClientCursor.d.ts +9 -0
- package/dist/modules/ScienceHero/components/ScienceClientCursor.es.js +84 -0
- package/dist/modules/ScienceHero/components/ScienceServerCursor.cjs.js +1 -0
- package/dist/modules/ScienceHero/components/ScienceServerCursor.d.ts +5 -0
- package/dist/modules/ScienceHero/components/ScienceServerCursor.es.js +4 -0
- package/dist/pageComponents/HomepageHero/HomepageHero.cjs.js +1 -1
- package/dist/pageComponents/HomepageHero/HomepageHero.es.js +13 -13
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),G=require("../../components/Button/Button.cjs.js"),p=require("../../components/Typography/Typography.cjs.js"),A=require("../../components/Icon/Icon.cjs.js"),C=require("../../components/Icon/constants.cjs.js"),R=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),a=require("../../node_modules/gsap/index.cjs.js"),K=require("../../node_modules/@gsap/react/src/index.cjs.js"),M=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),J=require("../../utils/debounce.cjs.js"),t=require("./callToAction.module.css.cjs.js");a.gsap.registerPlugin(M.ScrollTrigger);const Q=({subtitle:k,titleTop:P,scrollableLabels:v,titleBottom:B,description:W,hsaText:$,buttonText:O,buttonLink:g,backgroundImage:X})=>{const o=l.useRef(null),i=l.useRef(null),T=l.useRef(null),h=l.useRef(null),m=l.useRef(null),N=l.useRef(null),y=l.useRef(null),b=l.useRef(null),x=l.useRef(null);return K.useGSAP(()=>{var S,V,w;const u=o.current&&o.current.getBoundingClientRect().top<window.innerHeight*.8,d=(S=T.current)==null?void 0:S.querySelector("p"),q=(V=N.current)==null?void 0:V.querySelector("p"),z=[d,h.current,i.current,m.current,q,y.current,b.current,x.current].filter(Boolean);a.gsap.set(z,{clipPath:"inset(0% 0% 100% 0%)",yPercent:100});const f=a.gsap.to([d,h.current,i.current,m.current,q,y.current,b.current,x.current],{clipPath:"inset(0% 0% 0% 0%)",yPercent:0,duration:1,ease:"power2.out",delay
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),G=require("../../components/Button/Button.cjs.js"),p=require("../../components/Typography/Typography.cjs.js"),A=require("../../components/Icon/Icon.cjs.js"),C=require("../../components/Icon/constants.cjs.js"),R=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),a=require("../../node_modules/gsap/index.cjs.js"),K=require("../../node_modules/@gsap/react/src/index.cjs.js"),M=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),J=require("../../utils/debounce.cjs.js"),t=require("./callToAction.module.css.cjs.js");a.gsap.registerPlugin(M.ScrollTrigger);const Q=({subtitle:k,titleTop:P,scrollableLabels:v,titleBottom:B,description:W,hsaText:$,buttonText:O,buttonLink:g,backgroundImage:X})=>{const o=l.useRef(null),i=l.useRef(null),T=l.useRef(null),h=l.useRef(null),m=l.useRef(null),N=l.useRef(null),y=l.useRef(null),b=l.useRef(null),x=l.useRef(null);return K.useGSAP(()=>{var S,V,w;const u=o.current&&o.current.getBoundingClientRect().top<window.innerHeight*.8,d=(S=T.current)==null?void 0:S.querySelector("p"),q=(V=N.current)==null?void 0:V.querySelector("p"),z=[d,h.current,i.current,m.current,q,y.current,b.current,x.current].filter(Boolean);a.gsap.set(z,{clipPath:"inset(0% 0% 100% 0%)",yPercent:100});const f=a.gsap.to([d,h.current,i.current,m.current,q,y.current,b.current,x.current],{clipPath:"inset(0% 0% 0% 0%)",yPercent:0,duration:1,ease:"power2.out",delay:.3,stagger:{amount:1,from:"start"},paused:!0});M.ScrollTrigger.create({trigger:o.current,start:"top 80%",end:"+=500",onEnter:()=>f.play(),onEnterBack:()=>f.play(),onLeaveBack:()=>f.reverse()}),u&&a.gsap.delayedCall(.1,()=>{f.play()});const r=(w=i.current)==null?void 0:w.querySelector("ul");if(!r)return;const _=r.innerHTML;let n=null,H=!0;const L=()=>{n&&n.kill(),r.innerHTML=_,a.gsap.set(r,{y:0});const s=Array.from(r.querySelectorAll("li"));if(s.length<=1)return;const j=s[0].clientHeight;if(!j)return;a.gsap.set(i.current,{height:j,overflow:"hidden"});const I=Array.from(s);I.forEach(E=>{r.appendChild(E.cloneNode(!0))});const F=H&&!u?2.5:0;n=a.gsap.timeline({repeat:-1,delay:F,onRepeat:()=>{a.gsap.set(r,{y:0})}}),I.forEach((E,D)=>{n&&n.to({},{duration:2}).to(r,{y:`-${(D+1)*j}`,duration:.5,ease:"power1.inOut"})}),H=!1},c=J.default(L,200);return L(),window.addEventListener("resize",c),()=>{var s;window.removeEventListener("resize",c),(s=c.kill)==null||s.call(c),n&&n.kill(),r&&(r.innerHTML=_,a.gsap.set(r,{y:0}))}},[v]),e.jsxs("section",{ref:o,className:t.default.root,children:[e.jsx("div",{className:t.default.backgroundImage,style:{backgroundImage:`url(${X})`}}),e.jsxs("div",{className:t.default.container,children:[e.jsx("div",{className:t.default.leftContent,children:e.jsxs("div",{className:t.default.content,children:[e.jsx("div",{ref:h,children:e.jsx(R.HighlightedTitle,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"div",className:t.default.title,title:P})}),e.jsx("div",{ref:i,className:t.default.scrollableLabelsWrapper,children:e.jsx("ul",{className:t.default.scrollableLabels,children:v.map((u,d)=>e.jsx("li",{className:t.default.scrollableLabel,children:e.jsx(p.Typography,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"span",children:u})},d))})}),e.jsx("div",{ref:m,children:e.jsx(R.HighlightedTitle,{defaultVariant:"displayXl",mobileVariant:"displayMd",as:"div",className:t.default.title,title:B})})]})}),e.jsx("div",{ref:T,className:t.default.subtitleWrapper,children:e.jsx(R.HighlightedTitle,{defaultVariant:"labelMd",mobileVariant:"labelSm",as:"div",className:t.default.subtitle,title:k})}),e.jsx("div",{ref:N,className:t.default.arrowWrapper,children:e.jsxs(p.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:t.default.arrow,as:"p",children:["(",e.jsx(A.Icon,{name:C.EIconName.ARROW_FORWARD}),")"]})}),e.jsx("div",{className:t.default.rightContent,children:e.jsxs("div",{className:t.default.descriptionWrapper,children:[e.jsx("div",{ref:y,children:e.jsx(p.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodyMd",className:t.default.description,children:W})}),e.jsx("div",{ref:b,className:t.default.buttonWrapper,children:g&&e.jsx(G.Button,{as:g?"a":"button",href:g,variant:"secondary",size:"lg",children:O})}),e.jsxs("div",{ref:x,className:t.default.hsaEligible,children:[e.jsx(A.Icon,{name:C.EIconName.CIRCLE_CHECK_FILL,className:t.default.checkIcon}),e.jsx(p.Typography,{as:"p",defaultVariant:"bodySm",mobileVariant:"bodySm",className:t.default.hsaText,children:$})]})]})})]})]})};exports.CallToAction=Q;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),R=require("../../node_modules/@gsap/react/src/index.cjs.js"),i=require("../../node_modules/gsap/index.cjs.js"),y=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),W=require("react"),z=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),B=require("../../utils/debounce.cjs.js"),t=require("./expandingDetails.module.css.cjs.js");i.gsap.registerPlugin(y.ScrollTrigger);const L=({colorScheme:f,label:p,title:w,sections:$})=>{const s=W.useRef(null);return R.useGSAP(()=>{if(!s.current)return;const d=()=>{var x;i.gsap.killTweensOf("*"),y.ScrollTrigger.getAll().forEach(e=>e.kill());const o=i.gsap.utils.toArray('[data-scroll-id="section"]'),r=(x=s.current)==null?void 0:x.querySelector('[data-scroll-id="sections"]');if(!r)return;const A=i.gsap.matchMedia(),h=i.gsap.timeline({scrollTrigger:{trigger:s.current,start:"top top",end:()=>`+=${o.length*500}`,scrub:1,markers:!1,pin:!0}}),m=r==null?void 0:r.querySelector('[data-scroll-id="heading"]');if(!m)return;const S=1366;o.forEach((e,q)=>{A.add({isMobile:`(max-width: ${S}px)`,isDesktop:`(min-width: ${S+1}px)`},D=>{var b,P,j,T,v,E,H,N,k,V;const c=e==null?void 0:e.querySelector('[data-scroll-id="heading"]'),a=e==null?void 0:e.querySelector('[data-scroll-id="content"]');if(!c||!a)return;const g=D.conditions,M=g==null?void 0:g.isMobile,_=g==null?void 0:g.isDesktop;i.gsap.set(r==null?void 0:r.querySelectorAll('[data-scroll-id="section"]'),{height:m.offsetHeight||0}),i.gsap.set(r==null?void 0:r.querySelectorAll('[data-scroll-id="protocol"]'),{scale:.5,yPercent:0}),i.gsap.set(r==null?void 0:r.querySelectorAll('[data-scroll-id="image-circle"]'),{scale:.5,yPercent:5}),_&&(h.to(e,{height:c.offsetHeight+a.offsetHeight}).to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:2,yPercent:50},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:2,yPercent:50},"<").to(a,{height:a.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},"<"),q<o.length-1&&h.to(e,{height:c.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:c.offsetHeight+a.offsetHeight},"<").to(((b=e.nextElementSibling)==null?void 0:b.querySelector('[data-scroll-id="section-title"]'))||null,{scale:2,yPercent:100},"<").to(((P=e.nextElementSibling)==null?void 0:P.querySelector('[data-scroll-id="section-index"]'))||null,{scale:2,yPercent:100},"<").to(((j=e.nextElementSibling)==null?void 0:j.querySelector('[data-scroll-id="content"]'))||null,{height:a.offsetHeight,yPercent:0},"<").to(((T=e.nextElementSibling)==null?void 0:T.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(a,{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},"<")),M&&(h.to(e,{height:c.offsetHeight+a.offsetHeight}).to(a,{height:a.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},"<"),q<o.length-1&&h.to(e,{height:c.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:c.offsetHeight+a.offsetHeight},"<").to(((E=e.nextElementSibling)==null?void 0:E.querySelector('[data-scroll-id="section-title"]'))||null,{scale:1,yPercent:100},"<").to(((H=e.nextElementSibling)==null?void 0:H.querySelector('[data-scroll-id="section-index"]'))||null,{scale:1,yPercent:100},"<").to(((N=e.nextElementSibling)==null?void 0:N.querySelector('[data-scroll-id="content"]'))||null,{height:a.offsetHeight,yPercent:0},"<").to(((k=e.nextElementSibling)==null?void 0:k.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(a,{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},"<"))})})};d();const u=B.default(()=>{d()},200);return window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u),y.ScrollTrigger.getAll().forEach(o=>o.kill()),i.gsap.killTweensOf("*")}},{scope:s,dependencies:[s]}),l.jsx("div",{ref:s,className:`${t.default.root} ${t.default[f]}`,children:l.jsxs("div",{className:t.default.expandingDetailsWrapper,children:[l.jsxs("header",{"data-scroll-id":"header",className:t.default.header,children:[p&&l.jsx(n.Typography,{as:"div",defaultVariant:"labelSm",emphasis:!0,className:t.default.label,children:p}),l.jsx(z.HighlightedTitle,{as:"div",defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:f,className:t.default.title,title:w})]}),l.jsx("div",{"data-scroll-id":"sections",className:t.default.sections,children:$.map((d,u)=>l.jsxs("div",{id:`section-${u+1}`,"data-scroll-id":"section",className:t.default.section,children:[l.jsxs("div",{"data-scroll-id":"heading",className:t.default.heading,children:[l.jsx("div",{"data-scroll-id":"section-title",className:t.default.sectionTitleWrapper,children:l.jsx(n.Typography,{as:"h3",defaultVariant:"headingSm",className:t.default.sectionTitle,children:d.title})}),l.jsx("div",{"data-scroll-id":"section-index",className:t.default.sectionIndexWrapper,children:l.jsxs(n.Typography,{as:"p",defaultVariant:"headingSm",className:t.default.sectionIndex,children:["(",String(u+1).padStart(2,"0"),")"]})})]}),l.jsxs("div",{"data-scroll-id":"content",className:t.default.content,children:[l.jsxs("div",{"data-scroll-id":"protocol",className:t.default.protocolWrapper,children:[d.subtitle&&l.jsx(n.Typography,{as:"h4",defaultVariant:"headingLg",mobileVariant:"headingXs",children:d.subtitle}),l.jsx(n.Typography,{className:t.default.description,as:"div",defaultVariant:"bodyMd",mobileVariant:"bodyXs",children:d.description})]}),l.jsx("div",{"data-scroll-id":"image-circle",className:t.default.imageCircle,children:l.jsx("img",{src:d.image,alt:d.title})})]}),l.jsx("div",{className:t.default.leftBorder}),l.jsx("div",{className:t.default.rightBorder})]},d.title))})]})})};exports.ExpandingDetails=L;
|
|
@@ -1,161 +1,234 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { useGSAP as
|
|
2
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
3
|
+
import { useGSAP as L } from "../../node_modules/@gsap/react/src/index.es.js";
|
|
4
4
|
import { gsap as i } from "../../node_modules/gsap/index.es.js";
|
|
5
|
-
import { ScrollTrigger as
|
|
6
|
-
import { useRef as
|
|
7
|
-
import { HighlightedTitle as
|
|
8
|
-
import { Typography as
|
|
9
|
-
import
|
|
5
|
+
import { ScrollTrigger as y } from "../../node_modules/gsap/ScrollTrigger.es.js";
|
|
6
|
+
import { useRef as R } from "react";
|
|
7
|
+
import { HighlightedTitle as X } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
|
|
8
|
+
import { Typography as m } from "../../components/Typography/Typography.es.js";
|
|
9
|
+
import j from "../../utils/debounce.es.js";
|
|
10
10
|
import l from "./expandingDetails.module.css.es.js";
|
|
11
|
-
i.registerPlugin(
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
return
|
|
11
|
+
i.registerPlugin(y);
|
|
12
|
+
const Z = ({ colorScheme: f, label: p, title: M, sections: $ }) => {
|
|
13
|
+
const s = R(null);
|
|
14
|
+
return L(
|
|
15
15
|
() => {
|
|
16
|
-
if (!
|
|
17
|
-
const
|
|
18
|
-
var
|
|
19
|
-
i.killTweensOf("*"),
|
|
20
|
-
const
|
|
16
|
+
if (!s.current) return;
|
|
17
|
+
const d = () => {
|
|
18
|
+
var b;
|
|
19
|
+
i.killTweensOf("*"), y.getAll().forEach((e) => e.kill());
|
|
20
|
+
const h = i.utils.toArray('[data-scroll-id="section"]'), r = (b = s.current) == null ? void 0 : b.querySelector('[data-scroll-id="sections"]');
|
|
21
21
|
if (!r) return;
|
|
22
|
-
const
|
|
22
|
+
const D = i.matchMedia(), u = i.timeline({
|
|
23
23
|
scrollTrigger: {
|
|
24
|
-
trigger:
|
|
24
|
+
trigger: s.current,
|
|
25
25
|
start: "top top",
|
|
26
|
-
end: () => `+=${
|
|
26
|
+
end: () => `+=${h.length * 500}`,
|
|
27
27
|
scrub: 1,
|
|
28
28
|
markers: !1,
|
|
29
29
|
pin: !0
|
|
30
30
|
}
|
|
31
|
-
}),
|
|
32
|
-
if (!
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
31
|
+
}), S = r == null ? void 0 : r.querySelector('[data-scroll-id="heading"]');
|
|
32
|
+
if (!S) return;
|
|
33
|
+
const q = 1366;
|
|
34
|
+
h.forEach((e, x) => {
|
|
35
|
+
D.add(
|
|
36
|
+
{
|
|
37
|
+
isMobile: `(max-width: ${q}px)`,
|
|
38
|
+
isDesktop: `(min-width: ${q + 1}px)`
|
|
39
|
+
},
|
|
40
|
+
(W) => {
|
|
41
|
+
var P, v, E, N, H, k, T, V, w, A;
|
|
42
|
+
const c = e == null ? void 0 : e.querySelector('[data-scroll-id="heading"]'), t = e == null ? void 0 : e.querySelector('[data-scroll-id="content"]');
|
|
43
|
+
if (!c || !t) return;
|
|
44
|
+
const g = W.conditions, z = g == null ? void 0 : g.isMobile, B = g == null ? void 0 : g.isDesktop;
|
|
45
|
+
i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="section"]'), {
|
|
46
|
+
height: S.offsetHeight || 0
|
|
47
|
+
}), i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="protocol"]'), {
|
|
48
|
+
scale: 0.5,
|
|
49
|
+
yPercent: 0
|
|
50
|
+
}), i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="image-circle"]'), {
|
|
51
|
+
scale: 0.5,
|
|
52
|
+
yPercent: 5
|
|
53
|
+
}), B && (u.to(e, { height: c.offsetHeight + t.offsetHeight }).to(
|
|
54
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
|
|
55
|
+
{ scale: 2, yPercent: 50 },
|
|
56
|
+
"<"
|
|
57
|
+
).to(
|
|
58
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
|
|
59
|
+
{ scale: 2, yPercent: 50 },
|
|
60
|
+
"<"
|
|
61
|
+
).to(t, { height: t.offsetHeight }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<").to(
|
|
62
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
|
|
63
|
+
{ scale: 1, yPercent: 5 },
|
|
64
|
+
"<"
|
|
65
|
+
), x < h.length - 1 && u.to(e, { height: c.offsetHeight, delay: 0.5 }).to(
|
|
66
|
+
e.nextElementSibling,
|
|
67
|
+
{ height: c.offsetHeight + t.offsetHeight },
|
|
68
|
+
"<"
|
|
69
|
+
).to(
|
|
70
|
+
((P = e.nextElementSibling) == null ? void 0 : P.querySelector(
|
|
71
|
+
'[data-scroll-id="section-title"]'
|
|
72
|
+
)) || null,
|
|
73
|
+
{ scale: 2, yPercent: 100 },
|
|
74
|
+
"<"
|
|
75
|
+
).to(
|
|
76
|
+
((v = e.nextElementSibling) == null ? void 0 : v.querySelector(
|
|
77
|
+
'[data-scroll-id="section-index"]'
|
|
78
|
+
)) || null,
|
|
79
|
+
{ scale: 2, yPercent: 100 },
|
|
80
|
+
"<"
|
|
81
|
+
).to(
|
|
82
|
+
((E = e.nextElementSibling) == null ? void 0 : E.querySelector('[data-scroll-id="content"]')) || null,
|
|
83
|
+
{ height: t.offsetHeight, yPercent: 0 },
|
|
84
|
+
"<"
|
|
85
|
+
).to(
|
|
86
|
+
((N = e.nextElementSibling) == null ? void 0 : N.querySelector('[data-scroll-id="protocol"]')) || null,
|
|
87
|
+
{ scale: 1 },
|
|
88
|
+
"<"
|
|
89
|
+
).to(
|
|
90
|
+
((H = e.nextElementSibling) == null ? void 0 : H.querySelector(
|
|
91
|
+
'[data-scroll-id="image-circle"]'
|
|
92
|
+
)) || null,
|
|
93
|
+
{ scale: 1, yPercent: 5 },
|
|
94
|
+
"<"
|
|
95
|
+
).to(
|
|
96
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
|
|
97
|
+
{ scale: 1, yPercent: -15 },
|
|
98
|
+
"<"
|
|
99
|
+
).to(
|
|
100
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
|
|
101
|
+
{ scale: 1, yPercent: -15 },
|
|
102
|
+
"<"
|
|
103
|
+
).to(t, { height: 0, yPercent: 0 }, "<").to(
|
|
104
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'),
|
|
105
|
+
{ scale: 0, yPercent: 200 },
|
|
106
|
+
"<"
|
|
107
|
+
).to(
|
|
108
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
|
|
109
|
+
{ scale: 0, yPercent: 200 },
|
|
110
|
+
"<"
|
|
111
|
+
)), z && (u.to(e, { height: c.offsetHeight + t.offsetHeight }).to(t, { height: t.offsetHeight }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<").to(
|
|
112
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
|
|
113
|
+
{ scale: 1, yPercent: 5 },
|
|
114
|
+
"<"
|
|
115
|
+
), x < h.length - 1 && u.to(e, { height: c.offsetHeight, delay: 0.5 }).to(
|
|
116
|
+
e.nextElementSibling,
|
|
117
|
+
{ height: c.offsetHeight + t.offsetHeight },
|
|
118
|
+
"<"
|
|
119
|
+
).to(
|
|
120
|
+
((k = e.nextElementSibling) == null ? void 0 : k.querySelector(
|
|
121
|
+
'[data-scroll-id="section-title"]'
|
|
122
|
+
)) || null,
|
|
123
|
+
{ scale: 1, yPercent: 100 },
|
|
124
|
+
"<"
|
|
125
|
+
).to(
|
|
126
|
+
((T = e.nextElementSibling) == null ? void 0 : T.querySelector(
|
|
127
|
+
'[data-scroll-id="section-index"]'
|
|
128
|
+
)) || null,
|
|
129
|
+
{ scale: 1, yPercent: 100 },
|
|
130
|
+
"<"
|
|
131
|
+
).to(
|
|
132
|
+
((V = e.nextElementSibling) == null ? void 0 : V.querySelector('[data-scroll-id="content"]')) || null,
|
|
133
|
+
{ height: t.offsetHeight, yPercent: 0 },
|
|
134
|
+
"<"
|
|
135
|
+
).to(
|
|
136
|
+
((w = e.nextElementSibling) == null ? void 0 : w.querySelector('[data-scroll-id="protocol"]')) || null,
|
|
137
|
+
{ scale: 1 },
|
|
138
|
+
"<"
|
|
139
|
+
).to(
|
|
140
|
+
((A = e.nextElementSibling) == null ? void 0 : A.querySelector(
|
|
141
|
+
'[data-scroll-id="image-circle"]'
|
|
142
|
+
)) || null,
|
|
143
|
+
{ scale: 1, yPercent: 5 },
|
|
144
|
+
"<"
|
|
145
|
+
).to(
|
|
146
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
|
|
147
|
+
{ scale: 1, yPercent: -15 },
|
|
148
|
+
"<"
|
|
149
|
+
).to(
|
|
150
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
|
|
151
|
+
{ scale: 1, yPercent: -15 },
|
|
152
|
+
"<"
|
|
153
|
+
).to(t, { height: 0, yPercent: 0 }, "<").to(
|
|
154
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'),
|
|
155
|
+
{ scale: 0, yPercent: 200 },
|
|
156
|
+
"<"
|
|
157
|
+
).to(
|
|
158
|
+
e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
|
|
159
|
+
{ scale: 0, yPercent: 200 },
|
|
160
|
+
"<"
|
|
161
|
+
));
|
|
162
|
+
}
|
|
163
|
+
);
|
|
91
164
|
});
|
|
92
165
|
};
|
|
93
|
-
|
|
94
|
-
const
|
|
95
|
-
|
|
166
|
+
d();
|
|
167
|
+
const n = j(() => {
|
|
168
|
+
d();
|
|
96
169
|
}, 200);
|
|
97
|
-
return window.addEventListener("resize",
|
|
98
|
-
window.removeEventListener("resize",
|
|
170
|
+
return window.addEventListener("resize", n), () => {
|
|
171
|
+
window.removeEventListener("resize", n), y.getAll().forEach((h) => h.kill()), i.killTweensOf("*");
|
|
99
172
|
};
|
|
100
173
|
},
|
|
101
174
|
{
|
|
102
|
-
scope:
|
|
103
|
-
dependencies: [
|
|
175
|
+
scope: s,
|
|
176
|
+
dependencies: [s]
|
|
104
177
|
}
|
|
105
|
-
), /* @__PURE__ */
|
|
106
|
-
/* @__PURE__ */
|
|
107
|
-
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
|
|
178
|
+
), /* @__PURE__ */ a("div", { ref: s, className: `${l.root} ${l[f]}`, children: /* @__PURE__ */ o("div", { className: l.expandingDetailsWrapper, children: [
|
|
179
|
+
/* @__PURE__ */ o("header", { "data-scroll-id": "header", className: l.header, children: [
|
|
180
|
+
p && /* @__PURE__ */ a(m, { as: "div", defaultVariant: "labelSm", emphasis: !0, className: l.label, children: p }),
|
|
181
|
+
/* @__PURE__ */ a(
|
|
182
|
+
X,
|
|
110
183
|
{
|
|
111
184
|
as: "div",
|
|
112
185
|
defaultVariant: "displayMd",
|
|
113
186
|
mobileVariant: "headingXl",
|
|
114
|
-
colorScheme:
|
|
187
|
+
colorScheme: f,
|
|
115
188
|
className: l.title,
|
|
116
|
-
title:
|
|
189
|
+
title: M
|
|
117
190
|
}
|
|
118
191
|
)
|
|
119
192
|
] }),
|
|
120
|
-
/* @__PURE__ */
|
|
193
|
+
/* @__PURE__ */ a("div", { "data-scroll-id": "sections", className: l.sections, children: $.map((d, n) => /* @__PURE__ */ o(
|
|
121
194
|
"div",
|
|
122
195
|
{
|
|
123
|
-
id: `section-${
|
|
196
|
+
id: `section-${n + 1}`,
|
|
124
197
|
"data-scroll-id": "section",
|
|
125
198
|
className: l.section,
|
|
126
199
|
children: [
|
|
127
|
-
/* @__PURE__ */
|
|
128
|
-
/* @__PURE__ */
|
|
129
|
-
/* @__PURE__ */
|
|
200
|
+
/* @__PURE__ */ o("div", { "data-scroll-id": "heading", className: l.heading, children: [
|
|
201
|
+
/* @__PURE__ */ a("div", { "data-scroll-id": "section-title", className: l.sectionTitleWrapper, children: /* @__PURE__ */ a(m, { as: "h3", defaultVariant: "headingSm", className: l.sectionTitle, children: d.title }) }),
|
|
202
|
+
/* @__PURE__ */ a("div", { "data-scroll-id": "section-index", className: l.sectionIndexWrapper, children: /* @__PURE__ */ o(m, { as: "p", defaultVariant: "headingSm", className: l.sectionIndex, children: [
|
|
130
203
|
"(",
|
|
131
|
-
String(
|
|
204
|
+
String(n + 1).padStart(2, "0"),
|
|
132
205
|
")"
|
|
133
206
|
] }) })
|
|
134
207
|
] }),
|
|
135
|
-
/* @__PURE__ */
|
|
136
|
-
/* @__PURE__ */
|
|
137
|
-
|
|
138
|
-
/* @__PURE__ */
|
|
139
|
-
|
|
208
|
+
/* @__PURE__ */ o("div", { "data-scroll-id": "content", className: l.content, children: [
|
|
209
|
+
/* @__PURE__ */ o("div", { "data-scroll-id": "protocol", className: l.protocolWrapper, children: [
|
|
210
|
+
d.subtitle && /* @__PURE__ */ a(m, { as: "h4", defaultVariant: "headingLg", mobileVariant: "headingXs", children: d.subtitle }),
|
|
211
|
+
/* @__PURE__ */ a(
|
|
212
|
+
m,
|
|
140
213
|
{
|
|
141
214
|
className: l.description,
|
|
142
215
|
as: "div",
|
|
143
216
|
defaultVariant: "bodyMd",
|
|
144
|
-
mobileVariant: "
|
|
145
|
-
children:
|
|
217
|
+
mobileVariant: "bodyXs",
|
|
218
|
+
children: d.description
|
|
146
219
|
}
|
|
147
220
|
)
|
|
148
221
|
] }),
|
|
149
|
-
/* @__PURE__ */
|
|
222
|
+
/* @__PURE__ */ a("div", { "data-scroll-id": "image-circle", className: l.imageCircle, children: /* @__PURE__ */ a("img", { src: d.image, alt: d.title }) })
|
|
150
223
|
] }),
|
|
151
|
-
/* @__PURE__ */
|
|
152
|
-
/* @__PURE__ */
|
|
224
|
+
/* @__PURE__ */ a("div", { className: l.leftBorder }),
|
|
225
|
+
/* @__PURE__ */ a("div", { className: l.rightBorder })
|
|
153
226
|
]
|
|
154
227
|
},
|
|
155
|
-
|
|
228
|
+
d.title
|
|
156
229
|
)) })
|
|
157
230
|
] }) });
|
|
158
231
|
};
|
|
159
232
|
export {
|
|
160
|
-
|
|
233
|
+
Z as ExpandingDetails
|
|
161
234
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("./components/ScienceClientCursor.cjs.js"),c=require("./components/ScienceServerCursor.cjs.js");function u({children:e,backgroundImage:n,cursorLink:i}){return typeof window>"u"?r.jsx(c.ScienceServerCursor,{children:e}):r.jsx(o.ScienceClientCursor,{backgroundImage:n,cursorLink:i,children:e})}exports.ScienceHeroCursor=u;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
|
|
3
|
-
type ScienceHeroCursorProps = {
|
|
3
|
+
export type ScienceHeroCursorProps = {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
backgroundImage: string;
|
|
6
6
|
cursorLink: string;
|
|
7
7
|
};
|
|
8
|
-
export declare function ScienceHeroCursor({ children, backgroundImage, cursorLink }: ScienceHeroCursorProps):
|
|
9
|
-
export {};
|
|
8
|
+
export declare function ScienceHeroCursor({ children, backgroundImage, cursorLink }: ScienceHeroCursorProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,85 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
function z({ children: s, backgroundImage: h, cursorLink: v }) {
|
|
7
|
-
const [i, x] = o({ x: 0, y: 0 }), [M, b] = o(0), [g, l] = o(!1), [y, c] = o(!1), [t, $] = o(null), [n, E] = o(!1);
|
|
8
|
-
w(() => {
|
|
9
|
-
c(!0);
|
|
10
|
-
const e = () => E(window.innerWidth <= 768);
|
|
11
|
-
return e(), window.addEventListener("resize", e), () => {
|
|
12
|
-
window.removeEventListener("resize", e), c(!1);
|
|
13
|
-
};
|
|
14
|
-
}, []), w(() => {
|
|
15
|
-
if (n) return;
|
|
16
|
-
const e = (f) => {
|
|
17
|
-
x({
|
|
18
|
-
x: f.clientX,
|
|
19
|
-
y: f.clientY
|
|
20
|
-
});
|
|
21
|
-
}, a = () => {
|
|
22
|
-
b(window.scrollY);
|
|
23
|
-
};
|
|
24
|
-
return window.addEventListener("mousemove", e), window.addEventListener("scroll", a), () => {
|
|
25
|
-
window.removeEventListener("mousemove", e), window.removeEventListener("scroll", a);
|
|
26
|
-
};
|
|
27
|
-
}, [n]);
|
|
28
|
-
const C = (e) => {
|
|
29
|
-
n || ($(e.currentTarget.getBoundingClientRect()), l(!0));
|
|
30
|
-
}, L = () => {
|
|
31
|
-
n || l(!1);
|
|
32
|
-
}, k = () => {
|
|
33
|
-
window.location.href = v;
|
|
34
|
-
};
|
|
35
|
-
if (typeof window > "u") return s;
|
|
36
|
-
if (n)
|
|
37
|
-
return /* @__PURE__ */ r(p, { children: s });
|
|
38
|
-
const d = `circle(270px at ${i.x}px ${i.y}px)`, u = g && t && /* @__PURE__ */ r(
|
|
39
|
-
"div",
|
|
40
|
-
{
|
|
41
|
-
className: m.cursorContainer,
|
|
42
|
-
style: {
|
|
43
|
-
position: "fixed",
|
|
44
|
-
top: `${t.top}px`,
|
|
45
|
-
left: `${t.left}px`,
|
|
46
|
-
width: `${t.width}px`,
|
|
47
|
-
height: `${t.height}px`,
|
|
48
|
-
overflow: "hidden",
|
|
49
|
-
cursor: "pointer"
|
|
50
|
-
},
|
|
51
|
-
children: /* @__PURE__ */ r(
|
|
52
|
-
"div",
|
|
53
|
-
{
|
|
54
|
-
className: m.normalBackground,
|
|
55
|
-
style: {
|
|
56
|
-
position: "absolute",
|
|
57
|
-
top: `${-t.top}px`,
|
|
58
|
-
left: `${-t.left}px`,
|
|
59
|
-
backgroundImage: `url(${h})`,
|
|
60
|
-
clipPath: d,
|
|
61
|
-
WebkitClipPath: d,
|
|
62
|
-
backgroundPosition: `center ${-M}px`
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
);
|
|
68
|
-
return /* @__PURE__ */ P(p, { children: [
|
|
69
|
-
/* @__PURE__ */ r(
|
|
70
|
-
"div",
|
|
71
|
-
{
|
|
72
|
-
"data-type": "hero",
|
|
73
|
-
onMouseEnter: C,
|
|
74
|
-
onMouseLeave: L,
|
|
75
|
-
onClick: k,
|
|
76
|
-
style: { cursor: "pointer" },
|
|
77
|
-
children: s
|
|
78
|
-
}
|
|
79
|
-
),
|
|
80
|
-
y && u && R(u, document.body)
|
|
81
|
-
] });
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { ScienceClientCursor as n } from "./components/ScienceClientCursor.es.js";
|
|
3
|
+
import { ScienceServerCursor as t } from "./components/ScienceServerCursor.es.js";
|
|
4
|
+
function m({ children: r, backgroundImage: o, cursorLink: i }) {
|
|
5
|
+
return typeof window > "u" ? /* @__PURE__ */ e(t, { children: r }) : /* @__PURE__ */ e(n, { backgroundImage: o, cursorLink: i, children: r });
|
|
82
6
|
}
|
|
83
7
|
export {
|
|
84
|
-
|
|
8
|
+
m as ScienceHeroCursor
|
|
85
9
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("react"),E=require("react-dom"),p=require("../scienceHero.module.css.cjs.js");function L({children:r,backgroundImage:w,cursorLink:h}){const[i,v]=t.useState({x:0,y:0}),[x,m]=t.useState(0),[$,c]=t.useState(!1),[g,l]=t.useState(!1),[o,b]=t.useState(null),[s,M]=t.useState(!1);t.useEffect(()=>{l(!0);const e=()=>M(window.innerWidth<=768);return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),l(!1)}},[]),t.useEffect(()=>{if(s)return;const e=f=>{v({x:f.clientX,y:f.clientY})},d=()=>{m(window.scrollY)};return window.addEventListener("mousemove",e),window.addEventListener("scroll",d),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("scroll",d)}},[s]);const S=e=>{s||(b(e.currentTarget.getBoundingClientRect()),c(!0))},C=()=>{s||c(!1)},y=()=>{window.location.href=h};if(s)return n.jsx(n.Fragment,{children:r});const u=`circle(270px at ${i.x}px ${i.y}px)`,a=$&&o&&n.jsx("div",{className:p.default.cursorContainer,style:{position:"fixed",top:`${o.top}px`,left:`${o.left}px`,width:`${o.width}px`,height:`${o.height}px`,overflow:"hidden",cursor:"pointer"},children:n.jsx("div",{className:p.default.normalBackground,style:{position:"absolute",top:`${-o.top}px`,left:`${-o.left}px`,backgroundImage:`url(${w})`,clipPath:u,WebkitClipPath:u,backgroundPosition:`center ${-x}px`}})});return n.jsxs(n.Fragment,{children:[n.jsx("div",{"data-type":"hero",onMouseEnter:S,onMouseLeave:C,onClick:y,style:{cursor:"pointer"},children:r}),g&&a&&E.createPortal(a,document.body)]})}exports.ScienceClientCursor=L;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
type ScienceClientCursorProps = {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
backgroundImage: string;
|
|
6
|
+
cursorLink: string;
|
|
7
|
+
};
|
|
8
|
+
export declare function ScienceClientCursor({ children, backgroundImage, cursorLink }: ScienceClientCursorProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|