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

package/dist/modules/IndividualProductCard/components/Features/Features.es.js

@@ -2,10 +2,10 @@
 import { jsx as t, jsxs as i } from "react/jsx-runtime";
 import { useState as m, useCallback as d } from "react";
 import { cn as u } from "../../../../utils/cn/cn.es.js";
-import { IconBracket as h } from "../../../../components/IconBracket/IconBracket.es.js";
+import s from "../../../../modules/IndividualProductCard/components/Features/features.module.css";
+import { TypeBadge as h } from "../../../../components/TypeBadge/TypeBadge.es.js";
 import { Typography as l } from "../../../../components/Typography/Typography.es.js";
-import { TypeBadge as b } from "../../../../components/TypeBadge/TypeBadge.es.js";
-import s from "./features.module.css.es.js";
+import { IconBracket as b } from "../../../../components/IconBracket/IconBracket.es.js";
 const V = ({ features: o }) => {
   const [a, c] = m([]), n = d((e) => {
     c((r) => r.includes(e) ? r.filter((p) => p !== e) : [...r, e]);
@@ -13,10 +13,10 @@ const V = ({ features: o }) => {
   return /* @__PURE__ */ t("div", { className: s.root, children: o.map((e, r) => /* @__PURE__ */ i("div", { className: s.feature, children: [
     /* @__PURE__ */ i("button", { className: s.header, onClick: () => n(r), children: [
       /* @__PURE__ */ i("div", { className: s.labelWrapper, children: [
-        /* @__PURE__ */ t(b, { type: e.type }, r),
+        /* @__PURE__ */ t(h, { type: e.type }, r),
         /* @__PURE__ */ t(l, { as: "span", defaultVariant: "bodySm", mobileVariant: "labelMd", weight: "regular", children: e.label })
       ] }),
-      e.description && /* @__PURE__ */ t(h, { variant: a.includes(r) ? "close" : "plus", size: "sm" })
+      e.description && /* @__PURE__ */ t(b, { variant: a.includes(r) ? "close" : "plus", size: "sm" })
     ] }),
     e.description && /* @__PURE__ */ t(
       l,

package/dist/modules/IndividualProductCard/components/Features/features.module.css

@@ -0,0 +1,54 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    border-top: var(--border-width-sm) solid var(--border-color-light);
+}
+
+.feature {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    flex-direction: column;
+    padding: 16px 0;
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+    color: var(--color-text-primary);
+}
+
+.header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0;
+    gap: 12px;
+    border: none;
+    background: none;
+    box-shadow: none;
+    cursor: pointer;
+    text-align: left;
+    color: var(--color-text-primary);
+}
+
+.labelWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    color: var(--color-text-primary);
+}
+
+.description {
+    overflow: hidden;
+    width: 100%;
+    margin: 0;
+    padding-left: 32px;
+    line-height: 0;
+    color: transparent;
+    transition: margin-top 0.3s, line-height 0.3s, color 0.3s;
+}
+
+.descriptionActive {
+    margin-top: 12px;
+    line-height: var(--line-height-lg);
+    color: var(--color-text-secondary);
+}

package/dist/modules/IndividualProductCard/components/PlanCard/PlanCard.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),d=require("../../../../components/RadioButton/RadioButton.cjs.js"),s=require("../../../../components/Typography/Typography.cjs.js"),u=require("../../../../components/Label/Label.cjs.js"),r=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../utils/formatUnits/formatUnits.cjs.js"),t=require("./planCard.module.css.cjs.js"),m=({plan:e,isActive:i,onSelect:l})=>a.jsxs("button",{className:r.cn(t.default.root,i&&t.default.active),onClick:()=>l(e.id),children:[e.featured&&a.jsx(u.Label,{color:"black",className:t.default.label,size:"sm",children:"Most popular"}),a.jsxs("div",{className:t.default.planContainer,children:[a.jsxs("div",{className:t.default.planInfo,children:[a.jsx(d.RadioButton,{checked:i}),a.jsxs("div",{className:t.default.planDetails,children:[a.jsx(s.Typography,{as:"h4",defaultVariant:"bodySm",emphasis:!0,align:"left",children:e.label}),!!e.savingsPercentage&&a.jsxs(s.Typography,{as:"p",defaultVariant:"labelXs",weight:"regular",className:t.default.savings,children:["Save ",e.savingsPercentage,"%"]})]})]}),a.jsxs("div",{className:t.default.priceDetails,children:[!!e.monthlyPrice&&a.jsxs(s.Typography,{as:"p",defaultVariant:"bodySm",weight:"regular",className:t.default.description,children:[n.formatUnits(e.monthlyPrice,"usd",0),"/mo"]}),a.jsxs("div",{className:r.cn(t.default.priceContainer),children:[e.price!==e.totalPrice&&a.jsx(s.Typography,{as:"p",defaultVariant:"labelXs",weight:"regular",className:t.default.totalPrice,children:n.formatUnits(e.price,"usd",0)}),a.jsx(s.Typography,{as:"p",defaultVariant:!e.monthlyPrice&&e.price===e.totalPrice?"bodySm":"labelXs",className:r.cn(t.default.price,{[t.default.description]:!e.monthlyPrice&&e.price===e.totalPrice}),children:n.formatUnits(e.totalPrice,"usd",0)})]})]})]}),!!e.duration&&e.duration!=="one-time"&&a.jsx("div",{className:r.cn(t.default.benefitsContainer,i&&t.default.benefitsActive),children:a.jsxs("div",{className:t.default.benefitsContent,children:[a.jsxs("div",{className:t.default.benefit,children:[a.jsx(o.Icon,{name:c.EIconName.ARROW_RETURN,className:t.default.benefitIcon}),a.jsxs(s.Typography,{as:"p",defaultVariant:"bodyXs",children:["Delivered every"," ",e.durationAmount&&e.durationAmount>1?`${e.durationAmount} months`:"month"]})]}),a.jsxs("div",{className:t.default.benefit,children:[a.jsx(o.Icon,{name:c.EIconName.CALENDAR,className:t.default.benefitIcon}),a.jsx(s.Typography,{as:"p",defaultVariant:"bodyXs",children:"Modify or cancel anytime"})]})]})})]});exports.PlanCard=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("../../../../utils/cn/cn.cjs.js"),n=require("../../../../utils/formatUnits/formatUnits.cjs.js"),t=require("../../../../src/modules/IndividualProductCard/components/PlanCard/planCard.module.css"),d=require("../../../../components/Label/Label.cjs.js"),m=require("../../../../components/RadioButton/RadioButton.cjs.js"),a=require("../../../../components/Typography/Typography.cjs.js"),o=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Icon/constants.cjs.js"),u=({plan:e,isActive:r,onSelect:l})=>s.jsxs("button",{className:i.cn(t.root,r&&t.active),onClick:()=>l(e.id),children:[e.featured&&s.jsx(d.Label,{color:"black",className:t.label,size:"sm",children:"Most popular"}),s.jsxs("div",{className:t.planContainer,children:[s.jsxs("div",{className:t.planInfo,children:[s.jsx(m.RadioButton,{checked:r}),s.jsxs("div",{className:t.planDetails,children:[s.jsx(a.Typography,{as:"h4",defaultVariant:"bodySm",emphasis:!0,align:"left",children:e.label}),!!e.savingsPercentage&&s.jsxs(a.Typography,{as:"p",defaultVariant:"labelXs",weight:"regular",className:t.savings,children:["Save ",e.savingsPercentage,"%"]})]})]}),s.jsxs("div",{className:t.priceDetails,children:[!!e.monthlyPrice&&s.jsxs(a.Typography,{as:"p",defaultVariant:"bodySm",weight:"regular",className:t.description,children:[n.formatUnits(e.monthlyPrice,"usd",0),"/mo"]}),s.jsxs("div",{className:i.cn(t.priceContainer),children:[e.price!==e.totalPrice&&s.jsx(a.Typography,{as:"p",defaultVariant:"labelXs",weight:"regular",className:t.totalPrice,children:n.formatUnits(e.price,"usd",0)}),s.jsx(a.Typography,{as:"p",defaultVariant:!e.monthlyPrice&&e.price===e.totalPrice?"bodySm":"labelXs",className:i.cn(t.price,{[t.description]:!e.monthlyPrice&&e.price===e.totalPrice}),children:n.formatUnits(e.totalPrice,"usd",0)})]})]})]}),!!e.duration&&e.duration!=="one-time"&&s.jsx("div",{className:i.cn(t.benefitsContainer,r&&t.benefitsActive),children:s.jsxs("div",{className:t.benefitsContent,children:[s.jsxs("div",{className:t.benefit,children:[s.jsx(o.Icon,{name:c.EIconName.ARROW_RETURN,className:t.benefitIcon}),s.jsxs(a.Typography,{as:"p",defaultVariant:"bodyXs",children:["Delivered every"," ",e.durationAmount&&e.durationAmount>1?`${e.durationAmount} months`:"month"]})]}),s.jsxs("div",{className:t.benefit,children:[s.jsx(o.Icon,{name:c.EIconName.CALENDAR,className:t.benefitIcon}),s.jsx(a.Typography,{as:"p",defaultVariant:"bodyXs",children:"Modify or cancel anytime"})]})]})})]});exports.PlanCard=u;

package/dist/modules/IndividualProductCard/components/PlanCard/PlanCard.es.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { Icon as n } from "../../../../components/Icon/Icon.es.js";
-import { EIconName as l } from "../../../../components/Icon/constants.es.js";
-import { RadioButton as m } from "../../../../components/RadioButton/RadioButton.es.js";
-import { Typography as t } from "../../../../components/Typography/Typography.es.js";
-import { Label as h } from "../../../../components/Label/Label.es.js";
 import { cn as s } from "../../../../utils/cn/cn.es.js";
 import { formatUnits as c } from "../../../../utils/formatUnits/formatUnits.es.js";
-import i from "./planCard.module.css.es.js";
+import i from "../../../../modules/IndividualProductCard/components/PlanCard/planCard.module.css";
+import { Label as m } from "../../../../components/Label/Label.es.js";
+import { RadioButton as h } from "../../../../components/RadioButton/RadioButton.es.js";
+import { Typography as t } from "../../../../components/Typography/Typography.es.js";
+import { Icon as n } from "../../../../components/Icon/Icon.es.js";
+import { EIconName as l } from "../../../../components/Icon/constants.es.js";
 const C = ({ plan: e, isActive: o, onSelect: d }) => /* @__PURE__ */ r("button", { className: s(i.root, o && i.active), onClick: () => d(e.id), children: [
-  e.featured && /* @__PURE__ */ a(h, { color: "black", className: i.label, size: "sm", children: "Most popular" }),
+  e.featured && /* @__PURE__ */ a(m, { color: "black", className: i.label, size: "sm", children: "Most popular" }),
   /* @__PURE__ */ r("div", { className: i.planContainer, children: [
     /* @__PURE__ */ r("div", { className: i.planInfo, children: [
-      /* @__PURE__ */ a(m, { checked: o }),
+      /* @__PURE__ */ a(h, { checked: o }),
       /* @__PURE__ */ r("div", { className: i.planDetails, children: [
         /* @__PURE__ */ a(t, { as: "h4", defaultVariant: "bodySm", emphasis: !0, align: "left", children: e.label }),
         !!e.savingsPercentage && /* @__PURE__ */ r(t, { as: "p", defaultVariant: "labelXs", weight: "regular", className: i.savings, children: [

package/dist/modules/IndividualProductCard/components/PlanCard/planCard.module.css

@@ -0,0 +1,117 @@
+.root {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border: var(--border-width-sm) solid var(--border-color-alpha-black-10);
+    border-radius: var(--border-radius-xs);
+    background: none;
+    box-shadow: none;
+    cursor: pointer;
+    padding: 0 16px;
+    color: var(--color-text-primary);
+    transition: border-color 0.3s;
+}
+
+.root:hover,
+.active {
+    border-color: var(--border-color-dark);
+}
+
+.label {
+    position: absolute;
+    top: -16px;
+    right: 16px;
+}
+
+.planContainer {
+    padding: 24px 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.planInfo {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+}
+
+.planDetails {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+}
+
+.priceDetails {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 2px;
+}
+
+.priceContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+}
+
+.savings {
+    color: var(--color-indigo-300);
+}
+
+.price {
+    color: var(--color-text-secondary);
+}
+
+.description {
+    color: var(--color-text-primary);
+}
+
+.totalPrice {
+    text-decoration: line-through;
+    color: var(--color-text-primary-disabled);
+}
+
+.benefitsContainer {
+    display: grid;
+    grid-template-rows: 0fr;
+    width: 100%;
+    overflow: hidden;
+    opacity: 0;
+    transition: grid-template-rows 0.3s, opacity 0.3s, padding-top 0.3s, padding-bottom 0.3s;
+}
+
+.benefitsActive {
+    border-top: var(--border-width-sm) solid var(--border-color-alpha-black-10);
+    grid-template-rows: 1fr;
+    padding: 16px 0;
+    opacity: 1;
+}
+
+.benefitsContent {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    width: 100%;
+    min-height: 0;
+}
+
+.benefit {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 12px;
+}
+
+.benefitIcon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+}

package/dist/modules/IndividualProductCard/individualProductCard.module.css

@@ -0,0 +1,118 @@
+.root {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: 64px 120px;
+    display: grid;
+    grid-template-columns: 300px 1fr 300px;
+    grid-template-areas: "info gallery plans";
+    gap: 64px;
+}
+
+.container.noPlans {
+    grid-template-columns: 300px 1fr;
+    grid-template-areas: "info gallery";
+    gap: 120px;
+}
+
+.info {
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    padding-top: 28px;
+}
+
+.infoHeader {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 20px;
+}
+
+.infoDescription {
+    color: var(--color-text-secondary)
+}
+
+.gallery {
+    grid-area: gallery;
+}
+
+.plansSection {
+    grid-area: plans;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding-top: 12px;
+}
+
+.plans {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 12px;
+}
+
+.planLabel {
+    color: var(--color-text-secondary);
+}
+
+.ratingContainer {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--spacing-12);
+}
+
+.actions {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+}
+
+@media (width <= 1260px) {
+    .container {
+        padding: 64px 64px;
+        grid-template-columns: 275px 1fr 275px;
+        gap: 40px;
+    }
+}
+
+@media (width <= 1024px) {
+    .container,
+    .container.noPlans {
+        padding: 24px 20px 64px;
+        grid-template-columns: 1fr 1fr;
+        gap: 24px;
+        grid-template-areas:
+            "info gallery"
+            "plans plans";
+    }
+
+    .gallery {
+        max-width: 472px;
+    }
+}
+
+@media (width <= 768px) {
+    .container,
+    .container.noPlans {
+        padding: 24px 20px 64px;
+        grid-template-columns: 1fr;
+        gap: 24px;
+        grid-template-areas:
+            "gallery"
+            "info"
+            "plans";
+    }
+}

package/dist/modules/IngredientHighlight/IngredientHighlight.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),d=require("./components/Ingredient/Ingredient.cjs.js"),n=require("./ingredientHighlight.module.css.cjs.js"),g=({items:s})=>{const[r,a]=l.useState(0),c=i=>{a(e=>e===i?e:i)};return t.jsx("section",{className:n.default.root,children:t.jsxs("div",{className:n.default.container,children:[t.jsx("div",{className:n.default.imageContainer,children:t.jsx("img",{src:s[r].image,alt:"background image",className:n.default.image})}),t.jsx("div",{className:n.default.ingredients,children:s.map((i,e)=>t.jsx(d.Ingredient,{title:i.title,description:i.description,isOpen:r===e,index:e,onClick:c},e))})]})})};exports.IngredientHighlight=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),s=require("../../src/modules/IngredientHighlight/ingredientHighlight.module.css"),o=require("./components/Ingredient/Ingredient.cjs.js"),g=({items:n})=>{const[c,r]=l.useState(0),a=i=>{r(e=>e===i?e:i)};return t.jsx("section",{className:s.root,children:t.jsxs("div",{className:s.container,children:[t.jsx("div",{className:s.imageContainer,children:t.jsx("img",{src:n[c].image,alt:"background image",className:s.image})}),t.jsx("div",{className:s.ingredients,children:n.map((i,e)=>t.jsx(o.Ingredient,{title:i.title,description:i.description,isOpen:c===e,index:e,onClick:a},e))})]})})};exports.IngredientHighlight=g;

package/dist/modules/IngredientHighlight/IngredientHighlight.es.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import { useState as m } from "react";
+import s from "../../modules/IngredientHighlight/ingredientHighlight.module.css";
 import { Ingredient as l } from "./components/Ingredient/Ingredient.es.js";
-import s from "./ingredientHighlight.module.css.es.js";
 const I = ({ items: n }) => {
   const [r, c] = m(0), o = (i) => {
     c((e) => e === i ? e : i);

package/dist/modules/IngredientHighlight/components/Ingredient/Ingredient.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../../../components/Typography/Typography.cjs.js"),i=require("../../../../utils/cn/cn.cjs.js"),r=require("./ingredient.module.css.cjs.js"),l=({title:a,description:t,isOpen:n,index:o,onClick:c})=>e.jsxs("div",{onClick:()=>c(o??0),className:i.cn(r.default.root,{[r.default.rootOpened]:n}),children:[e.jsx("div",{className:r.default.header,children:e.jsx(d.Typography,{defaultVariant:"headingXs",color:`color-text-primary${n?"":"-disabled"}`,children:a})}),!!t&&e.jsx("div",{className:i.cn(r.default.description,{[r.default.descriptionShow]:n}),children:e.jsx("div",{className:r.default.descriptionInner,children:e.jsx(d.Typography,{as:"p",defaultVariant:"bodySm",children:t})})})]});exports.Ingredient=l;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../../utils/cn/cn.cjs.js"),r=require("../../../../src/modules/IngredientHighlight/components/Ingredient/ingredient.module.css"),o=require("../../../../components/Typography/Typography.cjs.js"),l=({title:i,description:t,isOpen:s,index:n,onClick:a})=>e.jsxs("div",{onClick:()=>a(n!=null?n:0),className:c.cn(r.root,{[r.rootOpened]:s}),children:[e.jsx("div",{className:r.header,children:e.jsx(o.Typography,{defaultVariant:"headingXs",color:`color-text-primary${s?"":"-disabled"}`,children:i})}),!!t&&e.jsx("div",{className:c.cn(r.description,{[r.descriptionShow]:s}),children:e.jsx("div",{className:r.descriptionInner,children:e.jsx(o.Typography,{as:"p",defaultVariant:"bodySm",children:t})})})]});exports.Ingredient=l;

package/dist/modules/IngredientHighlight/components/Ingredient/Ingredient.es.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Typography as d } from "../../../../components/Typography/Typography.es.js";
-import { cn as a } from "../../../../utils/cn/cn.es.js";
-import r from "./ingredient.module.css.es.js";
-const f = ({ title: t, description: o, isOpen: i, index: n, onClick: c }) => /* @__PURE__ */ l("div", { onClick: () => c(n ?? 0), className: a(r.root, { [r.rootOpened]: i }), children: [
-  /* @__PURE__ */ e("div", { className: r.header, children: /* @__PURE__ */ e(d, { defaultVariant: "headingXs", color: `color-text-primary${i ? "" : "-disabled"}`, children: t }) }),
-  !!o && /* @__PURE__ */ e("div", { className: a(r.description, { [r.descriptionShow]: i }), children: /* @__PURE__ */ e("div", { className: r.descriptionInner, children: /* @__PURE__ */ e(d, { as: "p", defaultVariant: "bodySm", children: o }) }) })
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { cn as t } from "../../../../utils/cn/cn.es.js";
+import r from "../../../../modules/IngredientHighlight/components/Ingredient/ingredient.module.css";
+import { Typography as c } from "../../../../components/Typography/Typography.es.js";
+const f = ({ title: l, description: i, isOpen: e, index: a, onClick: s }) => /* @__PURE__ */ d("div", { onClick: () => s(a != null ? a : 0), className: t(r.root, { [r.rootOpened]: e }), children: [
+  /* @__PURE__ */ o("div", { className: r.header, children: /* @__PURE__ */ o(c, { defaultVariant: "headingXs", color: `color-text-primary${e ? "" : "-disabled"}`, children: l }) }),
+  !!i && /* @__PURE__ */ o("div", { className: t(r.description, { [r.descriptionShow]: e }), children: /* @__PURE__ */ o("div", { className: r.descriptionInner, children: /* @__PURE__ */ o(c, { as: "p", defaultVariant: "bodySm", children: i }) }) })
 ] });
 export {
   f as Ingredient

package/dist/modules/IngredientHighlight/components/Ingredient/ingredient.module.css

@@ -0,0 +1,41 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 24px 0;
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+    cursor: pointer;
+}
+
+.rootOpened {
+    border-color: var(--border-color-dark);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+}
+
+.description {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    width: 100%;
+    transition:
+        grid-template-rows 0.3s,
+        padding-top 0.3s;
+
+    strong,
+    b {
+        font-weight: var(--font-weight-bold);
+    }
+}
+
+.descriptionInner {
+    min-height: 0;
+}
+
+.descriptionShow {
+    grid-template-rows: 1fr;
+    padding-top: 16px;
+}

package/dist/modules/IngredientHighlight/ingredientHighlight.module.css

@@ -0,0 +1,73 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 100%;
+    gap: 64px;
+    padding: 120px 180px;
+    max-width: var(--content-max-width);
+}
+
+.imageContainer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 667px;
+    max-height: 500px;
+    overflow: hidden;
+    border-radius: var(--border-radius-lg);
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.ingredients {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 349px;
+}
+
+@media (width <= 1024px) {
+    .container {
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 24px;
+        padding: 120px 60px;
+    }
+
+    .ingredients {
+        max-width: 667px;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 24px;
+        padding: 64px 20px;
+    }
+
+    .imageContainer {
+        max-height: 250px;
+        border-radius: var(--border-radius-md);
+    }
+
+    .ingredients {
+        max-width: 100%;
+    }
+}

package/dist/modules/LongevityPathways/LongevityPathways.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),r=require("../../components/ComplexImageCarousel/ComplexImageCarousel.cjs.js"),t=require("./longevityPathways.module.css.cjs.js"),n=require("../../utils/cn/cn.cjs.js"),c=({view:l,label:a,title:i,carousel:s})=>e.jsxs("section",{className:t.default.root,children:[e.jsx("div",{className:n.cn(t.default.header,{[t.default.complex]:l==="complex"}),children:e.jsx(o.HighlightedTitle,{title:i,label:a,className:t.default.title,defaultVariant:"displayMd",mobileVariant:"headingLg"})}),e.jsx(r.ComplexImageCarousel,{images:s,view:l})]});exports.LongevityPathways=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../src/modules/LongevityPathways/longevityPathways.module.css"),a=require("../../utils/cn/cn.cjs.js"),n=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),r=require("../../components/ComplexImageCarousel/ComplexImageCarousel.cjs.js"),c=({view:s,label:i,title:l,carousel:o})=>e.jsxs("section",{className:t.root,children:[e.jsx("div",{className:a.cn(t.header,{[t.complex]:s==="complex"}),children:e.jsx(n.HighlightedTitle,{title:l,label:i,className:t.title,defaultVariant:"displayMd",mobileVariant:"headingLg"})}),e.jsx(r.ComplexImageCarousel,{images:o,view:s})]});exports.LongevityPathways=c;

package/dist/modules/LongevityPathways/LongevityPathways.es.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { HighlightedTitle as s } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
-import { ComplexImageCarousel as l } from "../../components/ComplexImageCarousel/ComplexImageCarousel.es.js";
-import e from "./longevityPathways.module.css.es.js";
-import { cn as c } from "../../utils/cn/cn.es.js";
+import e from "../../modules/LongevityPathways/longevityPathways.module.css";
+import { cn as s } from "../../utils/cn/cn.es.js";
+import { HighlightedTitle as l } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { ComplexImageCarousel as c } from "../../components/ComplexImageCarousel/ComplexImageCarousel.es.js";
 const f = ({ view: t, label: i, title: r, carousel: a }) => /* @__PURE__ */ m("section", { className: e.root, children: [
   /* @__PURE__ */ o(
     "div",
     {
-      className: c(e.header, {
+      className: s(e.header, {
         [e.complex]: t === "complex"
       }),
       children: /* @__PURE__ */ o(
-        s,
+        l,
         {
           title: r,
           label: i,
@@ -23,7 +23,7 @@ const f = ({ view: t, label: i, title: r, carousel: a }) => /* @__PURE__ */ m("s
       )
     }
   ),
-  /* @__PURE__ */ o(l, { images: a, view: t })
+  /* @__PURE__ */ o(c, { images: a, view: t })
 ] });
 export {
   f as LongevityPathways

package/dist/modules/LongevityPathways/longevityPathways.module.css

@@ -0,0 +1,39 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing-120) 0;
+}
+
+.header {
+    white-space: pre-line;
+    position: relative;
+    padding: 0 var(--spacing-120);
+    margin: 0 auto var(--spacing-20);
+    max-width: var(--content-max-width);
+    text-wrap: pretty;
+
+    @media (width <= 768px) {
+        padding: 0;
+        margin: 0 auto var(--spacing-16);
+        width: 90%;
+    }
+}
+
+.title {
+    max-width: 90ch;
+
+    @media (width <= 768px) {
+        max-width: 100%;
+    }
+}
+
+.complex {
+    padding: 0;
+    width: 82vw;
+    h2 {
+        margin: 0;
+    }
+    @media (width <= 768px) {
+        width: 90vw;
+    }
+}

package/dist/modules/OptimalHealth/OptimalHealth.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../components/Button/Button.cjs.js"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),c=require("../../components/Typography/Typography.cjs.js"),s=require("../../utils/cn/cn.cjs.js"),d=require("./components/ClockImages/ClockImages.cjs.js"),t=require("./optimalHealth.module.css.cjs.js"),u=({title:l,description:r,link:a,images:n})=>e.jsx("section",{className:t.default.root,children:e.jsx("div",{className:t.default.container,children:e.jsxs("div",{className:t.default.wrapper,children:[e.jsx(d.ClockImages,{images:n}),e.jsxs("div",{className:t.default.content,children:[e.jsx(o.HighlightedTitle,{title:l,className:t.default.title,defaultVariant:"displaySm",mobileVariant:"headingLg"}),e.jsx(c.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:t.default.description,children:r}),e.jsx("div",{className:s.cn(t.default.actions,t.default.desktop),children:e.jsx(i.Button,{as:"a",variant:"primary",size:"lg",href:a,children:"LEARN MORE"})}),e.jsx("div",{className:s.cn(t.default.actions,t.default.mobile),children:e.jsx(i.Button,{as:"a",variant:"primary",size:"sm",href:a,children:"LEARN MORE"})})]})]})})});exports.OptimalHealth=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn/cn.cjs.js"),s=require("../../src/modules/OptimalHealth/optimalHealth.module.css"),l=require("./components/ClockImages/ClockImages.cjs.js"),o=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),a=require("../../components/Button/Button.cjs.js"),m=({title:n,description:r,link:i,images:c})=>e.jsx("section",{className:s.root,children:e.jsx("div",{className:s.container,children:e.jsxs("div",{className:s.wrapper,children:[e.jsx(l.ClockImages,{images:c}),e.jsxs("div",{className:s.content,children:[e.jsx(o.HighlightedTitle,{title:n,className:s.title,defaultVariant:"displaySm",mobileVariant:"headingLg"}),e.jsx(d.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:s.description,children:r}),e.jsx("div",{className:t.cn(s.actions,s.desktop),children:e.jsx(a.Button,{as:"a",variant:"primary",size:"lg",href:i,children:"LEARN MORE"})}),e.jsx("div",{className:t.cn(s.actions,s.mobile),children:e.jsx(a.Button,{as:"a",variant:"primary",size:"sm",href:i,children:"LEARN MORE"})})]})]})})});exports.OptimalHealth=m;