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

package/dist/modules/SlidingTabsGallery/SlidingTabsGallery.module.css

@@ -0,0 +1,242 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    --ipad-content-max-width: 830px;
+    background-color: var(--color-bg-base-dark);
+}
+
+.bubbles {
+    margin-bottom: -250px;
+    height: 640px;
+    z-index: 0;
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 248px;
+        bottom: 0;
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, var(--color-bg-base-dark) 100%);
+        z-index: 1;
+    }
+}
+
+.container {
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: var(--spacing-120) var(--spacing-180);
+}
+
+.header {
+    max-width: var(--ipad-content-max-width);
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: var(--spacing-64);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.content {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--spacing-28);
+    max-width: var(--ipad-content-max-width);
+    margin: 0 auto;
+}
+
+.tabsContainer {
+    padding: var(--spacing-8);
+    border-radius: var(--border-radius-md);
+    border: var(--border-width-sm) solid var(--color-neutral-500);
+    margin-inline: var(--spacing-20);
+}
+
+.tabs {
+    background-image: linear-gradient(var(--color-neutral-900) 60%, var(--color-indigo-500));
+    display: grid;
+    border-radius: var(--border-radius-sm);
+    grid-template-columns: repeat(5, 1fr);
+    position: relative;
+}
+
+.tab {
+    position: relative;
+    z-index: 2;
+    border: none;
+    padding: var(--spacing-12) var(--spacing-16);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-8);
+    color: var(--color-text-primary-inverted);
+    background-color: transparent;
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+        color: var(--color-text-secondary-hover);
+    }
+
+    button {
+        appearance: none;
+        border: none;
+        background: none;
+        color: inherit;
+    }
+
+    span {
+        font-size: var(--font-size-sm);
+        white-space: nowrap;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    &.active {
+        color: var(--color-text-primary);
+    }
+}
+
+.marker {
+    position: absolute;
+    z-index: 1;
+    background-image: none;
+    background-color: var(--color-solar-200);
+    border-radius: var(--border-radius-sm);
+    box-shadow: inset 0 0 0 1px var(--color-neutral-900);
+}
+
+.imageWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    max-width: var(--ipad-content-max-width);
+    height: max-content;
+    aspect-ratio: 4 / 3;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        border-radius: var(--border-radius-lg);
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--border-radius-full);
+        opacity: 0.5;
+        background: var(--color-black);
+        filter: blur(200px);
+        z-index: 0;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-image: url('./assets/ipad.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        z-index: 2;
+    }
+}
+
+.description {
+    text-align: center;
+    margin-inline: var(--spacing-104);
+    padding-inline: var(--spacing-40);
+    font-weight: var(--font-weight-regular);
+}
+
+.descriptionText > * {
+    text-wrap: pretty;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    padding: var(--spacing-16);
+    border-radius: var(--border-radius-lg);
+    z-index: 1;
+}
+
+@media (width <= 1440px) {
+    .container {
+        padding: var(--spacing-120);
+    }
+}
+
+@media (width <= 1360px) {
+    .bubbles {
+        margin-bottom: -250px;
+    }
+}
+
+@media (width <= 1024px) {
+    .container {
+        padding: var(--spacing-120) var(--spacing-20);
+    }
+
+    .image {
+        padding: var(--spacing-12);
+    }
+}
+
+@media screen and (width <= 768px) {
+    .bubbles {
+        margin-bottom: -160px;
+        height: 522px;
+    }
+
+    .container {
+        padding: var(--spacing-64) var(--spacing-20);
+    }
+
+    .header {
+        margin-bottom: var(--spacing-40);
+    }
+
+    .content {
+        display: flex;
+        gap: var(--spacing-40);
+    }
+
+    .hideMobile {
+        display: none;
+    }
+
+    .tabsContainer {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .image {
+        padding: var(--spacing-16);
+    }
+
+    .mobile {
+        display: block;
+    }
+
+    .desktop {
+        display: none;
+    }
+
+    .description {
+        margin-inline: var(--spacing-20);
+        padding-inline: 0;
+    }
+}

package/dist/modules/Studies/Studies.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../components/Button/Button.cjs.js"),p=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),g=require("../../components/StudyGridCard/StudyGridCard.cjs.js"),m=require("../../components/Typography/Typography.cjs.js"),s=require("./studies.module.css.cjs.js");function y({title:o,description:d,articles:l,allStudiesLink:n,trackingEvent:a,trackingLocation:u}){const c=l.reduce((t,i)=>{const r=t[t.length-1];return r.length<2?r.push(i):t.push([i]),t},[[]]);return e.jsx("section",{className:s.default.root,children:e.jsxs("div",{className:s.default.container,children:[e.jsxs("div",{className:s.default.header,children:[e.jsx(p.HighlightedTitle,{title:o}),d&&e.jsx(m.Typography,{as:"p",defaultVariant:"bodyLg",className:s.default.description,children:d}),n&&e.jsx("div",{children:e.jsx(h.Button,{as:"a",variant:"muted",size:"lg",href:n,children:"view all studies"})})]}),e.jsx("div",{className:s.default.articles,children:c.map((t,i)=>e.jsx("div",{className:s.default.row,children:t.map(r=>e.jsx(g.StudyGridCard,{...r,trackingEvent:a,trackingLocation:u},r.title))},i))})]})})}exports.Studies=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),p=require("../../components/StudyGridCard/StudyGridCard.cjs.js"),g=require("../../components/Typography/Typography.cjs.js"),t=require("../../src/modules/Studies/studies.module.css"),m=require("../../components/Button/Button.cjs.js");function y({title:d,description:n,articles:l,allStudiesLink:o,trackingEvent:a,trackingLocation:u}){const c=l.reduce((s,i)=>{const r=s[s.length-1];return r.length<2?r.push(i):s.push([i]),s},[[]]);return e.jsx("section",{className:t.root,children:e.jsxs("div",{className:t.container,children:[e.jsxs("div",{className:t.header,children:[e.jsx(h.HighlightedTitle,{title:d}),n&&e.jsx(g.Typography,{as:"p",defaultVariant:"bodyLg",className:t.description,children:n}),o&&e.jsx("div",{children:e.jsx(m.Button,{as:"a",variant:"muted",size:"lg",href:o,children:"view all studies"})})]}),e.jsx("div",{className:t.articles,children:c.map((s,i)=>e.jsx("div",{className:t.row,children:s.map(r=>e.jsx(p.StudyGridCard,{...r,trackingEvent:a,trackingLocation:u},r.title))},i))})]})})}exports.Studies=y;

package/dist/modules/Studies/Studies.es.js

@@ -1,9 +1,9 @@
 import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { Button as c } from "../../components/Button/Button.es.js";
-import { HighlightedTitle as u } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { StudyGridCard as f } from "../../components/StudyGridCard/StudyGridCard.es.js";
-import { Typography as g } from "../../components/Typography/Typography.es.js";
-import i from "./studies.module.css.es.js";
+import { HighlightedTitle as c } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { StudyGridCard as u } from "../../components/StudyGridCard/StudyGridCard.es.js";
+import { Typography as f } from "../../components/Typography/Typography.es.js";
+import i from "../../modules/Studies/studies.module.css";
+import { Button as g } from "../../components/Button/Button.es.js";
 function T({
   title: l,
   description: o,
@@ -21,12 +21,12 @@ function T({
   );
   return /* @__PURE__ */ r("section", { className: i.root, children: /* @__PURE__ */ a("div", { className: i.container, children: [
     /* @__PURE__ */ a("div", { className: i.header, children: [
-      /* @__PURE__ */ r(u, { title: l }),
-      o && /* @__PURE__ */ r(g, { as: "p", defaultVariant: "bodyLg", className: i.description, children: o }),
-      d && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(c, { as: "a", variant: "muted", size: "lg", href: d, children: "view all studies" }) })
+      /* @__PURE__ */ r(c, { title: l }),
+      o && /* @__PURE__ */ r(f, { as: "p", defaultVariant: "bodyLg", className: i.description, children: o }),
+      d && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(g, { as: "a", variant: "muted", size: "lg", href: d, children: "view all studies" }) })
     ] }),
     /* @__PURE__ */ r("div", { className: i.articles, children: p.map((e, t) => /* @__PURE__ */ r("div", { className: i.row, children: e.map((s) => /* @__PURE__ */ r(
-      f,
+      u,
       {
         ...s,
         trackingEvent: n,

package/dist/modules/Studies/studies.module.css

@@ -0,0 +1,98 @@
+.root {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    width: 100%;
+    max-width: var(--content-max-width);
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing-120) var(--spacing-32);
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-20);
+    text-align: center;
+    margin-bottom: var(--spacing-48);
+}
+
+.description {
+    max-width: 530px;
+}
+
+.articles {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.row {
+    display: flex;
+    justify-content: center;
+}
+
+/* .row > div for StudyGridCard */
+.row > div {
+    border-top: 1px solid var(--border-color-light);
+}
+
+.row > div::before,
+.row > div::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 16px;
+    bottom: 16px;
+    left: 0;
+    height: calc(100% - 16px - 16px);
+    background-color: var(--border-color-light);
+    width: 1px;
+}
+
+.row > div:last-child:after {
+    left: unset;
+    right: 0px;
+}
+
+.row:nth-child(even) > div {
+    flex-direction: row-reverse;
+}
+
+.row:last-child {
+    border-bottom: 1px solid var(--border-color-light);
+}
+
+@media (width <= 1000px) {
+    .row:nth-child(even) > div {
+        flex-direction: row;
+    }
+
+    .row > div:nth-child(even) {
+        flex-direction: row-reverse;
+    }
+
+    .container {
+        padding: var(--spacing-64) var(--spacing-20);
+    }
+
+    .header {
+        gap: var(--spacing-16);
+    }
+
+    .row {
+        flex-wrap: wrap;
+    }
+
+    .row > div:after,
+    .row > div:before {
+        display: none;
+    }
+}

package/dist/modules/TargetedPrograms/TargetedPrograms.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const h=require("../../node_modules/swiper/modules/navigation.cjs.js"),t=require("../../node_modules/swiper/swiper-react.cjs.js"),m=require("../../components/Cursor/Cursor.cjs.js"),f=require("../../components/ProgramCard/ProgramCard.cjs.js"),n=require("../../components/ProgressButton/ProgressButton.cjs.js"),S=require("../../components/Typography/Typography.cjs.js"),C=require("../../utils/useSwiper/useSwiper.cjs.js"),r=require("./targetedPrograms.module.css.cjs.js"),P=[h.default];function j({title:a,cards:l}){const{setIsEnd:d,handleSlideChange:c,handlePrevClick:i,handleNextClick:o,onSwiperInit:u,handleSwiperResize:p}=C.useSwiper();return e.jsxs("section",{className:r.default.container,children:[e.jsxs("div",{className:r.default.heading,children:[e.jsx(S.Typography,{as:"h2",defaultVariant:"displayMd",mobileVariant:"headingXl",children:a}),e.jsx("div",{className:r.default.progressButtons,"data-device":"desktop",children:e.jsx(n.ProgressButton,{left:{onClick:i},right:{onClick:o}})})]}),e.jsx("div",{className:r.default.carouselArea,children:e.jsx(t.Swiper,{onSwiper:u,onResize:p,onSlideChange:c,onReachEnd:()=>d(!0),modules:P,spaceBetween:16,slidesPerView:"auto",className:r.default.swiper,loop:!0,slidesOffsetBefore:8,children:l.filter(s=>s.type!=="coming_soon").map((s,g)=>e.jsx(t.SwiperSlide,{className:r.default.swiperSlide,children:e.jsx(m.Cursor,{label:"Learn More",colorScheme:"light",children:e.jsx(f.ProgramCard,{...s})})},g))})}),e.jsx("div",{className:r.default.progressButtons,"data-device":"mobile",children:e.jsx(n.ProgressButton,{left:{onClick:i},right:{onClick:o}})})]})}exports.TargetedPrograms=j;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const h=require("swiper/modules"),n=require("swiper/react"),m=require("../../components/Cursor/Cursor.cjs.js"),S=require("../../components/ProgramCard/ProgramCard.cjs.js"),j=require("../../components/Typography/Typography.cjs.js"),x=require("../../utils/useSwiper/useSwiper.cjs.js"),r=require("../../src/modules/TargetedPrograms/targetedPrograms.module.css"),t=require("../../components/ProgressButton/ProgressButton.cjs.js"),C=[h.Navigation];function P({title:a,cards:l}){const{setIsEnd:c,handleSlideChange:d,handlePrevClick:i,handleNextClick:o,onSwiperInit:u,handleSwiperResize:p}=x.useSwiper();return e.jsxs("section",{className:r.container,children:[e.jsxs("div",{className:r.heading,children:[e.jsx(j.Typography,{as:"h2",defaultVariant:"displayMd",mobileVariant:"headingXl",children:a}),e.jsx("div",{className:r.progressButtons,"data-device":"desktop",children:e.jsx(t.ProgressButton,{left:{onClick:i},right:{onClick:o}})})]}),e.jsx("div",{className:r.carouselArea,children:e.jsx(n.Swiper,{onSwiper:u,onResize:p,onSlideChange:d,onReachEnd:()=>c(!0),modules:C,spaceBetween:16,slidesPerView:"auto",className:r.swiper,loop:!0,slidesOffsetBefore:8,children:l.filter(s=>s.type!=="coming_soon").map((s,g)=>e.jsx(n.SwiperSlide,{className:r.swiperSlide,children:e.jsx(m.Cursor,{label:"Learn More",colorScheme:"light",children:e.jsx(S.ProgramCard,{...s})})},g))})}),e.jsx("div",{className:r.progressButtons,"data-device":"mobile",children:e.jsx(t.ProgressButton,{left:{onClick:i},right:{onClick:o}})})]})}exports.TargetedPrograms=P;

package/dist/modules/TargetedPrograms/TargetedPrograms.es.js

@@ -3,14 +3,14 @@ import { jsxs as t, jsx as e } from "react/jsx-runtime";
 /* empty css                                      */
 /* empty css                                                  */
 /* empty css                                                  */
-import f from "../../node_modules/swiper/modules/navigation.es.js";
-import { Swiper as g, SwiperSlide as u } from "../../node_modules/swiper/swiper-react.es.js";
+import { Navigation as f } from "swiper/modules";
+import { Swiper as g, SwiperSlide as u } from "swiper/react";
 import { Cursor as S } from "../../components/Cursor/Cursor.es.js";
 import { ProgramCard as w } from "../../components/ProgramCard/ProgramCard.es.js";
-import { ProgressButton as a } from "../../components/ProgressButton/ProgressButton.es.js";
 import { Typography as C } from "../../components/Typography/Typography.es.js";
 import { useSwiper as N } from "../../utils/useSwiper/useSwiper.es.js";
-import r from "./targetedPrograms.module.css.es.js";
+import r from "../../modules/TargetedPrograms/targetedPrograms.module.css";
+import { ProgressButton as a } from "../../components/ProgressButton/ProgressButton.es.js";
 const v = [f];
 function z({ title: l, cards: n }) {
   const { setIsEnd: d, handleSlideChange: c, handlePrevClick: o, handleNextClick: s, onSwiperInit: m, handleSwiperResize: p } = N();

package/dist/modules/TargetedPrograms/targetedPrograms.module.css

@@ -0,0 +1,61 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: 120px;
+}
+
+.heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 120px;
+    width: 100%;
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+}
+
+.swiper {
+    padding-top: 80px;
+    padding-bottom: 120px;
+    width: 100%;
+}
+
+.swiperSlide {
+    width: auto;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.progressButtons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.progressButtons[data-device='mobile'] {
+    display: none;
+}
+
+@media (width <= 1024px) {
+    .progressButtons[data-device='desktop'] {
+        display: none;
+    }
+    .progressButtons[data-device='mobile'] {
+        display: flex;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        padding: 64px 0;
+    }
+
+    .heading {
+        padding: 0 20px;
+    }
+
+    .swiper {
+        padding: 40px 0;
+    }
+}

package/dist/modules/Testimonial/Testimonial.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("../../node_modules/swiper/modules/navigation.cjs.js"),c=require("../../node_modules/swiper/swiper-react.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const u=require("../../components/ProgressButton/ProgressButton.cjs.js"),v=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),N=require("../../components/Typography/Typography.cjs.js"),h=require("../../components/RatingStars/RatingStars.cjs.js"),R=require("../../utils/useSwiper/useSwiper.cjs.js"),k=require("./components/VideoCard/VideoCard.cjs.js"),C=require("./components/TextCard/TextCard.cjs.js"),s=require("./testimonial.module.css.cjs.js"),w=[q.default],_=({title:g,rating:i,reviews:m})=>{const{activeIndex:p,isEnd:t,isBeginning:n,hideNav:r,handleSlideChange:x,handlePrevClick:l,handleNextClick:o,onSwiperInit:S,handleSwiperResize:j,handleReachEnd:b,handleReachBeginning:f}=R.useSwiper();return e.jsxs("section",{className:s.default.root,children:[e.jsxs("div",{className:s.default.headerContainer,children:[i&&e.jsxs("div",{className:s.default.ratingContainer,children:[!!i.stars&&e.jsx("div",{className:s.default.desktop,children:e.jsx(h.RatingStars,{rating:i.stars,size:"lg"})}),!!i.stars&&e.jsx("div",{className:s.default.mobile,children:e.jsx(h.RatingStars,{rating:i.stars,size:"sm"})}),!!i.totalReviews&&e.jsxs(N.Typography,{as:"p",defaultVariant:"labelLg",mobileVariant:"labelSm",emphasis:!0,weight:"regular",children:[i.totalReviews,"+ member reviews"]})]}),e.jsxs("div",{className:s.default.headerRow,children:[e.jsx(v.HighlightedTitle,{title:g,colorScheme:"light"}),!r&&e.jsx("div",{className:s.default.desktopNavigation,children:e.jsx(u.ProgressButton,{left:{disabled:n,onClick:l},right:{disabled:t,onClick:o}})})]})]}),e.jsx("div",{className:s.default.content,children:e.jsx(c.Swiper,{onSwiper:S,onResize:j,onSlideChange:x,onReachEnd:b,onReachBeginning:f,modules:w,spaceBetween:0,slidesPerView:"auto",className:s.default.swiper,children:m.map((a,d)=>e.jsx(c.SwiperSlide,{className:s.default.swiperSlide,children:a.background.type==="video"?e.jsx(k.VideoCard,{...a,background:a.background,isActive:p===d}):e.jsx(C.TextCard,{...a,background:a.background})},`${a.background.type}_${d}`))})}),!r&&e.jsx("div",{className:s.default.mobileNavigation,children:e.jsx(u.ProgressButton,{left:{disabled:n,onClick:l},right:{disabled:t,onClick:o}})})]})};exports.Testimonial=_;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("swiper/modules"),d=require("swiper/react");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const R=require("../../utils/useSwiper/useSwiper.cjs.js"),s=require("../../src/modules/Testimonial/testimonial.module.css"),h=require("../../components/RatingStars/RatingStars.cjs.js"),k=require("../../components/Typography/Typography.cjs.js"),q=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),g=require("../../components/ProgressButton/ProgressButton.cjs.js"),C=require("./components/VideoCard/VideoCard.cjs.js"),w=require("./components/TextCard/TextCard.cjs.js"),_=[v.Navigation],y=({title:u,rating:i,reviews:m})=>{const{activeIndex:p,isEnd:r,isBeginning:a,hideNav:t,handleSlideChange:x,handlePrevClick:o,handleNextClick:l,onSwiperInit:S,handleSwiperResize:j,handleReachEnd:b,handleReachBeginning:N}=R.useSwiper();return e.jsxs("section",{className:s.root,children:[e.jsxs("div",{className:s.headerContainer,children:[i&&e.jsxs("div",{className:s.ratingContainer,children:[!!i.stars&&e.jsx("div",{className:s.desktop,children:e.jsx(h.RatingStars,{rating:i.stars,size:"lg"})}),!!i.stars&&e.jsx("div",{className:s.mobile,children:e.jsx(h.RatingStars,{rating:i.stars,size:"sm"})}),!!i.totalReviews&&e.jsxs(k.Typography,{as:"p",defaultVariant:"labelLg",mobileVariant:"labelSm",emphasis:!0,weight:"regular",children:[i.totalReviews,"+ member reviews"]})]}),e.jsxs("div",{className:s.headerRow,children:[e.jsx(q.HighlightedTitle,{title:u,colorScheme:"light"}),!t&&e.jsx("div",{className:s.desktopNavigation,children:e.jsx(g.ProgressButton,{left:{disabled:a,onClick:o},right:{disabled:r,onClick:l}})})]})]}),e.jsx("div",{className:s.content,children:e.jsx(d.Swiper,{onSwiper:S,onResize:j,onSlideChange:x,onReachEnd:b,onReachBeginning:N,modules:_,spaceBetween:0,slidesPerView:"auto",className:s.swiper,children:m.map((n,c)=>e.jsx(d.SwiperSlide,{className:s.swiperSlide,children:n.background.type==="video"?e.jsx(C.VideoCard,{...n,background:n.background,isActive:p===c}):e.jsx(w.TextCard,{...n,background:n.background})},`${n.background.type}_${c}`))})}),!t&&e.jsx("div",{className:s.mobileNavigation,children:e.jsx(g.ProgressButton,{left:{disabled:a,onClick:o},right:{disabled:r,onClick:l}})})]})};exports.Testimonial=y;

package/dist/modules/Testimonial/Testimonial.es.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import v from "../../node_modules/swiper/modules/navigation.es.js";
-import { Swiper as C, SwiperSlide as R } from "../../node_modules/swiper/swiper-react.es.js";
+import { Navigation as v } from "swiper/modules";
+import { Swiper as C, SwiperSlide as R } from "swiper/react";
 /* empty css                                      */
 /* empty css                                                  */
 /* empty css                                                  */
-import { ProgressButton as m } from "../../components/ProgressButton/ProgressButton.es.js";
-import { HighlightedTitle as w } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { useSwiper as w } from "../../utils/useSwiper/useSwiper.es.js";
+import i from "../../modules/Testimonial/testimonial.module.css";
+import { RatingStars as m } from "../../components/RatingStars/RatingStars.es.js";
 import { Typography as x } from "../../components/Typography/Typography.es.js";
-import { RatingStars as h } from "../../components/RatingStars/RatingStars.es.js";
-import { useSwiper as y } from "../../utils/useSwiper/useSwiper.es.js";
+import { HighlightedTitle as y } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { ProgressButton as h } from "../../components/ProgressButton/ProgressButton.es.js";
 import { VideoCard as B } from "./components/VideoCard/VideoCard.es.js";
 import { TextCard as E } from "./components/TextCard/TextCard.es.js";
-import i from "./testimonial.module.css.es.js";
 const z = [v], W = ({ title: p, rating: a, reviews: g }) => {
   const {
     activeIndex: b,
@@ -26,12 +26,12 @@ const z = [v], W = ({ title: p, rating: a, reviews: g }) => {
     handleSwiperResize: S,
     handleReachEnd: f,
     handleReachBeginning: k
-  } = y();
+  } = w();
   return /* @__PURE__ */ o("section", { className: i.root, children: [
     /* @__PURE__ */ o("div", { className: i.headerContainer, children: [
       a && /* @__PURE__ */ o("div", { className: i.ratingContainer, children: [
-        !!a.stars && /* @__PURE__ */ e("div", { className: i.desktop, children: /* @__PURE__ */ e(h, { rating: a.stars, size: "lg" }) }),
-        !!a.stars && /* @__PURE__ */ e("div", { className: i.mobile, children: /* @__PURE__ */ e(h, { rating: a.stars, size: "sm" }) }),
+        !!a.stars && /* @__PURE__ */ e("div", { className: i.desktop, children: /* @__PURE__ */ e(m, { rating: a.stars, size: "lg" }) }),
+        !!a.stars && /* @__PURE__ */ e("div", { className: i.mobile, children: /* @__PURE__ */ e(m, { rating: a.stars, size: "sm" }) }),
         !!a.totalReviews && /* @__PURE__ */ o(
           x,
           {
@@ -48,9 +48,9 @@ const z = [v], W = ({ title: p, rating: a, reviews: g }) => {
         )
       ] }),
       /* @__PURE__ */ o("div", { className: i.headerRow, children: [
-        /* @__PURE__ */ e(w, { title: p, colorScheme: "light" }),
+        /* @__PURE__ */ e(y, { title: p, colorScheme: "light" }),
         !l && /* @__PURE__ */ e("div", { className: i.desktopNavigation, children: /* @__PURE__ */ e(
-          m,
+          h,
           {
             left: {
               disabled: n,
@@ -87,7 +87,7 @@ const z = [v], W = ({ title: p, rating: a, reviews: g }) => {
       }
     ) }),
     !l && /* @__PURE__ */ e("div", { className: i.mobileNavigation, children: /* @__PURE__ */ e(
-      m,
+      h,
       {
         left: {
           disabled: n,

package/dist/modules/Testimonial/components/Product/Product.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../components/Typography/Typography.cjs.js"),n=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),a=require("./product.module.css.cjs.js"),i=({image:s,link:o,name:r})=>e.jsxs("a",{className:a.default.root,href:o,children:[e.jsx("div",{className:a.default.imageContainer,children:e.jsx("img",{src:s,alt:r,className:a.default.image})}),e.jsxs("div",{className:a.default.infoContainer,children:[e.jsxs("div",{className:a.default.textContainer,children:[e.jsx(t.Typography,{as:"p",defaultVariant:"labelXs",mobileVariant:"labelSm",emphasis:!0,weight:"regular",children:"REVIEWED"}),e.jsx(t.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",weight:"regular",children:r})]}),e.jsx(n.Icon,{name:c.EIconName.ARROW_OUTWARD,className:a.default.arrowIcon})]})]});exports.Product=i;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../../src/modules/Testimonial/components/Product/product.module.css"),r=require("../../../../components/Typography/Typography.cjs.js"),t=require("../../../../components/Icon/Icon.cjs.js"),i=require("../../../../components/Icon/constants.cjs.js"),c=({image:n,link:o,name:a})=>e.jsxs("a",{className:s.root,href:o,children:[e.jsx("div",{className:s.imageContainer,children:e.jsx("img",{src:n,alt:a,className:s.image})}),e.jsxs("div",{className:s.infoContainer,children:[e.jsxs("div",{className:s.textContainer,children:[e.jsx(r.Typography,{as:"p",defaultVariant:"labelXs",mobileVariant:"labelSm",emphasis:!0,weight:"regular",children:"REVIEWED"}),e.jsx(r.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",weight:"regular",children:a})]}),e.jsx(t.Icon,{name:i.EIconName.ARROW_OUTWARD,className:s.arrowIcon})]})]});exports.Product=c;

package/dist/modules/Testimonial/components/Product/Product.es.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import a from "../../../../modules/Testimonial/components/Product/product.module.css";
 import { Typography as o } from "../../../../components/Typography/Typography.es.js";
 import { Icon as m } from "../../../../components/Icon/Icon.es.js";
 import { EIconName as s } from "../../../../components/Icon/constants.es.js";
-import a from "./product.module.css.es.js";
 const f = ({ image: t, link: l, name: i }) => /* @__PURE__ */ e("a", { className: a.root, href: l, children: [
   /* @__PURE__ */ r("div", { className: a.imageContainer, children: /* @__PURE__ */ r("img", { src: t, alt: i, className: a.image }) }),
   /* @__PURE__ */ e("div", { className: a.infoContainer, children: [

package/dist/modules/Testimonial/components/Product/product.module.css

@@ -0,0 +1,64 @@
+.root {
+    width: 100%;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    color: var(--color-text-primary-inverted);
+    background-color: var(--color-bg-fill-alpha-black-40);
+    backdrop-filter: blur(6px);
+    cursor: pointer;
+    overflow: hidden;
+    border: var(--border-width-sm) solid var(--border-color-alpha-black-10);
+    border-radius: var(--border-radius-sm);
+    text-decoration: none;
+}
+
+.imageContainer {
+    width: 60px;
+    height: 60px;
+    flex-shrink: 0;
+    border-radius: var(--border-radius-xs);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.image {
+    height: 100%;
+    object-fit: cover;
+}
+
+.infoContainer {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 8px;
+}
+
+.textContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 4px;
+}
+
+.arrowIcon {
+    width: 24px;
+    height: 24px;
+    color: var(--color-text-primary-inverted);
+}
+
+@media screen and (width <= 768px) {
+    .root {
+        border-radius: var(--border-radius-xs);
+    }
+
+    .imageContainer {
+        width: 44px;
+        height: 44px;
+    }
+}

package/dist/modules/Testimonial/components/TextCard/TextCard.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("../../../../components/Typography/Typography.cjs.js"),i=require("../../../../components/RatingStars/RatingStars.cjs.js"),u=require("../Product/Product.cjs.js"),r=require("./textCard.module.css.cjs.js"),d=({background:o,review:a,product:s})=>{var l,e;return t.jsxs("div",{className:r.default.root,style:{backgroundImage:`url(${o.url})`},children:[t.jsx("div",{children:!!a.stars&&t.jsx(i.RatingStars,{rating:a.stars,size:"lg"})}),t.jsxs("div",{className:r.default.reviewContainer,children:[(a==null?void 0:a.title)&&t.jsx(n.Typography,{as:"h3",defaultVariant:"headingSm",mobileVariant:"headingXs",weight:"regular",children:a.title}),(a==null?void 0:a.description)&&t.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",weight:"regular",children:a.description}),((l=a==null?void 0:a.author)==null?void 0:l.name)&&t.jsx(n.Typography,{as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",weight:"regular",emphasis:!0,className:r.default.reviewAuthor,children:a.author.name})]}),t.jsxs("div",{className:r.default.infoContainer,children:[((e=a==null?void 0:a.author)==null?void 0:e.username)&&t.jsx(n.Typography,{as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:a.author.username}),s&&t.jsx(u.Product,{image:s.image,name:s.name,link:s.link})]})]})};exports.TextCard=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("../../../../src/modules/Testimonial/components/TextCard/textCard.module.css"),e=require("../../../../components/RatingStars/RatingStars.cjs.js"),r=require("../../../../components/Typography/Typography.cjs.js"),u=require("../Product/Product.cjs.js"),h=({background:i,review:a,product:s})=>{var l,o;return t.jsxs("div",{className:n.root,style:{backgroundImage:`url(${i.url})`},children:[t.jsx("div",{children:!!a.stars&&t.jsx(e.RatingStars,{rating:a.stars,size:"lg"})}),t.jsxs("div",{className:n.reviewContainer,children:[(a==null?void 0:a.title)&&t.jsx(r.Typography,{as:"h3",defaultVariant:"headingSm",mobileVariant:"headingXs",weight:"regular",children:a.title}),(a==null?void 0:a.description)&&t.jsx(r.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",weight:"regular",children:a.description}),((l=a==null?void 0:a.author)==null?void 0:l.name)&&t.jsx(r.Typography,{as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",weight:"regular",emphasis:!0,className:n.reviewAuthor,children:a.author.name})]}),t.jsxs("div",{className:n.infoContainer,children:[((o=a==null?void 0:a.author)==null?void 0:o.username)&&t.jsx(r.Typography,{as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:a.author.username}),s&&t.jsx(u.Product,{image:s.image,name:s.name,link:s.link})]})]})};exports.TextCard=h;