@zenpatient-org/healthspan-marketing-ui 0.1.170 → 0.2.0

package/dist/modules/Reviews/reviews.module.css

@@ -0,0 +1,74 @@
+.root {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.container {
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: var(--spacing-120) var(--spacing-64);
+    display: flex;
+    gap: 80px;
+}
+
+.headerContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 336px;
+    min-width: 336px;
+    max-width: 100%;
+    flex-shrink: 0;
+}
+
+.headerRow {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    gap: 8px;
+}
+
+.reviewsContainer {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.pagination {
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    margin-top: 32px;
+}
+
+@media (width <= 1024px) {
+    .container {
+        padding: var(--spacing-120) var(--spacing-20);
+        flex-direction: column;
+        gap: 28px;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        padding: var(--spacing-64) var(--spacing-20);
+    }
+
+    .headerContainer {
+        gap: 24px;
+    }
+
+    .pagination {
+        justify-content: center;
+        margin-top: 28px;
+    }
+}

package/dist/modules/ScienceHero/ScienceHero.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../components/Typography/Typography.cjs.js"),u=require("./ScienceHeroCursor.cjs.js"),a=require("./scienceHero.module.css.cjs.js"),m=({firstLineTitle:n,optionalLineTitle:r,highlightedLineTitle:i,label:t,backgroundImage:l,badges:o,cursorLink:d})=>e.jsx(u.ScienceHeroCursor,{backgroundImage:l,cursorLink:d,children:e.jsxs("section",{className:a.default.root,"data-type":"hero",children:[e.jsx("div",{className:a.default.blurredBackground,style:{backgroundImage:`url(${l})`}}),e.jsxs("div",{className:a.default.container,children:[e.jsx("div",{className:a.default.leftColumn}),e.jsxs("div",{className:a.default.mainColumn,children:[e.jsx("div",{className:a.default.verticalBorder}),e.jsx("div",{className:a.default.circleVector}),e.jsx("a",{className:a.default.circleVectorMobile,href:d,style:{backgroundImage:`url(${l}`}}),e.jsxs("div",{className:a.default.content,children:[t&&e.jsx(s.Typography,{defaultVariant:"labelXs",emphasis:!0,className:a.default.label,children:t}),e.jsxs("div",{className:a.default.title,children:[e.jsx(s.Typography,{as:"h2",defaultVariant:"displayXl",mobileVariant:"displayXs",className:a.default.firstLineTitle,children:n}),r&&e.jsx(s.Typography,{defaultVariant:"displayXl",mobileVariant:"displayXs",className:a.default.optionalLineTitle,children:r}),i&&e.jsx(s.Typography,{defaultVariant:"displayXl",mobileVariant:"displayXs",className:a.default.highlightedLineTitle,children:i})]}),e.jsx("div",{className:a.default.badgesRow,children:o.map(c=>e.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:a.default.badge,children:c},c))})]}),e.jsx("div",{className:a.default.verticalBorder})]}),e.jsx("div",{className:a.default.rightColumn})]})]})});exports.ScienceHero=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("./ScienceHeroCursor.cjs.js"),s=require("../../src/modules/ScienceHero/scienceHero.module.css"),a=require("../../components/Typography/Typography.cjs.js"),p=({firstLineTitle:d,optionalLineTitle:r,highlightedLineTitle:i,label:c,backgroundImage:l,badges:o,cursorLink:t})=>e.jsx(m.ScienceHeroCursor,{backgroundImage:l,cursorLink:t,children:e.jsxs("section",{className:s.root,"data-type":"hero",children:[e.jsx("div",{className:s.blurredBackground,style:{backgroundImage:`url(${l})`}}),e.jsxs("div",{className:s.container,children:[e.jsx("div",{className:s.leftColumn}),e.jsxs("div",{className:s.mainColumn,children:[e.jsx("div",{className:s.verticalBorder}),e.jsx("div",{className:s.circleVector}),e.jsx("a",{className:s.circleVectorMobile,href:t,style:{backgroundImage:`url(${l}`}}),e.jsxs("div",{className:s.content,children:[c&&e.jsx(a.Typography,{defaultVariant:"labelXs",emphasis:!0,className:s.label,children:c}),e.jsxs("div",{className:s.title,children:[e.jsx(a.Typography,{as:"h2",defaultVariant:"displayXl",mobileVariant:"displayXs",className:s.firstLineTitle,children:d}),r&&e.jsx(a.Typography,{defaultVariant:"displayXl",mobileVariant:"displayXs",className:s.optionalLineTitle,children:r}),i&&e.jsx(a.Typography,{defaultVariant:"displayXl",mobileVariant:"displayXs",className:s.highlightedLineTitle,children:i})]}),e.jsx("div",{className:s.badgesRow,children:o.map(n=>e.jsx(a.Typography,{as:"p",defaultVariant:"labelXs",emphasis:!0,className:s.badge,children:n},n))})]}),e.jsx("div",{className:s.verticalBorder})]}),e.jsx("div",{className:s.rightColumn})]})]})});exports.ScienceHero=p;

package/dist/modules/ScienceHero/ScienceHero.es.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { Typography as s } from "../../components/Typography/Typography.es.js";
 import { ScienceHeroCursor as h } from "./ScienceHeroCursor.es.js";
-import a from "./scienceHero.module.css.es.js";
+import a from "../../modules/ScienceHero/scienceHero.module.css";
+import { Typography as s } from "../../components/Typography/Typography.es.js";
 const f = ({
   firstLineTitle: n,
   optionalLineTitle: r,

package/dist/modules/ScienceHero/ScienceHeroCursor.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),u=require("./components/ScienceClientCursor.cjs.js"),o=require("./components/ScienceServerCursor.cjs.js");function S({children:e,backgroundImage:c,cursorLink:s}){const[i,n]=t.useState(!1);return t.useEffect(()=>{n(!0)},[]),i?r.jsx(u.ScienceClientCursor,{backgroundImage:c,cursorLink:s,children:e}):r.jsx(o.ScienceServerCursor,{children:e})}exports.ScienceHeroCursor=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),u=require("./components/ScienceClientCursor.cjs.js"),o=require("./components/ScienceServerCursor.cjs.js");function S({children:e,backgroundImage:s,cursorLink:c}){const[n,i]=t.useState(!1);return t.useEffect(()=>{i(!0)},[]),n?r.jsx(u.ScienceClientCursor,{backgroundImage:s,cursorLink:c,children:e}):r.jsx(o.ScienceServerCursor,{children:e})}exports.ScienceHeroCursor=S;

package/dist/modules/ScienceHero/components/ScienceClientCursor.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),E=require("react-dom"),w=require("../scienceHero.module.css.cjs.js");function M({children:u,backgroundImage:h,cursorLink:m}){const[l,x]=o.useState({x:0,y:0}),[c,a]=o.useState(!1),[g,d]=o.useState(!1),[e,f]=o.useState(null),[r,$]=o.useState(!1);o.useEffect(()=>{d(!0);const t=()=>$(window.innerWidth<=768);return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),d(!1)}},[]),o.useEffect(()=>{if(r)return;const t=s=>{x({x:s.clientX,y:s.clientY})},i=()=>{if(c&&e){const s=document.querySelector('[data-type="hero"]');s&&f(s.getBoundingClientRect())}};return window.addEventListener("mousemove",t),window.addEventListener("scroll",i,{passive:!0}),window.addEventListener("resize",i,{passive:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("scroll",i),window.removeEventListener("resize",i)}},[r,c,e]);const b=t=>{r||(f(t.currentTarget.getBoundingClientRect()),a(!0))},y=()=>{r||a(!1)},C=()=>{window.location.href=m};if(r)return n.jsx(n.Fragment,{children:u});const p=`circle(270px at ${l.x}px ${l.y}px)`,v=c&&e&&n.jsx("div",{className:w.default.cursorContainer,style:{position:"fixed",top:`${e.top}px`,left:`${e.left}px`,width:`${e.width}px`,height:`${e.height}px`,overflow:"hidden",cursor:"pointer"},children:n.jsx("div",{className:w.default.normalBackground,style:{position:"absolute",top:`${-e.top}px`,left:`${-e.left}px`,backgroundImage:`url(${h})`,clipPath:p,WebkitClipPath:p,backgroundPosition:"center"}})});return n.jsxs(n.Fragment,{children:[n.jsx("div",{"data-type":"hero",onMouseEnter:b,onMouseLeave:y,onClick:C,style:{cursor:"pointer"},children:u}),g&&v&&E.createPortal(v,document.body)]})}exports.ScienceClientCursor=M;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),M=require("react-dom"),w=require("../../../src/modules/ScienceHero/scienceHero.module.css");function S({children:l,backgroundImage:h,cursorLink:m}){const[u,x]=o.useState({x:0,y:0}),[c,a]=o.useState(!1),[g,d]=o.useState(!1),[e,f]=o.useState(null),[s,y]=o.useState(!1);o.useEffect(()=>{d(!0);const t=()=>y(window.innerWidth<=768);return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),d(!1)}},[]),o.useEffect(()=>{if(s)return;const t=r=>{x({x:r.clientX,y:r.clientY})},i=()=>{if(c&&e){const r=document.querySelector('[data-type="hero"]');r&&f(r.getBoundingClientRect())}};return window.addEventListener("mousemove",t),window.addEventListener("scroll",i,{passive:!0}),window.addEventListener("resize",i,{passive:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("scroll",i),window.removeEventListener("resize",i)}},[s,c,e]);const b=t=>{s||(f(t.currentTarget.getBoundingClientRect()),a(!0))},C=()=>{s||a(!1)},E=()=>{window.location.href=m};if(s)return n.jsx(n.Fragment,{children:l});const p=`circle(270px at ${u.x}px ${u.y}px)`,v=c&&e&&n.jsx("div",{className:w.cursorContainer,style:{position:"fixed",top:`${e.top}px`,left:`${e.left}px`,width:`${e.width}px`,height:`${e.height}px`,overflow:"hidden",cursor:"pointer"},children:n.jsx("div",{className:w.normalBackground,style:{position:"absolute",top:`${-e.top}px`,left:`${-e.left}px`,backgroundImage:`url(${h})`,clipPath:p,WebkitClipPath:p,backgroundPosition:"center"}})});return n.jsxs(n.Fragment,{children:[n.jsx("div",{"data-type":"hero",onMouseEnter:b,onMouseLeave:C,onClick:E,style:{cursor:"pointer"},children:l}),g&&v&&M.createPortal(v,document.body)]})}exports.ScienceClientCursor=S;

