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

package/dist/components/Button/Button.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("react"),v=require("../../utils/cn/cn.cjs.js"),c=require("../Icon/Icon.cjs.js"),t=require("./button.module.css.cjs.js"),o=q.forwardRef(({variant:r="primary",size:l="md",as:u="button",disabled:s=!1,children:i,prefixIcon:n,suffixIcon:a,...d},m)=>{const f=t.default[r]||"",j=t.default[l]||"",b=s?t.default.disabled:"";return e.jsx(u,{ref:m,...d,className:v.cn(t.default.button,f,j,b),disabled:s,children:e.jsxs("div",{className:t.default.content,children:[n&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(c.Icon,{name:n})}),e.jsx("div",{children:i}),a&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(c.Icon,{name:a})})]})})});o.displayName="Button";exports.Button=o;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),N=require("../../utils/cn/cn.cjs.js"),u=require("../Icon/Icon.cjs.js"),t=require("./button.module.css.cjs.js"),d=y.forwardRef(({variant:r="primary",size:m="md",as:f="button",disabled:a=!1,children:j,prefixIcon:s,suffixIcon:c,analyticsProps:l,...n},b)=>{const v=t.default[r]||"",q=t.default[m]||"",C=a?t.default.disabled:"",h=x=>{var i,o;l&&((i=window.eventBus)==null||i.emit("analytics",l)),(o=n.onClick)==null||o.call(n,x)};return e.jsx(f,{ref:b,...n,className:N.cn(t.default.button,v,q,C),disabled:a,onClick:h,"data-type":"button",children:e.jsxs("div",{className:t.default.content,children:[s&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(u.Icon,{name:s})}),e.jsx("div",{children:j}),c&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(u.Icon,{name:c})})]})})});d.displayName="Button";exports.Button=d;

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,6 @@
 import { default as React, ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
 import { EIconName } from '../Icon';
+import { TAnalyticsEvent } from '../../types/analytics';
 
 type ButtonVariant = 'primary' | 'primary-invert' | 'secondary' | 'muted' | 'muted-invert' | 'ghost';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -9,6 +10,8 @@ interface BaseButtonProps {
     as?: ElementType;
     prefixIcon?: EIconName;
     suffixIcon?: EIconName;
+    analyticsProps?: TAnalyticsEvent;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
 }
 export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "className"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Button/Button.es.js

@@ -1,38 +1,44 @@
 "use client";
-import { jsx as a, jsxs as v } from "react/jsx-runtime";
-import { forwardRef as N } from "react";
-import { cn as h } from "../../utils/cn/cn.es.js";
-import { Icon as n } from "../Icon/Icon.es.js";
-import s from "./button.module.css.es.js";
-const b = N(
+import { jsx as n, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { cn as B } from "../../utils/cn/cn.es.js";
+import { Icon as m } from "../Icon/Icon.es.js";
+import t from "./button.module.css.es.js";
+const j = w(
   ({
-    variant: e = "primary",
-    size: i = "md",
-    as: m = "button",
-    disabled: t = !1,
-    children: c,
-    prefixIcon: r,
-    suffixIcon: o,
-    ...l
-  }, d) => {
-    const p = s[e] || "", f = s[i] || "", u = t ? s.disabled : "";
-    return /* @__PURE__ */ a(
-      m,
+    variant: r = "primary",
+    size: d = "md",
+    as: u = "button",
+    disabled: e = !1,
+    children: f,
+    prefixIcon: i,
+    suffixIcon: s,
+    analyticsProps: o,
+    ...a
+  }, v) => {
+    const C = t[r] || "", h = t[d] || "", N = e ? t.disabled : "", b = (y) => {
+      var c, l;
+      o && ((c = window.eventBus) == null || c.emit("analytics", o)), (l = a.onClick) == null || l.call(a, y);
+    };
+    return /* @__PURE__ */ n(
+      u,
       {
-        ref: d,
-        ...l,
-        className: h(s.button, p, f, u),
-        disabled: t,
-        children: /* @__PURE__ */ v("div", { className: s.content, children: [
-          r && /* @__PURE__ */ a("div", { className: s.iconWrap, children: /* @__PURE__ */ a(n, { name: r }) }),
-          /* @__PURE__ */ a("div", { children: c }),
-          o && /* @__PURE__ */ a("div", { className: s.iconWrap, children: /* @__PURE__ */ a(n, { name: o }) })
+        ref: v,
+        ...a,
+        className: B(t.button, C, h, N),
+        disabled: e,
+        onClick: b,
+        "data-type": "button",
+        children: /* @__PURE__ */ k("div", { className: t.content, children: [
+          i && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: i }) }),
+          /* @__PURE__ */ n("div", { children: f }),
+          s && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: s }) })
         ] })
       }
     );
   }
 );
