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

package/dist/components/ProductGallery/productGallery.module.css

@@ -0,0 +1,157 @@
+.root {
+    width: 100%;
+}
+
+.topRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: var(--spacing-16);
+    padding: 0 var(--spacing-120);
+    max-width: var(--content-max-width);
+    margin: 0 auto 30px
+}
+
+.topRowTabbed {
+    margin: calc(var(--border-width-sm) * -1) auto;
+}
+
+.headerWrapper {
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+}
+
+.carouselArea {
+    display: flex;
+    width: 100%;
+    max-height: 550px;
+    border-top: var(--border-width-sm) solid var(--border-color-light);
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+    padding: 0 var(--spacing-120);
+    overflow: hidden;
+}
+
+.swiper {
+    width: 100%;
+    overflow: visible;
+}
+
+.swiperControlsTabbed {
+    padding-bottom: var(--spacing-32);
+}
+
+.swiperControlsHidden {
+    visibility: hidden;
+}
+
+.swiperControlsDesktop {
+    display: flex;
+    flex: 0 0 auto;
+    position: relative;
+}
+
+.swiperControlsMobile {
+    display: none;
+    flex: 0 0 auto;
+    position: relative;
+    margin-top: var(--spacing-28);
+}
+
+.swiperSlide {
+    width: auto;
+    max-height: 540px;
+    overflow: hidden;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.swiperSlide::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: var(--spacing-24);
+    bottom: var(--spacing-24);
+    width: var(--border-width-sm);
+    background-color: var(--border-color-light);
+    transition: background-color 0.3s ease;
+}
+
+.swiperSlide:hover::before {
+    background-color: transparent;
+}
+
+.swiperSlide:hover::after {
+    background-color: transparent;
+}
+
+.swiperSlide:hover + .swiperSlide::before {
+    background-color: transparent;
+}
+
+.swiperSlide:last-child:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: var(--spacing-24);
+    bottom: var(--spacing-24);
+    width: var(--border-width-sm);
+    background-color: var(--border-color-light);
+    transition: background-color 0.3s ease;
+}
+
+.swiperSlide:last-child:hover:after {
+    background-color: transparent;
+}
+
+@media (width <= 768px) {
+    .topRow {
+        padding: 0 var(--spacing-20);
+    }
+
+    .carouselArea {
+        padding: 0 var(--spacing-20) 0;
+        max-height: 450px;
+    }
+
+    .swiperControlsDesktop {
+        display: none;
+    }
+
+    .swiperControlsMobile {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .swiperSlide {
+        max-height: 436px;
+    }
+
+    .swiperSlide:first-child::before {
+        top: var(--spacing-28);
+        bottom: var(--spacing-28);
+    }
+
+    .swiperSlide:last-child:after {
+        top: var(--spacing-28);
+        bottom: var(--spacing-28);
+    }
+
+    .swiperSlide:hover::before {
+        background-color: var(--border-color-light);
+    }
+
+    .swiperSlide:hover::after {
+        background-color: var(--border-color-light);
+    }
+
+    .swiperSlide:hover + .swiperSlide::before {
+        background-color: var(--border-color-light);
+    }
+
+    .swiperSlide:last-child:hover:after {
+        background-color: var(--border-color-light);
+    }
+}

package/dist/components/ProductGalleryCard/ProductGalleryCard.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),u=require("../Button/Button.cjs.js"),p=require("../Typography/Typography.cjs.js"),y=require("../../utils/cn/cn.cjs.js"),l=require("./productGalleryCard.module.css.cjs.js"),r=require("../../types/analytics/analytics.cjs.js"),v=({name:n,price:m,image:h,zenpatientId:c,link:o,buttons:s,isHoverable:i=!0})=>{const f=()=>{var t;const e={event:r.EAnalyticsEvent.productGalleryCardClicked,type:r.EAnalyticsEventType.interaction,component:"ProductGalleryCard",element:"card",payload:{zenpatientId:c,link:o,productName:n}};(t=window.eventBus)==null||t.emit("analytics",e)},d=(e,t)=>({event:r.EAnalyticsEvent.ctaClicked,type:r.EAnalyticsEventType.interaction,component:"ProductGalleryCard",element:`button_${t}`,payload:{ctaLabel:e.label,productId:c,productName:n}});return a.jsxs("a",{href:o,rel:"noopener noreferrer",className:l.default.root,onClick:f,children:[a.jsxs("div",{className:l.default.productInfo,children:[a.jsx(p.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:l.default.title,children:n}),a.jsx(p.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:l.default.price,children:m})]}),a.jsx("img",{src:h,alt:"product image",className:l.default.productImage}),a.jsx("div",{className:y.cn(l.default.buttonContainerDesktop,i&&l.default.hoverableButtons),children:s.map((e,t)=>a.jsx(u.Button,{size:"sm",...e,analyticsProps:d(e,t),children:e.label},t))}),a.jsx("div",{className:y.cn(l.default.buttonContainerMobile,i&&l.default.hoverableButtons),children:s.map((e,t)=>a.jsx(u.Button,{size:"xs",...e,analyticsProps:d(e,t),children:e.label},t))})]})};exports.ProductGalleryCard=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),p=require("../../utils/cn/cn.cjs.js"),r=require("../../src/components/ProductGalleryCard/productGalleryCard.module.css"),l=require("../../types/analytics/analytics.cjs.js"),u=require("../Typography/Typography.cjs.js"),y=require("../Button/Button.cjs.js"),b=({name:n,price:m,image:h,zenpatientId:c,link:o,buttons:s,isHoverable:i=!0})=>{const v=()=>{var t;const e={event:l.EAnalyticsEvent.productGalleryCardClicked,type:l.EAnalyticsEventType.interaction,component:"ProductGalleryCard",element:"card",payload:{zenpatientId:c,link:o,productName:n}};(t=window.eventBus)==null||t.emit("analytics",e)},d=(e,t)=>({event:l.EAnalyticsEvent.ctaClicked,type:l.EAnalyticsEventType.interaction,component:"ProductGalleryCard",element:`button_${t}`,payload:{ctaLabel:e.label,productId:c,productName:n}});return a.jsxs("a",{href:o,rel:"noopener noreferrer",className:r.root,onClick:v,children:[a.jsxs("div",{className:r.productInfo,children:[a.jsx(u.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:r.title,children:n}),a.jsx(u.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:r.price,children:m})]}),a.jsx("img",{src:h,alt:"product image",className:r.productImage}),a.jsx("div",{className:p.cn(r.buttonContainerDesktop,i&&r.hoverableButtons),children:s.map((e,t)=>a.jsx(y.Button,{size:"sm",...e,analyticsProps:d(e,t),children:e.label},t))}),a.jsx("div",{className:p.cn(r.buttonContainerMobile,i&&r.hoverableButtons),children:s.map((e,t)=>a.jsx(y.Button,{size:"xs",...e,analyticsProps:d(e,t),children:e.label},t))})]})};exports.ProductGalleryCard=b;