package/dist/modules/ScienceHero/components/ScienceClientCursor.es.js

@@ -2,7 +2,7 @@
 import { jsx as i, Fragment as v, jsxs as $ } from "react/jsx-runtime";
 import { useState as r, useEffect as w } from "react";
 import { createPortal as k } from "react-dom";
-import h from "../scienceHero.module.css.es.js";
+import h from "../../../modules/ScienceHero/scienceHero.module.css";
 function S({ children: l, backgroundImage: x, cursorLink: g }) {
   const [d, y] = r({ x: 0, y: 0 }), [c, a] = r(!1), [E, u] = r(!1), [e, p] = r(null), [o, M] = r(!1);
   w(() => {

package/dist/modules/ScienceHero/scienceHero.module.css

@@ -0,0 +1,245 @@
+.root {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    max-height: 100vh;
+}
+
+.blurredBackground {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    z-index: 0;
+}
+
+.blurredBackground::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(17, 16, 22, 0.6);
+    backdrop-filter: blur(25px);
+}
+
+.normalBackground {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    background-size: cover;
+    background-position: center;
+    z-index: 1;
+    filter: brightness(1.1);
+}
+
+.container {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    min-height: 100%;
+    z-index: 2;
+}
+
+.circleVector {
+    position: absolute;
+    width: 540px;
+    height: 540px;
+    border: var(--border-width-sm) solid var(--color-bg-fill-alpha-white-20);
+    border-radius: var(--border-radius-full);
+    pointer-events: none;
+    z-index: 0;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.mainColumn {
+    width: 100%;
+    margin-top: 125px;
+    margin-bottom: 45px;
+    display: flex;
+    position: relative;
+    align-items: center;
+    padding: 98px 60px;
+    z-index: 2;
+}
+
+.mainColumn::before,
+.mainColumn::after {
+    left: 30px;
+    content: '';
+    position: absolute;
+    width: calc(100% - 60px);
+    height: var(--border-width-sm);
+    background-color: var(--color-bg-fill-alpha-white-20);
+}
+
+.mainColumn::before {
+    top: 0;
+}
+
+.mainColumn::after {
+    bottom: 0;
+}
+
+.leftColumn,
+.rightColumn {
+    position: relative;
+    margin-top: 125px;
+    margin-bottom: 45px;
+    display: flex;
+    width: 100%;
+    height: auto;
+}
+
+.rightColumn {
+    justify-content: flex-end;
+}
+
+.leftColumn::before,
+.leftColumn::after,
+.rightColumn::before,
+.rightColumn::after {
+    content: '';
+    position: absolute;
+    width: calc(100% - 30px);
+    height: var(--border-width-sm);
+    background-color: var(--color-bg-fill-alpha-white-20);
+}
+
+.leftColumn::before,
+.rightColumn::before {
+    top: 0;
+}
+
+.rightColumn::after,
+.leftColumn::after {
+    bottom: 0;
+}
+
+.verticalBorder {
+    position: absolute;
+    background: var(--color-bg-fill-alpha-white-20);
+    width: var(--border-width-sm);
+    height: 580px;
+}
+
+.verticalBorder:first-child {
+    left: 0;
+}
+
+.verticalBorder:last-child {
+    right: 0;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+    width: 900px;
+    user-select: none;
+}
+
+.label {
+    color: var(--color-text-primary-inverted);
+}
+
+.title {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    color: var(--color-text-primary-inverted);
+}
+
+.firstLineTitle {
+    text-align: left;
+}
+
+.optionalLineTitle {
+    text-align: right;
+}
+
+.highlightedLineTitle {
+    text-align: center;
+    color: var(--color-text-primary-brand-solar);
+}
+
+.badgesRow {
+    display: flex;
+    gap: 12px;
+}
+
+.badge {
+    border-radius: var(--border-radius-xxs);
+    padding: 8px 12px;
+    color: var(--color-text-primary-inverted);
+    background: var(--color-bg-fill-alpha-white-20);
+}
+
+.circleVectorMobile {
+    display: none;
+}
+
+@media screen and (width <= 768px) {
+    .leftColumn,
+    .rightColumn {
+        display: none;
+    }
+    .circleVector {
+        width: 399px;
+        height: 399px;
+    }
+
+    .circleVectorMobile {
+        display: block;
+        position: absolute;
+        width: 399px;
+        height: 399px;
+        clip-path: circle(50%);
+        -webkit-clip-path: circle(50%);
+        z-index: 1;
+        background-size: cover;
+        background-position: center;
+        pointer-events: auto;
+    }
+
+    .mainColumn {
+        margin-left: 12px;
+        margin-right: 12px;
+        justify-content: center;
+        padding: 48px 12px;
+    }
+
+    .content {
+        z-index: 2;
+        gap: 0px;
+        width: 351px;
+        pointer-events: none;
+    }
+
+    .content > * {
+        pointer-events: auto;
+    }
+
+    .label {
+        height: 64px;
+    }
+
+    .title {
+        padding: 0px 8px;
+        margin: 137px 0;
+    }
+
+    .badgesRow {
+        justify-content: center;
+        padding: 0px 12px;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+}

package/dist/modules/ScrollingText/ScrollingText.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../components/Typography/Typography.cjs.js"),o=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),t=require("./scrollingText.module.css.cjs.js"),i=({label:r,url:l})=>e.jsx("a",{href:l,className:t.default.label,children:e.jsx(n.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:r})}),a=({labels:r})=>e.jsx("section",{className:t.default.root,children:r.length>0&&e.jsx("div",{className:t.default.footer,children:e.jsx(o.InfiniteScroll,{items:r,renderItem:i})})});exports.ScrollingText=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../src/modules/ScrollingText/scrollingText.module.css"),l=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),i=require("../../components/Typography/Typography.cjs.js"),o=({label:r,url:n})=>e.jsx("a",{href:n,className:t.label,children:e.jsx(i.Typography,{defaultVariant:"labelMd",emphasis:!0,mobileVariant:"labelSm",weight:"regular",children:r})}),s=({labels:r})=>e.jsx("section",{className:t.root,children:r.length>0&&e.jsx("div",{className:t.footer,children:e.jsx(l.InfiniteScroll,{items:r,renderItem:o})})});exports.ScrollingText=s;

package/dist/modules/ScrollingText/ScrollingText.es.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Typography as o } from "../../components/Typography/Typography.es.js";
-import { InfiniteScroll as i } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-import t from "./scrollingText.module.css.es.js";
-const a = ({ label: r, url: l }) => /* @__PURE__ */ e("a", { href: l, className: t.label, children: /* @__PURE__ */ e(o, { defaultVariant: "labelMd", emphasis: !0, mobileVariant: "labelSm", weight: "regular", children: r }) }), d = ({ labels: r }) => /* @__PURE__ */ e("section", { className: t.root, children: r.length > 0 && /* @__PURE__ */ e("div", { className: t.footer, children: /* @__PURE__ */ e(i, { items: r, renderItem: a }) }) });
+import t from "../../modules/ScrollingText/scrollingText.module.css";
+import { InfiniteScroll as o } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
+import { Typography as i } from "../../components/Typography/Typography.es.js";
+const a = ({ label: r, url: l }) => /* @__PURE__ */ e("a", { href: l, className: t.label, children: /* @__PURE__ */ e(i, { defaultVariant: "labelMd", emphasis: !0, mobileVariant: "labelSm", weight: "regular", children: r }) }), d = ({ labels: r }) => /* @__PURE__ */ e("section", { className: t.root, children: r.length > 0 && /* @__PURE__ */ e("div", { className: t.footer, children: /* @__PURE__ */ e(o, { items: r, renderItem: a }) }) });
 export {
   d as ScrollingText
 };

package/dist/modules/ScrollingText/scrollingText.module.css

@@ -0,0 +1,53 @@
+.root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    padding: 64px 0;
+    overflow: hidden;
+}
+
+.footer {
+    width: 100%;
+    display: flex;
+    border-top: var(--border-width-sm) solid var(--border-color-light);
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+}
+
+.label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--color-text-primary);
+    text-decoration: none;
+    white-space: nowrap;
+    padding: 9px 32px;
+    cursor: pointer;
+    position: relative;
+
+    &:hover {
+        text-decoration: none;
+        color: inherit;
+    }
+
+    &::after {
+        content: "";
+        display: flex;
+        width: 1px;
+        height: 32px;
+        background-color: var(--border-color-light);
+        position: absolute;
+        right: 0;
+    }
+}
+
+@media screen and (width <= 768px) {
+    .root {
+        padding: 40px 0;
+    }
+
+    .label {
+        padding: 10px 24px;
+    }
+}