-b.displayName = "Button";
+j.displayName = "Button";
 export {
-  b as Button
+  j as Button
 };

package/dist/components/Callback/Callback.d.ts

@@ -9,5 +9,6 @@ export type CallbackProps = {
     button: ButtonProps;
     size: CallbackSize;
     shape?: CallbackShape;
+    onClick?: () => void;
 };
 export declare const Callback: ({ image, title, description, price, button, size, shape, }: CallbackProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Pricing/Pricing.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../utils/cn/cn.cjs.js"),t=require("../Button/Button.cjs.js"),c=require("../Label/Label.cjs.js"),o=require("../Typography/Typography.cjs.js"),m=require("./components/BenefitItem/BenefitItem.cjs.js"),a=require("./pricing.module.css.cjs.js"),g=({label:i,price:d,items:u,link:r,button:s})=>e.jsxs("div",{className:a.default.root,children:[e.jsx(c.Label,{size:"lg",color:i.color,className:n.cn(a.default.pricingLabel,a.default.pricingLabelDesktop),children:i.label}),e.jsx(c.Label,{size:"sm",color:i.color,className:n.cn(a.default.pricingLabel,a.default.pricingLabelMobile),children:i.label}),e.jsxs("p",{className:a.default.pricing,children:[e.jsx(o.Typography,{as:"span",defaultVariant:"displayMd",mobileVariant:"displaySm",className:a.default.pricingTextPrimary,children:`$${d}`}),e.jsx(o.Typography,{as:"span",defaultVariant:"headingSm",mobileVariant:"headingXs",className:a.default.pricingTextSecondary,children:"/ mo"})]}),e.jsx("div",{className:a.default.benefits,children:u.map((l,p)=>e.jsx(m.BenefitItem,{badge:l.badge,label:l.label},p))}),e.jsx("div",{className:a.default.pricingButtonContainerDesktop,children:e.jsx(t.Button,{...s,size:"lg",as:"a",href:r,children:"GET STARTED"})}),e.jsx("div",{className:a.default.pricingButtonContainerMobile,children:e.jsx(t.Button,{...s,size:"md",as:"a",href:r,children:"GET STARTED"})}),e.jsx("div",{className:a.default.leftBorder}),e.jsx("div",{className:a.default.rightBorder})]});exports.Pricing=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),l=require("../Button/Button.cjs.js"),o=require("../Label/Label.cjs.js"),d=require("../Typography/Typography.cjs.js"),h=require("./components/BenefitItem/BenefitItem.cjs.js"),a=require("./pricing.module.css.cjs.js"),p=require("../../types/analytics/analytics.cjs.js"),b=({label:i,price:u,items:m,link:t,button:n,zenpatientId:g,element:y})=>{const s={event:p.EAnalyticsEvent.ctaClicked,type:p.EAnalyticsEventType.interaction,component:"Pricing",element:y,payload:{ctaLabel:"GET STARTED",ctaLink:t,productId:g}};return e.jsxs("div",{className:a.default.root,children:[e.jsx(o.Label,{size:"lg",color:i.color,className:c.cn(a.default.pricingLabel,a.default.pricingLabelDesktop),children:i.label}),e.jsx(o.Label,{size:"sm",color:i.color,className:c.cn(a.default.pricingLabel,a.default.pricingLabelMobile),children:i.label}),e.jsxs("p",{className:a.default.pricing,children:[e.jsx(d.Typography,{as:"span",defaultVariant:"displayMd",mobileVariant:"displaySm",className:a.default.pricingTextPrimary,children:`$${u}`}),e.jsx(d.Typography,{as:"span",defaultVariant:"headingSm",mobileVariant:"headingXs",className:a.default.pricingTextSecondary,children:"/ mo"})]}),e.jsx("div",{className:a.default.benefits,children:m.map((r,f)=>e.jsx(h.BenefitItem,{badge:r.badge,label:r.label},f))}),e.jsx("div",{className:a.default.pricingButtonContainerDesktop,children:e.jsx(l.Button,{...n,size:"lg",as:"a",href:t,analyticsProps:s,children:"GET STARTED"})}),e.jsx("div",{className:a.default.pricingButtonContainerMobile,children:e.jsx(l.Button,{...n,size:"md",as:"a",href:t,analyticsProps:s,children:"GET STARTED"})}),e.jsx("div",{className:a.default.leftBorder}),e.jsx("div",{className:a.default.rightBorder})]})};exports.Pricing=b;

package/dist/components/Pricing/Pricing.d.ts

@@ -1,3 +1,3 @@
 import { PricingElementView } from './types';
 
-export declare const Pricing: ({ label, price, items, link, button }: PricingElementView) => import("react/jsx-runtime").JSX.Element;
+export declare const Pricing: ({ label, price, items, link, button, zenpatientId, element }: PricingElementView) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Pricing/Pricing.es.js

@@ -1,41 +1,55 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { cn as n } from "../../utils/cn/cn.es.js";
-import { Button as c } from "../Button/Button.es.js";
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { cn as o } from "../../utils/cn/cn.es.js";
+import { Button as l } from "../Button/Button.es.js";
 import { Label as m } from "../Label/Label.es.js";
-import { Typography as t } from "../Typography/Typography.es.js";
-import { BenefitItem as h } from "./components/BenefitItem/BenefitItem.es.js";
+import { Typography as p } from "../Typography/Typography.es.js";
+import { BenefitItem as b } from "./components/BenefitItem/BenefitItem.es.js";
 import i from "./pricing.module.css.es.js";
-const u = ({ label: r, price: d, items: p, link: a, button: s }) => /* @__PURE__ */ o("div", { className: i.root, children: [
-  /* @__PURE__ */ e(m, { size: "lg", color: r.color, className: n(i.pricingLabel, i.pricingLabelDesktop), children: r.label }),
-  /* @__PURE__ */ e(m, { size: "sm", color: r.color, className: n(i.pricingLabel, i.pricingLabelMobile), children: r.label }),
-  /* @__PURE__ */ o("p", { className: i.pricing, children: [
-    /* @__PURE__ */ e(
-      t,
-      {
-        as: "span",
-        defaultVariant: "displayMd",
-        mobileVariant: "displaySm",
-        className: i.pricingTextPrimary,
-        children: `$${d}`
-      }
-    ),
-    /* @__PURE__ */ e(
-      t,
-      {
-        as: "span",
-        defaultVariant: "headingSm",
-        mobileVariant: "headingXs",
-        className: i.pricingTextSecondary,
-        children: "/ mo"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e("div", { className: i.benefits, children: p.map((l, g) => /* @__PURE__ */ e(h, { badge: l.badge, label: l.label }, g)) }),
-  /* @__PURE__ */ e("div", { className: i.pricingButtonContainerDesktop, children: /* @__PURE__ */ e(c, { ...s, size: "lg", as: "a", href: a, children: "GET STARTED" }) }),
-  /* @__PURE__ */ e("div", { className: i.pricingButtonContainerMobile, children: /* @__PURE__ */ e(c, { ...s, size: "md", as: "a", href: a, children: "GET STARTED" }) }),
-  /* @__PURE__ */ e("div", { className: i.leftBorder }),
-  /* @__PURE__ */ e("div", { className: i.rightBorder })
-] });
+import { EAnalyticsEventType as T, EAnalyticsEvent as E } from "../../types/analytics/analytics.es.js";
+const D = ({ label: e, price: d, items: g, link: r, button: n, zenpatientId: h, element: f }) => {
+  const c = {
+    event: E.ctaClicked,
+    type: T.interaction,
+    component: "Pricing",
+    element: f,
+    payload: {
+      ctaLabel: "GET STARTED",
+      ctaLink: r,
+      productId: h
+    }
+  };
+  return /* @__PURE__ */ t("div", { className: i.root, children: [
+    /* @__PURE__ */ a(m, { size: "lg", color: e.color, className: o(i.pricingLabel, i.pricingLabelDesktop), children: e.label }),
+    /* @__PURE__ */ a(m, { size: "sm", color: e.color, className: o(i.pricingLabel, i.pricingLabelMobile), children: e.label }),
+    /* @__PURE__ */ t("p", { className: i.pricing, children: [
+      /* @__PURE__ */ a(
+        p,
+        {
+          as: "span",
+          defaultVariant: "displayMd",
+          mobileVariant: "displaySm",
+          className: i.pricingTextPrimary,
+          children: `$${d}`
+        }
+      ),
+      /* @__PURE__ */ a(
+        p,
+        {
+          as: "span",
+          defaultVariant: "headingSm",
+          mobileVariant: "headingXs",
+          className: i.pricingTextSecondary,
+          children: "/ mo"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: i.benefits, children: g.map((s, y) => /* @__PURE__ */ a(b, { badge: s.badge, label: s.label }, y)) }),
+    /* @__PURE__ */ a("div", { className: i.pricingButtonContainerDesktop, children: /* @__PURE__ */ a(l, { ...n, size: "lg", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
+    /* @__PURE__ */ a("div", { className: i.pricingButtonContainerMobile, children: /* @__PURE__ */ a(l, { ...n, size: "md", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
+    /* @__PURE__ */ a("div", { className: i.leftBorder }),
+    /* @__PURE__ */ a("div", { className: i.rightBorder })
+  ] });
+};
 export {
-  u as Pricing
+  D as Pricing
 };

package/dist/components/Pricing/types.d.ts

@@ -3,6 +3,7 @@ import { LabelColor } from '../Label';
 import { ETypeBadge } from '../TypeBadge';
 
 export type PricingElementView = {
+    zenpatientId: string;
     label: {
         label: string;
         color: LabelColor;
@@ -12,6 +13,9 @@ export type PricingElementView = {
         label: string;
     }>;
     price: number;
-    button: ButtonProps;
+    button: ButtonProps & {
+        onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
+    };
     link: string;
+    element: 'left_card' | 'right_card';
 };

package/dist/components/ProductGallery/ProductGallery.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),q=require("../../node_modules/swiper/modules/navigation.cjs.js"),p=require("../../node_modules/swiper/swiper-react.cjs.js"),f=require("../../utils/cn/cn.cjs.js"),x=require("../../utils/useSwiper/useSwiper.cjs.js"),h=require("../ProgressButton/ProgressButton.cjs.js"),j=require("../ProductGalleryCard/ProductGalleryCard.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const r=require("./productGallery.module.css.cjs.js"),b=[q.default],v=({slides:i,header:m,isTabbed:l=!1})=>{const{swiper:t,activeIndex:n,isEnd:a,setIsEnd:w,hideNav:S,handleSlideChange:g,handlePrevClick:o,handleNextClick:c,onSwiperInit:C,handleSwiperResize:P,handleSlideTo:d}=x.useSwiper();return u.useEffect(()=>{t==null||t.setProgress(0,300)},[t]),u.useEffect(()=>{i.length&&d(0)},[i,d]),e.jsxs("div",{className:r.default.root,children:[e.jsxs("div",{className:f.cn(r.default.topRow,{[r.default.topRowTabbed]:l}),children:[e.jsx("div",{className:r.default.headerWrapper,children:m}),e.jsx("div",{className:f.cn(r.default.swiperControlsDesktop,{[r.default.swiperControlsHidden]:S,[r.default.swiperControlsTabbed]:l}),children:e.jsx(h.ProgressButton,{left:{disabled:n<=0,onClick:o},right:{disabled:a,onClick:c}})})]}),e.jsx("div",{className:r.default.carouselArea,children:e.jsx(p.Swiper,{onSwiper:C,onResize:P,onSlideChange:g,onReachEnd:()=>w(!0),modules:b,spaceBetween:0,slidesPerView:"auto",className:r.default.swiper,children:i.map(s=>e.jsx(p.SwiperSlide,{className:r.default.swiperSlide,children:e.jsx(j.ProductGalleryCard,{name:s.name,price:s.price,image:s.image,link:s.link,buttons:s.buttons})},`${s.name}_${s.link}`))})}),e.jsx("div",{className:r.default.swiperControlsMobile,children:e.jsx(h.ProgressButton,{left:{disabled:n<=0,onClick:o},right:{disabled:a,onClick:c}})})]})};exports.ProductGallery=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),q=require("../../node_modules/swiper/modules/navigation.cjs.js"),p=require("../../node_modules/swiper/swiper-react.cjs.js"),f=require("../../utils/cn/cn.cjs.js"),x=require("../../utils/useSwiper/useSwiper.cjs.js"),h=require("../ProgressButton/ProgressButton.cjs.js"),j=require("../ProductGalleryCard/ProductGalleryCard.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const r=require("./productGallery.module.css.cjs.js"),b=[q.default],v=({slides:n,header:m,isTabbed:i=!1})=>{const{swiper:s,activeIndex:a,isEnd:l,setIsEnd:w,hideNav:S,handleSlideChange:g,handlePrevClick:o,handleNextClick:d,onSwiperInit:C,handleSwiperResize:P,handleSlideTo:c}=x.useSwiper();return u.useEffect(()=>{s==null||s.setProgress(0,300)},[s]),u.useEffect(()=>{n.length&&c(0)},[n,c]),e.jsxs("div",{className:r.default.root,children:[e.jsxs("div",{className:f.cn(r.default.topRow,{[r.default.topRowTabbed]:i}),children:[e.jsx("div",{className:r.default.headerWrapper,children:m}),e.jsx("div",{className:f.cn(r.default.swiperControlsDesktop,{[r.default.swiperControlsHidden]:S,[r.default.swiperControlsTabbed]:i}),children:e.jsx(h.ProgressButton,{left:{disabled:a<=0,onClick:o},right:{disabled:l,onClick:d}})})]}),e.jsx("div",{className:r.default.carouselArea,children:e.jsx(p.Swiper,{onSwiper:C,onResize:P,onSlideChange:g,onReachEnd:()=>w(!0),modules:b,spaceBetween:0,slidesPerView:"auto",className:r.default.swiper,children:n.map(t=>e.jsx(p.SwiperSlide,{className:r.default.swiperSlide,children:e.jsx(j.ProductGalleryCard,{name:t.name,price:t.price,image:t.image,link:t.link,buttons:t.buttons,zenpatientId:t.zenpatientId})},`${t.name}_${t.link}`))})}),e.jsx("div",{className:r.default.swiperControlsMobile,children:e.jsx(h.ProgressButton,{left:{disabled:a<=0,onClick:o},right:{disabled:l,onClick:d}})})]})};exports.ProductGallery=v;

package/dist/components/ProductGallery/ProductGallery.es.js

@@ -11,7 +11,7 @@ import { ProductGalleryCard as E } from "../ProductGalleryCard/ProductGalleryCar
 /* empty css                                                  */
 /* empty css                                                  */
 import e from "./productGallery.module.css.es.js";
-const R = [k], $ = ({ slides: n, header: w, isTabbed: t = !1 }) => {
+const I = [k], $ = ({ slides: n, header: w, isTabbed: t = !1 }) => {
   const {
     swiper: o,
     activeIndex: a,
@@ -70,7 +70,7 @@ const R = [k], $ = ({ slides: n, header: w, isTabbed: t = !1 }) => {
         onResize: g,
         onSlideChange: S,
         onReachEnd: () => u(!0),
-        modules: R,
+        modules: I,
         spaceBetween: 0,
         slidesPerView: "auto",
         className: e.swiper,
@@ -81,7 +81,8 @@ const R = [k], $ = ({ slides: n, header: w, isTabbed: t = !1 }) => {
             price: i.price,
             image: i.image,
             link: i.link,
-            buttons: i.buttons
+            buttons: i.buttons,
+            zenpatientId: i.zenpatientId
           }
         ) }, `${i.name}_${i.link}`))
       }

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../Button/Button.cjs.js"),s=require("../Typography/Typography.cjs.js"),c=require("../../utils/cn/cn.cjs.js"),a=require("./productGalleryCard.module.css.cjs.js"),m=({name:i,price:u,image:d,link:p,buttons:t,isHoverable:n=!0})=>e.jsxs("a",{href:p,rel:"noopener noreferrer",className:a.default.root,children:[e.jsxs("div",{className:a.default.productInfo,children:[e.jsx(s.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:a.default.title,children:i}),e.jsx(s.Typography,{defaultVariant:"labelXl",mobileVariant:"labelLg",className:a.default.price,children:u})]}),e.jsx("img",{src:d,alt:"product image",className:a.default.productImage}),e.jsx("div",{className:c.cn(a.default.buttonContainerDesktop,n&&a.default.hoverableButtons),children:t.map((r,l)=>e.jsx(o.Button,{size:"sm",...r,children:r.label},l))}),e.jsx("div",{className:c.cn(a.default.buttonContainerMobile,n&&a.default.hoverableButtons),children:t.map((r,l)=>e.jsx(o.Button,{size:"xs",...r,children:r.label},l))})]});exports.ProductGalleryCard=m;
+"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;

package/dist/components/ProductGalleryCard/ProductGalleryCard.d.ts

@@ -3,5 +3,5 @@ import { TProductGalleryCardView } from './types';
 type ProductGalleryCardProps = {
     isHoverable?: boolean;
 } & TProductGalleryCardView;
-export declare const ProductGalleryCard: ({ name, price, image, link, buttons, isHoverable, }: ProductGalleryCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductGalleryCard: ({ name, price, image, zenpatientId, link, buttons, isHoverable, }: ProductGalleryCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,25 +1,54 @@
 "use client";
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { Button as s } from "../Button/Button.es.js";
-import { Typography as n } from "../Typography/Typography.es.js";
-import { cn as m } from "../../utils/cn/cn.es.js";
-import e from "./productGalleryCard.module.css.es.js";
-const v = ({
-  name: c,
-  price: d,
-  image: p,
-  link: h,
-  buttons: o,
-  isHoverable: t = !0
-}) => /* @__PURE__ */ i("a", { href: h, rel: "noopener noreferrer", className: e.root, children: [
-  /* @__PURE__ */ i("div", { className: e.productInfo, children: [
-    /* @__PURE__ */ r(n, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: e.title, children: c }),
-    /* @__PURE__ */ r(n, { defaultVariant: "labelXl", mobileVariant: "labelLg", className: e.price, children: d })
-  ] }),
-  /* @__PURE__ */ r("img", { src: p, alt: "product image", className: e.productImage }),
-  /* @__PURE__ */ r("div", { className: m(e.buttonContainerDesktop, t && e.hoverableButtons), children: o.map((a, l) => /* @__PURE__ */ r(s, { size: "sm", ...a, children: a.label }, l)) }),
-  /* @__PURE__ */ r("div", { className: m(e.buttonContainerMobile, t && e.hoverableButtons), children: o.map((a, l) => /* @__PURE__ */ r(s, { size: "xs", ...a, children: a.label }, l)) })
-] });
+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";
+const k = ({
+  name: l,
+  price: f,
+  image: v,
+  zenpatientId: o,
+  link: c,
+  buttons: n,
+  isHoverable: i = !0
+}) => {
+  const C = () => {
+    var a;
+    const e = {
+      event: h.productGalleryCardClicked,
+      type: y.interaction,
+      component: "ProductGalleryCard",
+      element: "card",
+      payload: {
+        zenpatientId: o,
+        link: c,
+        productName: l
+      }
+    };
+    (a = window.eventBus) == null || a.emit("analytics", e);
+  }, s = (e, a) => ({
+    event: h.ctaClicked,
+    type: y.interaction,
+    component: "ProductGalleryCard",
+    element: `button_${a}`,
+    payload: {
+      ctaLabel: e.label,
+      productId: o,
+      productName: l
+    }
+  });
+  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("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)) })
+  ] });
+};
 export {
-  v as ProductGalleryCard
+  k as ProductGalleryCard
 };

package/dist/components/ProductGalleryCard/types.d.ts

@@ -4,6 +4,7 @@ export type TProductGalleryCardView = {
     name: string;
     price: string;
     image: string;
+    zenpatientId: string;
     link: string;
     buttons: Array<{
         label: string;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),n=require("../Button/Button.cjs.js"),h=require("../Label/Label.cjs.js"),y=require("../TypeBadge/TypeBadge.cjs.js"),t=require("../Typography/Typography.cjs.js"),a=require("./productListing.module.css.cjs.js"),g=({name:d,description:o,image:u,price:p,buttons:i,features:m,label:r})=>e.jsxs("section",{className:a.default.root,children:[e.jsxs("div",{className:a.default.imageWrapper,children:[e.jsx("img",{src:u,alt:d,className:a.default.image}),r&&e.jsx(h.Label,{color:"black",size:"sm",className:a.default.label,children:r})]}),e.jsxs("div",{className:a.default.content,children:[e.jsxs("div",{className:a.default.header,children:[e.jsx(t.Typography,{as:"h3",defaultVariant:"headingXl",mobileVariant:"headingMd",children:d}),e.jsx(t.Typography,{as:"p",defaultVariant:"bodySm",children:o})]}),e.jsx("div",{className:a.default.features,children:m.map((s,l)=>e.jsxs("div",{className:a.default.feature,children:[e.jsx(y.TypeBadge,{type:s.type},l),e.jsx(t.Typography,{as:"span",defaultVariant:"bodyMd",className:a.default.featureLabel,children:s.label})]},`${s.label}-${l}`))}),e.jsx("div",{className:a.default.divider}),e.jsx(t.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodyMd",emphasis:!0,children:p}),e.jsx("div",{className:c.cn(a.default.actions,a.default.desktop),children:i.map((s,l)=>e.jsx(n.Button,{...s,size:"lg",children:s.label},l))}),e.jsx("div",{className:c.cn(a.default.actions,a.default.mobile),children:i.map((s,l)=>e.jsx(n.Button,{...s,size:"md",children:s.label},l))})]})]});exports.ProductListing=g;
+"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;

package/dist/components/ProductListing/ProductListing.d.ts

@@ -14,6 +14,8 @@ type ProductListingProps = {
         label: string;
     } & ButtonProps>;
     label?: string;
+    zenpatientId?: string;
+    analyticsLocation: string;
 };
-export declare const ProductListing: ({ name, description, image, price, buttons, features, label }: ProductListingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductListing: ({ name, description, image, price, buttons, features, label, zenpatientId, }: ProductListingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,30 +1,53 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { cn as o } from "../../utils/cn/cn.es.js";
-import { Button as t } from "../Button/Button.es.js";
-import { Label as N } from "../Label/Label.es.js";
-import { TypeBadge as b } from "../TypeBadge/TypeBadge.es.js";
+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 { 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";
-const M = ({ name: d, description: n, image: p, price: h, buttons: m, features: f, label: c }) => /* @__PURE__ */ r("section", { className: a.root, children: [
-  /* @__PURE__ */ r("div", { className: a.imageWrapper, children: [
-    /* @__PURE__ */ e("img", { src: p, alt: d, className: a.image }),
-    c && /* @__PURE__ */ e(N, { color: "black", size: "sm", className: a.label, children: c })
-  ] }),
-  /* @__PURE__ */ r("div", { className: a.content, children: [
-    /* @__PURE__ */ r("div", { className: a.header, children: [
-      /* @__PURE__ */ e(s, { as: "h3", defaultVariant: "headingXl", mobileVariant: "headingMd", children: d }),
-      /* @__PURE__ */ e(s, { as: "p", defaultVariant: "bodySm", children: n })
+const T = ({
+  name: t,
+  description: p,
+  image: h,
+  price: y,
+  buttons: c,
+  features: f,
+  label: d,
+  zenpatientId: v
+}) => {
+  const o = (e, l) => ({
+    event: b.ctaClicked,
+    type: N.interaction,
+    component: "ProductListing",
+    element: `button_${l}`,
+    payload: {
+      ctaLabel: e.label,
+      productId: v,
+      productName: t
+    }
+  });
+  return /* @__PURE__ */ r("section", { className: a.root, children: [
+    /* @__PURE__ */ r("div", { className: a.imageWrapper, children: [
+      /* @__PURE__ */ i("img", { src: h, alt: t, className: a.image }),
+      d && /* @__PURE__ */ i(g, { color: "black", size: "sm", className: a.label, children: d })
     ] }),
-    /* @__PURE__ */ e("div", { className: a.features, children: f.map((i, l) => /* @__PURE__ */ r("div", { className: a.feature, children: [
-      /* @__PURE__ */ e(b, { type: i.type }, l),
-      /* @__PURE__ */ e(s, { as: "span", defaultVariant: "bodyMd", className: a.featureLabel, children: i.label })
-    ] }, `${i.label}-${l}`)) }),
-    /* @__PURE__ */ e("div", { className: a.divider }),
-    /* @__PURE__ */ e(s, { defaultVariant: "bodyLg", mobileVariant: "bodyMd", emphasis: !0, children: h }),
-    /* @__PURE__ */ e("div", { className: o(a.actions, a.desktop), children: m.map((i, l) => /* @__PURE__ */ e(t, { ...i, size: "lg", children: i.label }, l)) }),
-    /* @__PURE__ */ e("div", { className: o(a.actions, a.mobile), children: m.map((i, l) => /* @__PURE__ */ e(t, { ...i, size: "md", children: i.label }, l)) })
-  ] })
-] });
+    /* @__PURE__ */ r("div", { className: a.content, children: [
+      /* @__PURE__ */ r("div", { className: a.header, children: [
+        /* @__PURE__ */ i(s, { as: "h3", defaultVariant: "headingXl", mobileVariant: "headingMd", children: t }),
+        /* @__PURE__ */ i(s, { as: "p", defaultVariant: "bodySm", children: p })
+      ] }),
+      /* @__PURE__ */ i("div", { className: a.features, children: f.map((e, l) => /* @__PURE__ */ r("div", { className: a.feature, children: [
+        /* @__PURE__ */ i(u, { type: e.type }, l),
+        /* @__PURE__ */ i(s, { as: "span", defaultVariant: "bodyMd", className: a.featureLabel, children: e.label })
+      ] }, `${e.label}-${l}`)) }),
+      /* @__PURE__ */ i("div", { className: a.divider }),
+      /* @__PURE__ */ i(s, { defaultVariant: "bodyLg", mobileVariant: "bodyMd", emphasis: !0, children: y }),
+      /* @__PURE__ */ i("div", { className: m(a.actions, a.desktop), children: c.map((e, l) => /* @__PURE__ */ i(n, { ...e, size: "lg", analyticsProps: o(e, l), children: e.label }, l)) }),
+      /* @__PURE__ */ i("div", { className: m(a.actions, a.mobile), children: c.map((e, l) => /* @__PURE__ */ i(n, { ...e, size: "md", analyticsProps: o(e, l), children: e.label }, l)) })
+    ] })
+  ] });
+};
 export {
-  M as ProductListing
+  T as ProductListing
 };