package/dist/components/ProductGalleryCard/ProductGalleryCard.es.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { Button as m } from "../Button/Button.es.js";
-import { Typography as p } from "../Typography/Typography.es.js";
-import { cn as u } from "../../utils/cn/cn.es.js";
-import r from "./productGalleryCard.module.css.es.js";
-import { EAnalyticsEventType as y, EAnalyticsEvent as h } from "../../types/analytics/analytics.es.js";
+import { cn as m } from "../../utils/cn/cn.es.js";
+import r from "../../components/ProductGalleryCard/productGalleryCard.module.css";
+import { EAnalyticsEventType as p, EAnalyticsEvent as u } from "../../types/analytics/analytics.es.js";
+import { Typography as y } from "../Typography/Typography.es.js";
+import { Button as h } from "../Button/Button.es.js";
 const k = ({
   name: l,
   price: f,
@@ -17,8 +17,8 @@ const k = ({
   const C = () => {
     var a;
     const e = {
-      event: h.productGalleryCardClicked,
-      type: y.interaction,
+      event: u.productGalleryCardClicked,
+      type: p.interaction,
       component: "ProductGalleryCard",
       element: "card",
       payload: {
@@ -29,8 +29,8 @@ const k = ({
     };
     (a = window.eventBus) == null || a.emit("analytics", e);
   }, s = (e, a) => ({
-    event: h.ctaClicked,
-    type: y.interaction,
+    event: u.ctaClicked,
+    type: p.interaction,
     component: "ProductGalleryCard",
     element: `button_${a}`,
     payload: {
@@ -41,12 +41,12 @@ const k = ({
   });
   return /* @__PURE__ */ d("a", { href: c, rel: "noopener noreferrer", className: r.root, onClick: C, children: [
     /* @__PURE__ */ d("div", { className: r.productInfo, children: [
-      /* @__PURE__ */ t(p, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: r.title, children: l }),
-      /* @__PURE__ */ t(p, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: r.price, children: f })
+      /* @__PURE__ */ t(y, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: r.title, children: l }),
+      /* @__PURE__ */ t(y, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: r.price, children: f })
     ] }),
     /* @__PURE__ */ t("img", { src: v, alt: "product image", className: r.productImage }),
-    /* @__PURE__ */ t("div", { className: u(r.buttonContainerDesktop, i && r.hoverableButtons), children: n.map((e, a) => /* @__PURE__ */ t(m, { size: "sm", ...e, analyticsProps: s(e, a), children: e.label }, a)) }),
-    /* @__PURE__ */ t("div", { className: u(r.buttonContainerMobile, i && r.hoverableButtons), children: n.map((e, a) => /* @__PURE__ */ t(m, { size: "xs", ...e, analyticsProps: s(e, a), children: e.label }, a)) })
+    /* @__PURE__ */ t("div", { className: m(r.buttonContainerDesktop, i && r.hoverableButtons), children: n.map((e, a) => /* @__PURE__ */ t(h, { size: "sm", ...e, analyticsProps: s(e, a), children: e.label }, a)) }),
+    /* @__PURE__ */ t("div", { className: m(r.buttonContainerMobile, i && r.hoverableButtons), children: n.map((e, a) => /* @__PURE__ */ t(h, { size: "xs", ...e, analyticsProps: s(e, a), children: e.label }, a)) })
   ] });
 };
 export {

package/dist/components/ProductGalleryCard/productGalleryCard.module.css

@@ -0,0 +1,100 @@
+.root {
+    display: flex;
+    flex: 0 0 auto;
+    width: 360px;
+    height: 540px;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: var(--color-bg-base-light);
+    transition: background-color 0.3s ease-in-out;
+    text-decoration: none;
+}
+
+.root:hover {
+    background-color: var(--color-bg-neutral-light);
+}
+
+.productInfo {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    align-self: stretch;
+    padding: var(--spacing-32) var(--spacing-32) var(--spacing-16) var(--spacing-32);
+}
+
+.title {
+    color: var(--color-text-primary);
+}
+
+.price {
+    color: var(--color-text-secondary);
+}
+
+.buttonContainerDesktop {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    gap: var(--spacing-12);
+    transition: opacity 0.3s ease-in-out;
+    cursor: default;
+    padding: var(--spacing-16) var(--spacing-32) var(--spacing-32) var(--spacing-32);
+    opacity: 1;
+}
+
+.hoverableButtons {
+    opacity: 0;
+}
+
+.root:hover .hoverableButtons {
+    opacity: 1;
+}
+
+.buttonContainerMobile {
+    display: none;
+}
+
+.productImage {
+    display: block;
+    max-width: 360px;
+    max-height: 376px;
+}
+
+@media (width <= 768px) {
+    .root {
+        width: 280px;
+        height: 436px;
+        background-color: var(--color-bg-base-light);
+    }
+
+    .root:hover {
+        background-color: var(--color-bg-base-light);
+    }
+
+    .productInfo {
+        padding: var(--spacing-32) var(--spacing-24) var(--spacing-24) 9px;
+    }
+
+    .buttonContainerDesktop {
+        display: none;
+    }
+
+    .buttonContainerMobile {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-self: stretch;
+        gap: var(--spacing-12);
+        transition: opacity 0.3s ease-in-out;
+        cursor: default;
+        opacity: 1;
+        padding: 9px var(--spacing-24) var(--spacing-32) var(--spacing-24);
+    }
+
+    .productImage {
+        max-width: 280px;
+        max-height: 292px;
+    }
+}

package/dist/components/ProductListing/ProductListing.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../types/analytics/analytics.cjs.js"),o=require("../../utils/cn/cn.cjs.js"),u=require("../Button/Button.cjs.js"),f=require("../Label/Label.cjs.js"),j=require("../TypeBadge/TypeBadge.cjs.js"),l=require("../Typography/Typography.cjs.js"),a=require("./productListing.module.css.cjs.js"),b=({name:i,description:p,image:y,price:m,buttons:c,features:h,label:n,zenpatientId:g})=>{const r=(s,t)=>({event:d.EAnalyticsEvent.ctaClicked,type:d.EAnalyticsEventType.interaction,component:"ProductListing",element:`button_${t}`,payload:{ctaLabel:s.label,productId:g,productName:i}});return e.jsxs("section",{className:a.default.root,children:[e.jsxs("div",{className:a.default.imageWrapper,children:[e.jsx("img",{src:y,alt:i,className:a.default.image}),n&&e.jsx(f.Label,{color:"black",size:"sm",className:a.default.label,children:n})]}),e.jsxs("div",{className:a.default.content,children:[e.jsxs("div",{className:a.default.header,children:[e.jsx(l.Typography,{as:"h3",defaultVariant:"headingXl",mobileVariant:"headingMd",children:i}),e.jsx(l.Typography,{as:"p",defaultVariant:"bodySm",children:p})]}),e.jsx("div",{className:a.default.features,children:h.map((s,t)=>e.jsxs("div",{className:a.default.feature,children:[e.jsx(j.TypeBadge,{type:s.type},t),e.jsx(l.Typography,{as:"span",defaultVariant:"bodyMd",className:a.default.featureLabel,children:s.label})]},`${s.label}-${t}`))}),e.jsx("div",{className:a.default.divider}),e.jsx(l.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodyMd",emphasis:!0,children:m}),e.jsx("div",{className:o.cn(a.default.actions,a.default.desktop),children:c.map((s,t)=>e.jsx(u.Button,{...s,size:"lg",analyticsProps:r(s,t),children:s.label},t))}),e.jsx("div",{className:o.cn(a.default.actions,a.default.mobile),children:c.map((s,t)=>e.jsx(u.Button,{...s,size:"md",analyticsProps:r(s,t),children:s.label},t))})]})]})};exports.ProductListing=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../types/analytics/analytics.cjs.js"),d=require("../../utils/cn/cn.cjs.js"),a=require("../../src/components/ProductListing/productListing.module.css"),j=require("../Label/Label.cjs.js"),i=require("../Typography/Typography.cjs.js"),b=require("../TypeBadge/TypeBadge.cjs.js"),p=require("../Button/Button.cjs.js"),x=({name:c,description:y,image:m,price:h,buttons:n,features:u,label:l,zenpatientId:g})=>{const r=(s,t)=>({event:o.EAnalyticsEvent.ctaClicked,type:o.EAnalyticsEventType.interaction,component:"ProductListing",element:`button_${t}`,payload:{ctaLabel:s.label,productId:g,productName:c}});return e.jsxs("section",{className:a.root,children:[e.jsxs("div",{className:a.imageWrapper,children:[e.jsx("img",{src:m,alt:c,className:a.image}),l&&e.jsx(j.Label,{color:"black",size:"sm",className:a.label,children:l})]}),e.jsxs("div",{className:a.content,children:[e.jsxs("div",{className:a.header,children:[e.jsx(i.Typography,{as:"h3",defaultVariant:"headingXl",mobileVariant:"headingMd",children:c}),e.jsx(i.Typography,{as:"p",defaultVariant:"bodySm",children:y})]}),e.jsx("div",{className:a.features,children:u.map((s,t)=>e.jsxs("div",{className:a.feature,children:[e.jsx(b.TypeBadge,{type:s.type},t),e.jsx(i.Typography,{as:"span",defaultVariant:"bodyMd",className:a.featureLabel,children:s.label})]},`${s.label}-${t}`))}),e.jsx("div",{className:a.divider}),e.jsx(i.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodyMd",emphasis:!0,children:h}),e.jsx("div",{className:d.cn(a.actions,a.desktop),children:n.map((s,t)=>e.jsx(p.Button,{...s,size:"lg",analyticsProps:r(s,t),children:s.label},t))}),e.jsx("div",{className:d.cn(a.actions,a.mobile),children:n.map((s,t)=>e.jsx(p.Button,{...s,size:"md",analyticsProps:r(s,t),children:s.label},t))})]})]})};exports.ProductListing=x;