package/dist/modules/SlidingTabsGallery/SlidingTabsGallery.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),x=require("../../node_modules/gsap/index.cjs.js"),h=require("../../node_modules/gsap/Flip.cjs.js"),j=require("../../node_modules/@gsap/react/src/index.cjs.js"),N=require("../../pageComponents/Bubbles/Bubbles.cjs.js"),v=require("../../pageComponents/Gradient/Gradient.cjs.js"),m=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),q=require("../../utils/cn/cn.cjs.js"),b=require("../../components/Typography/Typography.cjs.js"),C=require("../../components/Icon/Icon.cjs.js"),t=require("./SlidingTabsGallery.module.css.cjs.js");x.gsap.registerPlugin(h.Flip);const R=({title:y,tabs:d,withBubbles:p})=>{const r=g.useRef(null),l=g.useRef(null),[c,f]=g.useState(d[0]);j.useGSAP(()=>{const i=r.current,n=l.current,u=a=>{if(i&&n&&a){const o=n.getBoundingClientRect(),s=a.getBoundingClientRect();x.gsap.set(i,{left:s.left-o.left,top:s.top-o.top,width:s.width,height:s.height})}};if(n&&n.children.length>1){const a=n.children[1];a&&u(a)}},{dependencies:[d,f],scope:l});const T=(i,n)=>{if(i===c)return;const u=h.Flip.getState(r.current);if(f(i),r.current&&l.current&&l.current.children.length>n+1){const a=l.current.children[n+1];if(a){const o=l.current.getBoundingClientRect(),s=a.getBoundingClientRect();r.current.style.left=`${s.left-o.left}px`,r.current.style.top=`${s.top-o.top}px`,r.current.style.width=`${s.width}px`,r.current.style.height=`${s.height}px`}}h.Flip.from(u,{targets:r.current,duration:.3,ease:"power1.inOut"})};return e.jsxs("section",{className:t.default.root,children:[p&&e.jsx(N.Bubbles,{className:t.default.bubbles}),e.jsxs("div",{className:t.default.container,children:[e.jsx(m.HighlightedTitle,{as:"div",title:y,className:t.default.header,colorScheme:"dark"}),e.jsxs("div",{className:t.default.content,children:[c.image&&e.jsx("div",{className:t.default.imageWrap,children:e.jsx("img",{src:c.image,alt:"Total Care",className:t.default.image})}),e.jsx("div",{className:t.default.tabsContainer,children:e.jsxs("div",{ref:l,className:t.default.tabs,children:[e.jsx("div",{ref:r,id:"marker",className:t.default.marker}),d.map((i,n)=>e.jsxs("button",{className:q.cn(t.default.tab,{[t.default.active]:c===i}),onClick:()=>T(i,n),children:[i.icon&&e.jsx(b.Typography,{defaultVariant:"displayMd",className:t.default.icon,children:e.jsx(C.Icon,{name:i.icon})}),e.jsx(b.Typography,{defaultVariant:"displayMd",className:t.default.hideMobile,children:i.label})]},i.label))]})}),c.description&&e.jsx("div",{className:t.default.description,children:e.jsx(m.HighlightedTitle,{as:"div",defaultVariant:"bodyXl",mobileVariant:"bodyMd",className:t.default.descriptionText,title:c.description,colorScheme:"dark"})})]})]}),p&&e.jsx(v.Gradient,{variant:"blue"})]})};exports.SlidingTabsGallery=R;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),x=require("gsap"),h=require("../../node_modules/gsap/Flip.cjs.js"),T=require("@gsap/react"),N=require("../../utils/cn/cn.cjs.js"),t=require("../../src/modules/SlidingTabsGallery/SlidingTabsGallery.module.css"),v=require("../../pageComponents/Bubbles/Bubbles.cjs.js"),f=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),b=require("../../components/Typography/Typography.cjs.js"),R=require("../../components/Icon/Icon.cjs.js"),C=require("../../pageComponents/Gradient/Gradient.cjs.js");x.registerPlugin(h.Flip);const q=({title:y,tabs:d,withBubbles:p})=>{const s=g.useRef(null),a=g.useRef(null),[l,m]=g.useState(d[0]);T.useGSAP(()=>{const n=s.current,i=a.current,u=c=>{if(n&&i&&c){const o=i.getBoundingClientRect(),r=c.getBoundingClientRect();x.set(n,{left:r.left-o.left,top:r.top-o.top,width:r.width,height:r.height})}};if(i&&i.children.length>1){const c=i.children[1];c&&u(c)}},{dependencies:[d,m],scope:a});const j=(n,i)=>{if(n===l)return;const u=h.Flip.getState(s.current);if(m(n),s.current&&a.current&&a.current.children.length>i+1){const c=a.current.children[i+1];if(c){const o=a.current.getBoundingClientRect(),r=c.getBoundingClientRect();s.current.style.left=`${r.left-o.left}px`,s.current.style.top=`${r.top-o.top}px`,s.current.style.width=`${r.width}px`,s.current.style.height=`${r.height}px`}}h.Flip.from(u,{targets:s.current,duration:.3,ease:"power1.inOut"})};return e.jsxs("section",{className:t.root,children:[p&&e.jsx(v.Bubbles,{className:t.bubbles}),e.jsxs("div",{className:t.container,children:[e.jsx(f.HighlightedTitle,{as:"div",title:y,className:t.header,colorScheme:"dark"}),e.jsxs("div",{className:t.content,children:[l.image&&e.jsx("div",{className:t.imageWrap,children:e.jsx("img",{src:l.image,alt:"Total Care",className:t.image})}),e.jsx("div",{className:t.tabsContainer,children:e.jsxs("div",{ref:a,className:t.tabs,children:[e.jsx("div",{ref:s,id:"marker",className:t.marker}),d.map((n,i)=>e.jsxs("button",{className:N.cn(t.tab,{[t.active]:l===n}),onClick:()=>j(n,i),children:[n.icon&&e.jsx(b.Typography,{defaultVariant:"displayMd",className:t.icon,children:e.jsx(R.Icon,{name:n.icon})}),e.jsx(b.Typography,{defaultVariant:"displayMd",className:t.hideMobile,children:n.label})]},n.label))]})}),l.description&&e.jsx("div",{className:t.description,children:e.jsx(f.HighlightedTitle,{as:"div",defaultVariant:"bodyXl",mobileVariant:"bodyMd",className:t.descriptionText,title:l.description,colorScheme:"dark"})})]})]}),p&&e.jsx(C.Gradient,{variant:"blue"})]})};exports.SlidingTabsGallery=q;

