@zenpatient-org/healthspan-marketing-ui 0.2.5 → 0.2.7

package/dist/components/ImageGallery/ImageGallery.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("swiper/modules"),d=require("swiper/react"),q=require("react"),w=require("../../utils/useSwiper/useSwiper.cjs.js"),j=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),y=require("../Label/Label.cjs.js"),x=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),P=require("../GalleryPagination/GalleryPagination.cjs.js"),_=[m.Navigation],v=({images:n,label:a,className:p,pagination:s="preview"})=>{const{activeIndex:t,handleSlideTo:c,handleSlideChange:S,onSwiperInit:h,handleSwiperResize:g,handleUserInteraction:r}=w.useSwiperWithAutoPlay(3e3),o=q.useCallback(l=>{r(),c(l)},[r,c]);return e.jsxs("div",{className:j.cn(i.root,p),children:[a&&e.jsx("div",{className:i.labelWrap,children:e.jsx(y.Label,{color:"black",size:"sm",children:a})}),e.jsx(d.Swiper,{onSwiper:h,onResize:g,onSlideChange:S,onTouchStart:r,onTouchEnd:r,modules:_,spaceBetween:0,slidesPerView:1,className:i.swiper,children:n.map((l,u)=>e.jsx(d.SwiperSlide,{children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:l,alt:"product image",className:i.image,onClick:r},u)})},u))}),s==="preview"&&n.length>1&&e.jsx(x.ImageGalleryPagination,{images:n,activeIndex:t,onSelect:o}),s==="plain"&&n.length>1&&e.jsx(P.GalleryPagination,{count:n.length,activeIndex:t,onSelect:o})]})};exports.ImageGallery=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("swiper/modules"),d=require("swiper/react"),q=require("react"),w=require("../../utils/useSwiper/useSwiper.cjs.js"),j=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),y=require("../Label/Label.cjs.js"),x=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),P=require("../GalleryPagination/GalleryPagination.cjs.js"),_=[m.Navigation],I=({images:n,label:a,className:p,pagination:s="plain"})=>{const{activeIndex:t,handleSlideTo:c,handleSlideChange:S,onSwiperInit:h,handleSwiperResize:g,handleUserInteraction:r}=w.useSwiperWithAutoPlay(3e3),o=q.useCallback(l=>{r(),c(l)},[r,c]);return e.jsxs("div",{className:j.cn(i.root,p),children:[a&&e.jsx("div",{className:i.labelWrap,children:e.jsx(y.Label,{color:"black",size:"sm",children:a})}),e.jsx(d.Swiper,{onSwiper:h,onResize:g,onSlideChange:S,onTouchStart:r,onTouchEnd:r,modules:_,spaceBetween:0,slidesPerView:1,className:i.swiper,children:n.map((l,u)=>e.jsx(d.SwiperSlide,{children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:l,alt:"product image",className:i.image,onClick:r},u)})},u))}),s==="preview"&&n.length>1&&e.jsx(x.ImageGalleryPagination,{images:n,activeIndex:t,onSelect:o}),s==="plain"&&n.length>1&&e.jsx(P.GalleryPagination,{count:n.length,activeIndex:t,onSelect:o})]})};exports.ImageGallery=I;

package/dist/components/ImageGallery/ImageGallery.es.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsxs as w, jsx as e } from "react/jsx-runtime";
-import { Navigation as f } from "swiper/modules";
-import { Swiper as g, SwiperSlide as u } from "swiper/react";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { Navigation as g } from "swiper/modules";
+import { Swiper as u, SwiperSlide as w } from "swiper/react";
 import { useCallback as v } from "react";
 import { useSwiperWithAutoPlay as I } from "../../utils/useSwiper/useSwiper.es.js";
 import { cn as N } from "../../utils/cn/cn.es.js";
@@ -12,17 +12,17 @@ import o from "../../components/ImageGallery/imageGallery.module.css";
 import { Label as P } from "../Label/Label.es.js";
 import { ImageGalleryPagination as y } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
 import { GalleryPagination as C } from "../GalleryPagination/GalleryPagination.es.js";