package/dist/components/ProductListing/ProductListing.es.js

@@ -1,11 +1,11 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import { EAnalyticsEventType as N, EAnalyticsEvent as b } from "../../types/analytics/analytics.es.js";
 import { cn as m } from "../../utils/cn/cn.es.js";
-import { Button as n } from "../Button/Button.es.js";
+import a from "../../components/ProductListing/productListing.module.css";
 import { Label as g } from "../Label/Label.es.js";
-import { TypeBadge as u } from "../TypeBadge/TypeBadge.es.js";
 import { Typography as s } from "../Typography/Typography.es.js";
-import a from "./productListing.module.css.es.js";
+import { TypeBadge as u } from "../TypeBadge/TypeBadge.es.js";
+import { Button as n } from "../Button/Button.es.js";
 const T = ({
   name: t,
   description: p,

package/dist/components/ProductListing/productListing.module.css

@@ -0,0 +1,102 @@
+.root {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-28);
+}
+
+.imageWrapper {
+    position: relative;
+    width: 100%;
+    max-width: 496px;
+    height: 496px;
+    max-height: 496px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: var(--border-radius-md);
+    background-color: var(--color-bg-neutral-light);
+}
+
+.label {
+    position: absolute;
+    top: var(--spacing-16);
+    left: var(--spacing-16);
+    z-index: 1;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: var(--spacing-24);
+    padding: var(--spacing-32);
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+}
+
+.features {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-20);
+}
+
+.feature {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+}
+
+.divider {
+    border-top: var(--border-width-sm) solid var(--border-color-light);
+    width: 100%;
+}
+
+.actions {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--spacing-16);
+}
+
+.mobile {
+    display: none;
+}
+
+@media (width <= 768px) {
+    .root {
+        grid-template-columns: 1fr;
+    }
+
+    .imageWrapper {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        max-height: 335px;
+    }
+
+    .content {
+        padding: 0;
+    }
+
+    .mobile {
+        display: inline-flex;
+    }
+
+    .desktop {
+        display: none;
+    }
+}