package/dist/modules/SlidingTabsGallery/SlidingTabsGallery.es.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { useRef as g, useState as R } from "react";
-import { gsap as v } from "../../node_modules/gsap/index.es.js";
+import v from "gsap";
 import { Flip as u } from "../../node_modules/gsap/Flip.es.js";
-import { useGSAP as T } from "../../node_modules/@gsap/react/src/index.es.js";
-import { Bubbles as k } from "../../pageComponents/Bubbles/Bubbles.es.js";
-import { Gradient as S } from "../../pageComponents/Gradient/Gradient.es.js";
+import { useGSAP as T } from "@gsap/react";
+import { cn as k } from "../../utils/cn/cn.es.js";
+import e from "../../modules/SlidingTabsGallery/SlidingTabsGallery.module.css";
+import { Bubbles as x } from "../../pageComponents/Bubbles/Bubbles.es.js";
 import { HighlightedTitle as b } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { cn as x } from "../../utils/cn/cn.es.js";
 import { Typography as N } from "../../components/Typography/Typography.es.js";
 import { Icon as B } from "../../components/Icon/Icon.es.js";
-import e from "./SlidingTabsGallery.module.css.es.js";
+import { Gradient as S } from "../../pageComponents/Gradient/Gradient.es.js";
 v.registerPlugin(u);