-const W = [f], D = ({ images: r, label: n, className: s, pagination: t = "preview" }) => {
+const W = [g], D = ({ images: r, label: n, className: s, pagination: t = "plain" }) => {
   const { activeIndex: a, handleSlideTo: m, handleSlideChange: d, onSwiperInit: h, handleSwiperResize: S, handleUserInteraction: i } = I(3e3), c = v(
     (l) => {
       i(), m(l);
     },
     [i, m]
   );
-  return /* @__PURE__ */ w("div", { className: N(o.root, s), children: [
+  return /* @__PURE__ */ f("div", { className: N(o.root, s), children: [
     n && /* @__PURE__ */ e("div", { className: o.labelWrap, children: /* @__PURE__ */ e(P, { color: "black", size: "sm", children: n }) }),
     /* @__PURE__ */ e(
-      g,
+      u,
       {
         onSwiper: h,
         onResize: S,
@@ -33,7 +33,7 @@ const W = [f], D = ({ images: r, label: n, className: s, pagination: t = "previe
         spaceBetween: 0,
         slidesPerView: 1,
         className: o.swiper,
-        children: r.map((l, p) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e("div", { className: o.imageWrapper, children: /* @__PURE__ */ e(
+        children: r.map((l, p) => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e("div", { className: o.imageWrapper, children: /* @__PURE__ */ e(
           "img",
           {
             src: l,

package/dist/components/PriceDisplay/PriceDisplay.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),c=require("../../utils/cn/cn.cjs.js"),d=require("../../utils/periodView.cjs.js"),l=({items:i})=>a.jsx("div",{className:e.root,children:i.map((r,n)=>a.jsxs("div",{className:c.cn(e.container,r.display==="double"?e.double:e.single),children:[a.jsx(s.Typography,{as:"p",defaultVariant:r.display==="double"?"bodySm":"bodyLg",className:e.description,children:r.description}),a.jsxs("div",{className:e.priceWrapper,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.prefix,children:r.prefix}),a.jsxs("div",{className:e.priceAmount,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingLg",className:e.price,children:(r.price/100).toFixed(0)}),a.jsx(s.Typography,{as:"p",defaultVariant:"headingXs",mobileVariant:"headingXxs",className:e.currency,children:"$"}),r.period!=="none"&&a.jsxs(s.Typography,{as:"p",defaultVariant:"labelMd",className:e.period,children:["/",d.shortPeriod(r.period)]})]})]})]},n))});exports.PriceDisplay=l;

package/dist/components/PriceDisplay/PriceDisplay.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+export type PriceDisplayProps = {
+    description: string;
+    prefix: string;
+    price: number;
+    period: 'none' | 'month' | 'year' | 'quarter';
+    display: 'single' | 'double';
+};
+export declare const PriceDisplay: React.FC<{
+    items: Array<PriceDisplayProps>;
+}>;

package/dist/components/PriceDisplay/PriceDisplay.es.js

@@ -0,0 +1,55 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { Typography as i } from "../Typography/Typography.es.js";
+import a from "../../components/PriceDisplay/priceDisplay.module.css";
+import { cn as o } from "../../utils/cn/cn.es.js";
+import { shortPeriod as n } from "../../utils/periodView.es.js";
+const f = ({ items: s }) => /* @__PURE__ */ e("div", { className: a.root, children: s.map((r, l) => /* @__PURE__ */ d(
+  "div",
+  {
+    className: o(a.container, r.display === "double" ? a.double : a.single),
+    children: [
+      /* @__PURE__ */ e(
+        i,
+        {
+          as: "p",
+          defaultVariant: r.display === "double" ? "bodySm" : "bodyLg",
+          className: a.description,
+          children: r.description
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: a.priceWrapper, children: [
+        /* @__PURE__ */ e(i, { as: "p", defaultVariant: "bodySm", className: a.prefix, children: r.prefix }),
+        /* @__PURE__ */ d("div", { className: a.priceAmount, children: [
+          /* @__PURE__ */ e(
+            i,
+            {
+              as: "p",
+              defaultVariant: "headingXl",
+              mobileVariant: "headingLg",
+              className: a.price,
+              children: (r.price / 100).toFixed(0)
+            }
+          ),
+          /* @__PURE__ */ e(
+            i,
+            {
+              as: "p",
+              defaultVariant: "headingXs",
+              mobileVariant: "headingXxs",
+              className: a.currency,
+              children: "$"
+            }
+          ),
+          r.period !== "none" && /* @__PURE__ */ d(i, { as: "p", defaultVariant: "labelMd", className: a.period, children: [
+            "/",
+            n(r.period)
+          ] })
+        ] })
+      ] })
+    ]
+  },
+  l
+)) });
+export {
+  f as PriceDisplay
+};

package/dist/components/PriceDisplay/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PriceDisplay';
+export type { PriceDisplayProps } from './PriceDisplay';

package/dist/components/PriceDisplay/priceDisplay.module.css

@@ -0,0 +1,88 @@
+.root {
+    display: flex;
+    gap: 2.25rem;
+}
+
+@media (max-width: 768px) {
+    .root {
+        flex-direction: column;
+        gap: 1rem;
+        padding: 0 1rem;
+    }
+
+    .root > :first-child {
+        border-right: none;
+        padding-right: 0;
+        padding-bottom: 1rem;
+    }
+}
+
+.container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 3vw;
+}
+
+.container.double {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.container.double:first-child {
+    border-right: 1px solid var(--color-neutral-200);
+}
+
+@media (max-width: 768px) {
+    .container.double {
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    .container.double:first-child {
+        border-right: none;
+        border-bottom: 1px solid var(--color-neutral-200);
+    }
+}
+
+.description {
+    flex: 1;
+    min-width: 0;
+    max-width: 25ch;
+}
+
+.priceWrapper {
+    display: flex;
+    gap: 0.25rem;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+}
+
+.prefix {
+    color: var(--color-neutral-500);
+}
+
+.priceAmount {
+    display: flex;
+    align-items: baseline;
+    line-height: 1;
+}
+
+.price {
+    grid-column: 1 / 2;
+    grid-row: 1 / 3;
+}
+
+.currency {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    align-self: flex-start;
+}
+
+.period {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+    color: var(--color-neutral-500);
+}

package/dist/components/Quote/Quote.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../Typography/Typography.cjs.js"),t=require("../../src/components/Quote/Quote.module.css"),i=require("./const.cjs.js"),u=({prefix:a,color:n,quote:l,source:s,sourcePrefix:c})=>{var o;return e.jsxs("div",{className:t.quoteContainer,children:[e.jsxs("div",{className:t.quoteContent,children:[e.jsx("img",{src:(o=i.prefixSelection[a])==null?void 0:o[n],alt:`${a} icon`,className:t.quoteIcon}),e.jsx(r.Typography,{as:"p",defaultVariant:"preambleSm",mobileVariant:"bodyXl",className:t.quoteText,children:l})]}),s&&e.jsxs(r.Typography,{as:"figcaption",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,className:t.quoteAuthor,children:[i.sourcePrefixSelection[c]," ",s]})]})};exports.Quote=u;

package/dist/components/Quote/Quote.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export type QuoteProps = {
+    prefix: 'quotation_mark';
+    color: 'indigo' | 'ochre' | 'solar' | 'grey';
+    quote: string;
+    sourcePrefix: 'hyphen' | 'dash';
+    source?: string;
+};
+export declare const Quote: React.FC<QuoteProps>;

package/dist/components/Quote/Quote.es.js

@@ -0,0 +1,31 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { Typography as l } from "../Typography/Typography.es.js";
+import e from "../../components/Quote/Quote.module.css";
+import { prefixSelection as c, sourcePrefixSelection as p } from "./const.es.js";
+const b = ({ prefix: t, color: s, quote: m, source: o, sourcePrefix: n }) => {
+  var r;
+  return /* @__PURE__ */ a("div", { className: e.quoteContainer, children: [
+    /* @__PURE__ */ a("div", { className: e.quoteContent, children: [
+      /* @__PURE__ */ i("img", { src: (r = c[t]) == null ? void 0 : r[s], alt: `${t} icon`, className: e.quoteIcon }),
+      /* @__PURE__ */ i(l, { as: "p", defaultVariant: "preambleSm", mobileVariant: "bodyXl", className: e.quoteText, children: m })
+    ] }),
+    o && /* @__PURE__ */ a(
+      l,
+      {
+        as: "figcaption",
+        defaultVariant: "labelMd",
+        mobileVariant: "labelSm",
+        emphasis: !0,
+        className: e.quoteAuthor,
+        children: [
+          p[n],
+          " ",
+          o
+        ]
+      }
+    )
+  ] });
+};
+export {
+  b as Quote
+};

package/dist/components/Quote/Quote.module.css

@@ -0,0 +1,29 @@
+.quoteContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin: 0;
+}
+
+.quoteContent {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.quoteIcon {
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: auto;
+}
+
+.quoteText {
+    margin: 0;
+}
+
+.quoteAuthor {
+    align-self: flex-end;
+    text-transform: uppercase;
+    color: var(--color-neutral-500);
+}

package/dist/components/Quote/const.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t={quotation_mark:{indigo:"https://methodical-vitality-96814f361f.media.strapiapp.com/quote_icon_e0242e7418.svg",ochre:"https://methodical-vitality-96814f361f.media.strapiapp.com/ochre_quote_9ed26a4ec7.svg",solar:"https://methodical-vitality-96814f361f.media.strapiapp.com/solar_quote_534860f311.svg",grey:"https://methodical-vitality-96814f361f.media.strapiapp.com/grey_a08b0fedad.svg"}},i={hyphen:e.jsx("span",{children:"—"}),dash:e.jsx("span",{children:"–"})};exports.prefixSelection=t;exports.sourcePrefixSelection=i;

package/dist/components/Quote/const.d.ts

@@ -0,0 +1,7 @@
+export type QuotePrefix = 'quotation_mark';
+export type QuoteColor = 'indigo' | 'ochre' | 'solar' | 'grey';
+export declare const prefixSelection: Record<QuotePrefix, Record<QuoteColor, `https://${string}`>>;
+export declare const sourcePrefixSelection: {
+    hyphen: import("react/jsx-runtime").JSX.Element;
+    dash: import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/Quote/const.es.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+const i = {
+  quotation_mark: {
+    indigo: "https://methodical-vitality-96814f361f.media.strapiapp.com/quote_icon_e0242e7418.svg",
+    ochre: "https://methodical-vitality-96814f361f.media.strapiapp.com/ochre_quote_9ed26a4ec7.svg",
+    solar: "https://methodical-vitality-96814f361f.media.strapiapp.com/solar_quote_534860f311.svg",
+    grey: "https://methodical-vitality-96814f361f.media.strapiapp.com/grey_a08b0fedad.svg"
+  }
+}, a = {
+  hyphen: /* @__PURE__ */ t("span", { children: "—" }),
+  dash: /* @__PURE__ */ t("span", { children: "–" })
+};
+export {
+  i as prefixSelection,
+  a as sourcePrefixSelection
+};

package/dist/components/Quote/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Quote';
+export type { QuoteProps } from './Quote';

package/dist/pageComponents/ScrollingFeatures/ScrollingFeatures.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../src/pageComponents/ScrollingFeatures/scrollingFeatures.module.css"),o=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),c=require("../../components/Icon/Icon.cjs.js"),a=require("../../components/Typography/Typography.cjs.js"),l=({text:n,icon:t,href:s})=>e.jsxs("a",{href:s,className:r.feature,children:[e.jsx(c.Icon,{className:r.featureIcon,name:t}),e.jsx(a.Typography,{className:r.featureText,defaultVariant:"labelMd",children:n})]}),i=({items:n})=>e.jsx("section",{className:r.root,children:n.length>0&&e.jsx("div",{className:r.featuresContainer,children:e.jsx(o.InfiniteScroll,{items:n,renderItem:l})})});exports.ScrollingFeatures=i;

package/dist/pageComponents/ScrollingFeatures/ScrollingFeatures.d.ts

@@ -0,0 +1,11 @@
+import { EIconName } from '../../components/Icon';
+
+export type TScrollingFeatureItem = {
+    icon: EIconName;
+    text: string;
+    href?: string;
+};
+export type TScrollingFeatures = {
+    items: ReadonlyArray<TScrollingFeatureItem>;
+};
+export declare const ScrollingFeatures: ({ items }: TScrollingFeatures) => import("react/jsx-runtime").JSX.Element;

package/dist/pageComponents/ScrollingFeatures/ScrollingFeatures.es.js

@@ -0,0 +1,12 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import r from "../../pageComponents/ScrollingFeatures/scrollingFeatures.module.css";
+import { InfiniteScroll as s } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
+import { Icon as l } from "../../components/Icon/Icon.es.js";
+import { Typography as c } from "../../components/Typography/Typography.es.js";
+const m = ({ text: t, icon: a, href: o }) => /* @__PURE__ */ n("a", { href: o, className: r.feature, children: [
+  /* @__PURE__ */ e(l, { className: r.featureIcon, name: a }),
+  /* @__PURE__ */ e(c, { className: r.featureText, defaultVariant: "labelMd", children: t })
+] }), h = ({ items: t }) => /* @__PURE__ */ e("section", { className: r.root, children: t.length > 0 && /* @__PURE__ */ e("div", { className: r.featuresContainer, children: /* @__PURE__ */ e(s, { items: t, renderItem: m }) }) });
+export {
+  h as ScrollingFeatures
+};

package/dist/pageComponents/ScrollingFeatures/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollingFeatures } from './ScrollingFeatures';
+export type { TScrollingFeatures } from './ScrollingFeatures';

package/dist/pageComponents/ScrollingFeatures/scrollingFeatures.module.css

@@ -0,0 +1,32 @@
+.root {
+    display: flex;
+    width: 100%;
+}
+
+.featuresContainer {
+    padding: 16px 0;
+}
+
+.feature {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 40px;
+}
+
+.featureText {
+    line-height: 110%;
+    letter-spacing: -0.42px;
+}
+
+.featureIcon {
+    margin-top: -2px;
+    width: 16px;
+    height: 16px;
+}
+
+@media screen and (width <= 768px) {
+    .feature {
+        padding: 0 24px;
+    }
+}

package/dist/utils/periodView.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=e=>{switch(e){case"month":return"mo";case"year":return"yr";case"quarter":return"qtr";case"none":default:return""}};exports.shortPeriod=r;

package/dist/utils/periodView.d.ts

@@ -0,0 +1 @@
+export declare const shortPeriod: (period: "none" | "month" | "year" | "quarter") => "" | "mo" | "yr" | "qtr";

package/dist/utils/periodView.es.js

@@ -0,0 +1,16 @@
+const e = (r) => {
+  switch (r) {
+    case "month":
+      return "mo";
+    case "year":
+      return "yr";
+    case "quarter":
+      return "qtr";
+    case "none":
+    default:
+      return "";
+  }
+};
+export {
+  e as shortPeriod
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.5",
+    "version": "0.2.7",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -160,6 +160,11 @@
             "import": "./dist/components/Tabs/Tabs.es.js",
             "require": "./dist/components/Tabs/Tabs.cjs.js"
         },
+        "./Quotes": {
+            "types": "./dist/components/Quotes/index.d.ts",
+            "import": "./dist/components/Quotes/Quotes.es.js",
+            "require": "./dist/components/Quotes/Quotes.cjs.js"
+        },
         "./StudyGridCard": {
             "types": "./dist/components/StudyGridCard/StudyGridCard.d.ts",
             "import": "./dist/components/StudyGridCard/StudyGridCard.es.js",
@@ -170,6 +175,11 @@
             "import": "./dist/components/ProgramCard/ProgramCard.es.js",
             "require": "./dist/components/ProgramCard/ProgramCard.cjs.js"
         },
+        "./PriceDisplayComponent": {
+            "types": "./dist/components/PriceDisplayComponent/PriceDisplayComponent.d.ts",
+            "import": "./dist/components/PriceDisplayComponent/PriceDisplayComponent.es.js",
+            "require": "./dist/components/PriceDisplayComponent/PriceDisplayComponent.cjs.js"
+        },
         "./ProductGalleryCard": {
             "types": "./dist/components/ProductGalleryCard/ProductGalleryCard.d.ts",
             "import": "./dist/components/ProductGalleryCard/ProductGalleryCard.es.js",
@@ -660,6 +670,11 @@
             "import": "./dist/modules/ImageWithBenefits/ImageWithBenefits.es.js",
             "require": "./dist/modules/ImageWithBenefits/ImageWithBenefits.cjs.js"
         },
+        "./ScrollingFeatures": {
+            "types": "./dist/pageComponents/ScrollingFeatures/ScrollingFeatures.d.ts",
+            "import": "./dist/pageComponents/ScrollingFeatures/ScrollingFeatures.es.js",
+            "require": "./dist/pageComponents/ScrollingFeatures/ScrollingFeatures.cjs.js"
+        },
         "./dist/*.css": "./dist/*.css",
         "./dist/**/*.module.css": "./dist/**/*.module.css",
         "./styles/core": {