package/dist/components/ProductPairs/ProductPairs.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),P=require("../../node_modules/swiper/modules/navigation.cjs.js"),s=require("../../node_modules/swiper/swiper-react.cjs.js"),h=require("../../utils/useSwiper/useSwiper.cjs.js"),w=require("../ProgressButton/ProgressButton.cjs.js"),m=require("../ProductGalleryCard/ProductGalleryCard.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const r=require("./productPairs.module.css.cjs.js"),g=[P.default],q=({productCards:i})=>{const{isBeginning:l,isEnd:t,setIsEnd:n,handleSlideChange:a,handlePrevClick:o,handleNextClick:d,onSwiperInit:c,handleSwiperResize:u}=h.useSwiper();return e.jsxs("div",{className:r.default.root,children:[e.jsx("div",{className:r.default.carouselArea,children:e.jsx(s.Swiper,{onSwiper:c,onResize:u,onSlideChange:a,onReachEnd:()=>n(!0),modules:g,spaceBetween:0,slidesPerView:"auto",className:r.default.swiper,children:i.slice(0,2).map((p,S)=>e.jsx(s.SwiperSlide,{className:r.default.swiperSlide,children:e.jsx("div",{className:r.default.card,children:e.jsx(m.ProductGalleryCard,{...p,isHoverable:!1})})},S))})}),e.jsx("div",{className:r.default.swiperControlsMobile,children:e.jsx(w.ProgressButton,{left:{disabled:l,onClick:o},right:{disabled:t,onClick:d}})})]})};exports.ProductPairs=q;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("swiper/modules"),s=require("swiper/react"),P=require("../../utils/useSwiper/useSwiper.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const r=require("../../src/components/ProductPairs/productPairs.module.css"),m=require("../ProductGalleryCard/ProductGalleryCard.cjs.js"),w=require("../ProgressButton/ProgressButton.cjs.js"),g=[h.Navigation],j=({productCards:i})=>{const{isBeginning:n,isEnd:l,setIsEnd:o,handleSlideChange:t,handlePrevClick:a,handleNextClick:c,onSwiperInit:d,handleSwiperResize:u}=P.useSwiper();return e.jsxs("div",{className:r.root,children:[e.jsx("div",{className:r.carouselArea,children:e.jsx(s.Swiper,{onSwiper:d,onResize:u,onSlideChange:t,onReachEnd:()=>o(!0),modules:g,spaceBetween:0,slidesPerView:"auto",className:r.swiper,children:i.slice(0,2).map((p,S)=>e.jsx(s.SwiperSlide,{className:r.swiperSlide,children:e.jsx("div",{className:r.card,children:e.jsx(m.ProductGalleryCard,{...p,isHoverable:!1})})},S))})}),e.jsx("div",{className:r.swiperControlsMobile,children:e.jsx(w.ProgressButton,{left:{disabled:n,onClick:a},right:{disabled:l,onClick:c}})})]})};exports.ProductPairs=j;

package/dist/components/ProductPairs/ProductPairs.es.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import S from "../../node_modules/swiper/modules/navigation.es.js";
-import { Swiper as w, SwiperSlide as u } from "../../node_modules/swiper/swiper-react.es.js";
+import { Navigation as S } from "swiper/modules";
+import { Swiper as w, SwiperSlide as u } from "swiper/react";
 import { useSwiper as f } from "../../utils/useSwiper/useSwiper.es.js";
-import { ProgressButton as C } from "../ProgressButton/ProgressButton.es.js";
-import { ProductGalleryCard as N } from "../ProductGalleryCard/ProductGalleryCard.es.js";
 /* empty css                                      */
 /* empty css                                                  */
 /* empty css                                                  */
-import i from "./productPairs.module.css.es.js";
+import i from "../../components/ProductPairs/productPairs.module.css";
+import { ProductGalleryCard as C } from "../ProductGalleryCard/ProductGalleryCard.es.js";
+import { ProgressButton as N } from "../ProgressButton/ProgressButton.es.js";
 const g = [S], y = ({ productCards: r }) => {
   const {
     isBeginning: s,
@@ -32,11 +32,11 @@ const g = [S], y = ({ productCards: r }) => {
         spaceBetween: 0,
         slidesPerView: "auto",
         className: i.swiper,
-        children: r.slice(0, 2).map((m, p) => /* @__PURE__ */ e(u, { className: i.swiperSlide, children: /* @__PURE__ */ e("div", { className: i.card, children: /* @__PURE__ */ e(N, { ...m, isHoverable: !1 }) }) }, p))
+        children: r.slice(0, 2).map((m, p) => /* @__PURE__ */ e(u, { className: i.swiperSlide, children: /* @__PURE__ */ e("div", { className: i.card, children: /* @__PURE__ */ e(C, { ...m, isHoverable: !1 }) }) }, p))
       }
     ) }),
     /* @__PURE__ */ e("div", { className: i.swiperControlsMobile, children: /* @__PURE__ */ e(
-      C,
+      N,
       {
         left: {
           disabled: s,

package/dist/components/ProductPairs/productPairs.module.css

@@ -0,0 +1,112 @@
+.root {
+    width: 100%;
+}
+
+.carouselArea {
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+}
+
+.swiper {
+    width: 100%;
+    overflow: visible;
+}
+
+.swiperControlsMobile {
+    display: none;
+    flex: 0 0 auto;
+    position: relative;
+    margin-top: var(--spacing-28);
+}
+
+.swiperSlide {
+    width: auto;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.swiperSlide:first-child::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: var(--spacing-24);
+    bottom: var(--spacing-24);
+    width: var(--border-width-sm);
+    background-color: var(--border-color-light);
+    transition: background-color 0.3s ease;
+    z-index: 1;
+}
+
+.swiperSlide::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: var(--spacing-24);
+    bottom: var(--spacing-24);
+    width: var(--border-width-sm);
+    background-color: var(--border-color-light);
+    transition: background-color 0.3s ease;
+    z-index: 1;
+}
+
+.card {
+    position: relative;
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        left: var(--spacing-24);
+        right: var(--spacing-24);
+        height: var(--border-width-sm);
+        background-color: var(--border-color-light);
+        transition: background-color 0.3s ease;
+    }
+
+    &::before {
+        top: 0;
+    }
+
+    &::after {
+        bottom: 0;
+    }
+}
+
+@media (width <= 768px) {
+    .carouselArea {
+        border-top: var(--border-width-sm) solid var(--border-color-light);
+        border-bottom: var(--border-width-sm) solid var(--border-color-light);
+    }
+
+    .swiperControlsMobile {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .swiperSlide:first-child {
+        margin-left: var(--spacing-20);
+    }
+
+    .swiperSlide:last-child {
+        margin-right: var(--spacing-20);
+    }
+
+    .swiperSlide:first-child::before {
+        top: var(--spacing-28);
+        bottom: var(--spacing-28);
+    }
+
+    .swiperSlide:after {
+        top: var(--spacing-28);
+        bottom: var(--spacing-28);
+    }
+
+    .card {
+        &::before,
+        &::after {
+            display: none;
+        }
+    }
+}

package/dist/components/ProgramCard/ProgramCard.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),s=require("../Typography/Typography.cjs.js"),u=require("../Icon/Icon.cjs.js"),d=require("../Icon/constants.cjs.js"),m=require("./assets/program_card_bg.png.cjs.js"),r=require("./programCard.module.css.cjs.js"),g=a=>{if(a.type==="coming_soon")return{title:{label:a.label||"Coming Soon",variant:"headingLg",mobileVariant:"headingXxs"}};if(a.type==="active"){const{label:e,image:n,link:i,isRounded:o,withArrow:l}=a;return{title:{label:e,variant:"displayXs",mobileVariant:"headingSm"},image:n||m.default,isRounded:o,withArrow:l,link:i}}return null};function y(a){const e=g(a);if(!e)return null;const n=e.link?"a":"div";return t.jsxs(n,{href:e.link||"",className:c.cn(r.default.card,{[r.default.cardRounded]:e.isRounded}),"data-type":a.type,style:{backgroundImage:e.image?`url(${e.image})`:void 0},children:[t.jsx(s.Typography,{as:"p",defaultVariant:e.title.variant,mobileVariant:e.title.mobileVariant,className:r.default.label,children:e.title.label}),e.withArrow&&t.jsx(u.Icon,{name:d.EIconName.ARROW_FORWARD_THIN,className:r.default.arrow})]})}exports.ProgramCard=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../utils/cn/cn.cjs.js"),c=require("./assets/program_card_bg.png.cjs.js"),n=require("../../src/components/ProgramCard/programCard.module.css"),m=require("../Typography/Typography.cjs.js"),u=require("../Icon/Icon.cjs.js"),d=require("../Icon/constants.cjs.js"),g=a=>{if(a.type==="coming_soon")return{title:{label:a.label||"Coming Soon",variant:"headingLg",mobileVariant:"headingXxs"}};if(a.type==="active"){const{label:e,image:r,link:i,isRounded:o,withArrow:l}=a;return{title:{label:e,variant:"displayXs",mobileVariant:"headingSm"},image:r||c.default,isRounded:o,withArrow:l,link:i}}return null};function y(a){const e=g(a);if(!e)return null;const r=e.link?"a":"div";return t.jsxs(r,{href:e.link||"",className:s.cn(n.card,{[n.cardRounded]:e.isRounded}),"data-type":a.type,style:{backgroundImage:e.image?`url(${e.image})`:void 0},children:[t.jsx(m.Typography,{as:"p",defaultVariant:e.title.variant,mobileVariant:e.title.mobileVariant,className:n.label,children:e.title.label}),e.withArrow&&t.jsx(u.Icon,{name:d.EIconName.ARROW_FORWARD_THIN,className:n.arrow})]})}exports.ProgramCard=y;

package/dist/components/ProgramCard/ProgramCard.es.js

@@ -1,10 +1,10 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { cn as d } from "../../utils/cn/cn.es.js";
-import { Typography as s } from "../Typography/Typography.es.js";
-import { Icon as c } from "../Icon/Icon.es.js";
-import { EIconName as g } from "../Icon/constants.es.js";
-import u from "./assets/program_card_bg.png.es.js";
-import i from "./programCard.module.css.es.js";
+import s from "./assets/program_card_bg.png.es.js";
+import i from "../../components/ProgramCard/programCard.module.css";
+import { Typography as c } from "../Typography/Typography.es.js";
+import { Icon as g } from "../Icon/Icon.es.js";
+import { EIconName as u } from "../Icon/constants.es.js";
 const f = (r) => {
   if (r.type === "coming_soon")
     return {
@@ -22,7 +22,7 @@ const f = (r) => {
         variant: "displayXs",
         mobileVariant: "headingSm"
       },
-      image: e || u,
+      image: e || s,
       isRounded: o,
       withArrow: l,
       link: n
@@ -46,7 +46,7 @@ function N(r) {
       },
       children: [
         /* @__PURE__ */ t(
-          s,
+          c,
           {
             as: "p",
             defaultVariant: a.title.variant,
@@ -55,7 +55,7 @@ function N(r) {
             children: a.title.label
           }
         ),
-        a.withArrow && /* @__PURE__ */ t(c, { name: g.ARROW_FORWARD_THIN, className: i.arrow })
+        a.withArrow && /* @__PURE__ */ t(g, { name: u.ARROW_FORWARD_THIN, className: i.arrow })
       ]
     }
   );