-const O = ({ title: y, tabs: m, withBubbles: h }) => {
-  const n = g(null), o = g(null), [s, f] = R(m[0]);
+const W = ({ title: y, tabs: m, withBubbles: f }) => {
+  const n = g(null), o = g(null), [s, h] = R(m[0]);
   T(
     () => {
       const t = n.current, i = o.current, p = (c) => {
@@ -32,12 +32,12 @@ const O = ({ title: y, tabs: m, withBubbles: h }) => {
         c && p(c);
       }
     },
-    { dependencies: [m, f], scope: o }
+    { dependencies: [m, h], scope: o }
   );
   const C = (t, i) => {
     if (t === s) return;
     const p = u.getState(n.current);
-    if (f(t), n.current && o.current && o.current.children.length > i + 1) {
+    if (h(t), n.current && o.current && o.current.children.length > i + 1) {
       const c = o.current.children[i + 1];
       if (c) {
         const l = o.current.getBoundingClientRect(), a = c.getBoundingClientRect();
@@ -51,7 +51,7 @@ const O = ({ title: y, tabs: m, withBubbles: h }) => {
     });
   };
   return /* @__PURE__ */ d("section", { className: e.root, children: [
-    h && /* @__PURE__ */ r(k, { className: e.bubbles }),
+    f && /* @__PURE__ */ r(x, { className: e.bubbles }),
     /* @__PURE__ */ d("div", { className: e.container, children: [
       /* @__PURE__ */ r(b, { as: "div", title: y, className: e.header, colorScheme: "dark" }),
       /* @__PURE__ */ d("div", { className: e.content, children: [
@@ -61,7 +61,7 @@ const O = ({ title: y, tabs: m, withBubbles: h }) => {
           m.map((t, i) => /* @__PURE__ */ d(
             "button",
             {
-              className: x(e.tab, {
+              className: k(e.tab, {
                 [e.active]: s === t
               }),
               onClick: () => C(t, i),
@@ -86,9 +86,9 @@ const O = ({ title: y, tabs: m, withBubbles: h }) => {
         ) })
       ] })
     ] }),
-    h && /* @__PURE__ */ r(S, { variant: "blue" })
+    f && /* @__PURE__ */ r(S, { variant: "blue" })
   ] });
 };
 export {
-  O as SlidingTabsGallery
+  W as SlidingTabsGallery
 };