@zenpatient-org/healthspan-marketing-ui 0.2.85 → 0.2.87

package/dist/modules/PairedProducts/PairedProducts.d.ts

@@ -1,5 +1,4 @@
-import { TProductGalleryCardView } from '../../components/ProductGalleryCard';
-
+import type { TProductGalleryCardView } from '../../components/ProductGalleryCard';
 type PairedProductsProps = {
     title: string;
     button: {

package/dist/modules/ProductsDisplay/ProductsDisplay.d.ts

@@ -1,3 +1,2 @@
-import { TProductsDisplay } from './types';
-
+import type { TProductsDisplay } from './types';
 export declare const ProductsDisplay: ({ labelText, productDisplays }: TProductsDisplay) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/ProductsDisplay/components/ProductsDisplayTabs/ProductsDisplayTabs.d.ts

@@ -1,5 +1,4 @@
-import { TTab } from '../../../../components/Tabs';
-
+import { type TTab } from '../../../../components/Tabs';
 type Props<T extends string | number> = {
     label?: string;
     tabs: TTab<T>[];

package/dist/modules/ProductsDisplay/types.d.ts

@@ -1,5 +1,4 @@
-import { TProductGalleryCardView } from '../../components/ProductGalleryCard';
-
+import type { TProductGalleryCardView } from '../../components/ProductGalleryCard';
 export type TProductsDisplayView = {
     title: string;
     description?: string;

package/dist/modules/ProductsDisplay/useProductsData.d.ts

@@ -1,7 +1,6 @@
-import { TProductGalleryCardView } from '../../components/ProductGalleryCard';
-import { TTab } from '../../components/Tabs';
-import { TProductsDisplayView } from './types';
-
+import type { TProductGalleryCardView } from '../../components/ProductGalleryCard';
+import type { TTab } from '../../components/Tabs';
+import type { TProductsDisplayView } from './types';
 type UseProductsReceiveProps = {
     productDisplays: Array<TProductsDisplayView>;
 };

package/dist/modules/ProgramDetails/ProgramDetails.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/ProgramDetails/programDetails.module.css"),t=require("../../components/Typography/Typography.cjs.js"),n=require("./components/Features/Features.cjs.js"),o=({label:r,description:i,image:l,features:s})=>e.jsx("section",{className:a.root,children:e.jsxs("div",{className:a.container,children:[e.jsxs("div",{className:a.header,children:[r&&e.jsx(t.Typography,{as:"p",defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,children:r}),e.jsx(t.Typography,{as:"p",defaultVariant:"preambleLg",mobileVariant:"preambleSm",children:i})]}),e.jsxs("div",{className:a.content,children:[e.jsx("img",{className:a.image,src:l,alt:"program detatils"}),s.length>0&&e.jsx(n.Features,{features:s})]})]})});exports.ProgramDetails=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../src/modules/ProgramDetails/programDetails.module.css"),t=require("../../components/Typography/Typography.cjs.js"),l=require("./components/Features/Features.cjs.js"),o=({label:r,description:i,image:n,features:a})=>e.jsx("section",{className:s.root,children:e.jsxs("div",{className:s.container,children:[e.jsxs("div",{className:s.header,children:[r&&e.jsx(t.Typography,{as:"p",defaultVariant:"labelSm",emphasis:!0,children:r}),e.jsx(t.Typography,{as:"p",defaultVariant:"preambleLg",mobileVariant:"preambleSm",children:i})]}),e.jsxs("div",{className:s.content,children:[e.jsx("img",{className:s.image,src:n,alt:"program detatils"}),a.length>0&&e.jsx(l.Features,{features:a})]})]})});exports.ProgramDetails=o;

package/dist/modules/ProgramDetails/ProgramDetails.d.ts

@@ -1,5 +1,4 @@
 import { TProgramDetailsFeature } from './types';
-
 type ProgramDetailsProps = {
     label?: string;
     description: string;

package/dist/modules/ProgramDetails/ProgramDetails.es.js

@@ -1,15 +1,15 @@
 import { jsx as a, jsxs as r } from "react/jsx-runtime";
 import e from "../../modules/ProgramDetails/programDetails.module.css";
-import { Typography as l } from "../../components/Typography/Typography.es.js";
+import { Typography as t } from "../../components/Typography/Typography.es.js";
 import { Features as o } from "./components/Features/Features.es.js";
-const h = ({ label: i, description: m, image: s, features: t }) => /* @__PURE__ */ a("section", { className: e.root, children: /* @__PURE__ */ r("div", { className: e.container, children: [
+const h = ({ label: i, description: m, image: l, features: s }) => /* @__PURE__ */ a("section", { className: e.root, children: /* @__PURE__ */ r("div", { className: e.container, children: [
   /* @__PURE__ */ r("div", { className: e.header, children: [
-    i && /* @__PURE__ */ a(l, { as: "p", defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, children: i }),
-    /* @__PURE__ */ a(l, { as: "p", defaultVariant: "preambleLg", mobileVariant: "preambleSm", children: m })
+    i && /* @__PURE__ */ a(t, { as: "p", defaultVariant: "labelSm", emphasis: !0, children: i }),
+    /* @__PURE__ */ a(t, { as: "p", defaultVariant: "preambleLg", mobileVariant: "preambleSm", children: m })
   ] }),
   /* @__PURE__ */ r("div", { className: e.content, children: [
-    /* @__PURE__ */ a("img", { className: e.image, src: s, alt: "program detatils" }),
-    t.length > 0 && /* @__PURE__ */ a(o, { features: t })
+    /* @__PURE__ */ a("img", { className: e.image, src: l, alt: "program detatils" }),
+    s.length > 0 && /* @__PURE__ */ a(o, { features: s })
   ] })
 ] }) });
 export {

package/dist/modules/ProgramDetails/components/Features/Features.d.ts

@@ -1,5 +1,4 @@
-import { TProgramDetailsFeature } from '../../types';
-
+import { type TProgramDetailsFeature } from '../../types';
 type FeaturesProps = {
     features: Array<TProgramDetailsFeature>;
 };

package/dist/modules/ProgramDetails/programDetails.module.css

@@ -39,7 +39,34 @@
     aspect-ratio: 1 / 1;
 }
 
+@media (width <= 1240px) {
+    .image {
+        max-width: 470px;
+    }
+}
+
 @media (width <= 1024px) {
+    .container {
+        padding: 64px;
+        gap: 32px;
+    }
+
+    .content {
+        gap: 40px;
+    }
+
+    .image {
+        max-width: 410px;
+    }
+}
+
+@media (width <= 820px) {
+    .container {
+        padding: 56px 48px;
+    }
+}
+
+@media (width <= 768px) {
     .container {
         padding: 64px 20px 20px;
         gap: 40px;

package/dist/modules/ResearchEssentialReadings/ResearchEssentialReadings.d.ts

@@ -1,5 +1,4 @@
 import { TResearchArticleView } from '../../types/articles';
-
 type TResearchEssentialReadingsProps = {
     readings: Array<TResearchArticleView>;
 };

package/dist/modules/ResearchEssentialReadings/components/ReadingCard/ReadingCard.d.ts

@@ -1,3 +1,2 @@
-import { TResearchArticleView } from '../../../../types/articles';
-
+import type { TResearchArticleView } from '../../../../types/articles';
 export declare function ReadingCard({ title, link, image, date, label, readTime }: TResearchArticleView): import("react/jsx-runtime").JSX.Element;

package/dist/modules/ResearchFeatured/ResearchFeatured.d.ts

@@ -1,6 +1,5 @@
-import { TResearchArticleView } from '../../types/articles';
+import type { TResearchArticleView } from '../../types/articles';
 import { EAnalyticsEvent } from '../../types/analytics';
-
 type TResearchFeatured = {
     highlightedArticle: TResearchArticleView;
     articles: Array<TResearchArticleView>;

package/dist/modules/ResearchFeatured/components/FeaturedArticle/FeaturedArticle.d.ts

@@ -1,3 +1,2 @@
-import { TResearchArticleView } from '../../../../types/articles';
-
+import type { TResearchArticleView } from '../../../../types/articles';
 export declare const FeaturedArticle: ({ image, date, readTime, title, link, trackingEvent, trackingLocation, }: TResearchArticleView) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/ResearchFeatured/components/HighlightedArticle/HighlightedArticle.d.ts

@@ -1,3 +1,2 @@
-import { TResearchArticleView } from '../../../../types/articles';
-
+import type { TResearchArticleView } from '../../../../types/articles';
 export declare const HighlightedArticle: ({ label, image, date, title, link }: TResearchArticleView) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/ResearchFilters/ResearchFilters.d.ts

@@ -1,6 +1,5 @@
-import { TTab } from '../../components/Tabs';
+import { type TTab } from '../../components/Tabs';
 import { EAnalyticsEvent } from '../../types/analytics';
-
 export type TResearchFilters = {
     tabs: Array<TTab<string>>;
     activeTab: string;

package/dist/modules/ResearchStudies/ResearchStudies.d.ts

@@ -1,6 +1,5 @@
-import { TResearchArticleView } from '../../types/articles';
+import type { TResearchArticleView } from '../../types/articles';
 import { EAnalyticsEvent } from '../../types/analytics';
-
 type ResearchStudiesProps = {
     title: string;
     backButton?: {

package/dist/modules/ResearchStudies/components/StudyCard/StudyCard.d.ts

@@ -1,3 +1,2 @@
-import { TResearchArticleView } from '../../../../types/articles';
-
+import type { TResearchArticleView } from '../../../../types/articles';
 export declare function StudyCard({ title, link, image, date, label, readTime, trackingEvent, trackingLocation, }: TResearchArticleView): import("react/jsx-runtime").JSX.Element;

package/dist/modules/Reviews/Reviews.d.ts

@@ -1,5 +1,4 @@
 import { TReviewCard } from './types';
-
 type ReviewsProps = {
     rating?: {
         stars?: number;

package/dist/modules/Reviews/components/ReviewCard/ReviewCard.d.ts

@@ -1,3 +1,2 @@
 import { TReviewCard } from '../../types';
-
 export declare const ReviewCard: ({ review }: TReviewCard) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/Reviews/components/ReviewList/ReviewList.d.ts

@@ -1,5 +1,4 @@
-import { TReviewCard } from '../../types';
-
+import type { TReviewCard } from '../../types';
 type ReviewListProps = {
     reviews: Array<TReviewCard>;
     page: number;

package/dist/modules/ScienceHero/ScienceHeroCursor.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export type ScienceHeroCursorProps = {
     children: React.ReactNode;
     backgroundImage: string;

package/dist/modules/ScienceHero/components/ScienceClientCursor.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 type ScienceClientCursorProps = {
     children: React.ReactNode;
     backgroundImage: string;

package/dist/modules/ScienceHero/components/ScienceServerCursor.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export declare const ScienceServerCursor: ({ children }: {
     children: React.ReactNode;
 }) => React.ReactNode;

package/dist/modules/SlidingTabsGallery/SlidingTabsGallery.d.ts

@@ -1,6 +1,5 @@
-import { ReactNode } from 'react';
-import { TContentTab } from '../../components/ContentTabs';
-
+import { type ReactNode } from 'react';
+import { type TContentTab } from '../../components/ContentTabs';
 export type SlidingTabsGalleryProps = {
     title: ReactNode;
     tabs: ReadonlyArray<TContentTab>;

package/dist/modules/StillHaveQuestions/StillHaveQuestions.d.ts

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-
+import type { ReactNode } from 'react';
 export type StillHaveQuestionsVariant = 'StillHaveQuestions' | 'JoinOurTeam';
 export type StillHaveQuestionsProps = {
     variant?: StillHaveQuestionsVariant;

package/dist/modules/StillHaveQuestions/constants.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { StillHaveQuestionsVariant } from './StillHaveQuestions';
-
 export declare const LEGACY_CONFIG: Record<StillHaveQuestionsVariant, {
     title: ReactNode;
     button: {

package/dist/modules/Studies/Studies.d.ts

@@ -1,7 +1,6 @@
-import { ReactNode } from 'react';
-import { StudyGridCardProps } from '../../components/StudyGridCard/StudyGridCard';
+import type { ReactNode } from 'react';
+import { type StudyGridCardProps } from '../../components/StudyGridCard/StudyGridCard';
 import { EAnalyticsEvent } from '../../types/analytics';
-
 export type StudiesProps = {
     title: ReactNode;
     description?: string;

package/dist/modules/TargetedPrograms/TargetedPrograms.d.ts

@@ -1,5 +1,4 @@
-import { ProgramCardProps } from '../../components/ProgramCard/ProgramCard';
-
+import { type ProgramCardProps } from '../../components/ProgramCard/ProgramCard';
 export type TargetedProgramsProps = {
     title: string;
     cards: Array<ProgramCardProps>;

package/dist/modules/Testimonial/Testimonial.d.ts

@@ -1,6 +1,5 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { RichReviewCard } from './types';
-
 type TestimonialProps = {
     title: ReactNode;
     reviews: Array<RichReviewCard>;

package/dist/modules/Testimonial/components/TextCard/TextCard.d.ts

@@ -1,3 +1,2 @@
 import { RichReviewCard } from '../../types';
-
 export declare const TextCard: ({ background, review, product }: RichReviewCard) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/Testimonial/components/VideoCard/VideoCard.d.ts

@@ -1,5 +1,4 @@
 import { RichReviewCard } from '../../types';
-
 type VideoCardProps = {
     background: {
         type: 'video';

package/dist/modules/TextTwoImages/TextTwoImages.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 interface TextTwoImagesProps {
     title: string;
     label?: string;

package/dist/modules/ThreeCardsWithHero/ThreeCardsWithHero.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export type Card = {
     title: string;
     description: string;

package/dist/modules/TotalCare/TotalCare.d.ts

@@ -1,7 +1,6 @@
-import { ReactNode } from 'react';
-import { TContentTab } from '../../components/ContentTabs';
-import { TColorScheme } from '../../types/common';
-
+import { type ReactNode } from 'react';
+import { type TContentTab } from '../../components/ContentTabs';
+import type { TColorScheme } from '../../types/common';
 export type TotalCareProps = {
     title: ReactNode;
     label: string;

package/dist/modules/TotalCare/totalCare.module.css

@@ -37,6 +37,10 @@
     padding-top: var(--spacing-48);
 }
 
+.tags > div {
+    text-align: left;
+}
+
 .imageWrap {
     display: flex;
     align-items: center;
@@ -109,19 +113,41 @@
 
 @media (width <= 1024px) {
     .container {
-        padding: var(--spacing-120) var(--spacing-20);
+        padding: var(--spacing-64);
     }
 
     .root[data-version='v1'] .image {
         padding: var(--spacing-12);
     }
+
+    .header h2 {
+        font-size: var(--font-size-display-sm);
+    }
+
+    .content {
+        gap: 40px;
+    }
 }
 
-@media screen and (width <= 768px) {
+@media (width <= 820px) {
     .container {
-        padding: var(--spacing-64) var(--spacing-20);
+        padding: var(--spacing-56) var(--spacing-48);
     }
+    
+    .header {
+        margin-bottom: 48px;
+    }
+
+    .header h2 {
+        font-size: var(--font-size-display-xs);
+    }
+
+    .content {
+        gap: 36px;
+    }
+}
 
+@media screen and (width <= 768px) {
     .header {
         margin-bottom: var(--spacing-40);
     }

package/dist/modules/TrackProgress/TrackProgress.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { TTrackProgressTab } from './types';
-
 type TrackProgressProps = {
     title: ReactNode;
     description: string;

package/dist/modules/TrackProgress/components/TimelineContent/TimelineContent.d.ts

@@ -1,5 +1,4 @@
 import { TTrackProgressTab } from '../../types';
-
 type TimelineContentProps = {
     tabs: Array<TTrackProgressTab>;
 };

package/dist/modules/TypesOfTests/TypesOfTests.d.ts

@@ -1,6 +1,5 @@
-import { TColorScheme } from '../../types/common';
-import { TTypesOfTestsItem } from './types';
-
+import type { TColorScheme } from '../../types/common';
+import type { TTypesOfTestsItem } from './types';
 export type TypesOfTestsProps = {
     title: string;
     items: Array<TTypesOfTestsItem>;

package/dist/modules/YourProtocol/YourProtocol.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/YourProtocol/yourProtocol.module.css"),n=require("../../types/analytics/analytics.cjs.js"),h=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),y=require("../../components/Icon/Icon.cjs.js"),r=require("../../components/Typography/Typography.cjs.js"),g=require("../../components/Button/Button.cjs.js"),j=({title:t,image:o,tags:c,button:s,colorScheme:l="light"})=>{const d={event:n.EAnalyticsEvent.ctaClicked,type:n.EAnalyticsEventType.interaction,component:"YourProtocol",element:"Callback",payload:{ctaLink:(s==null?void 0:s.link)||"no_link"}},p=l==="dark"?"secondary":"primary";return e.jsx("section",{className:a.root,"data-scheme":l,children:e.jsxs("div",{className:a.container,children:[e.jsx(h.HighlightedTitle,{title:t,className:a.title,defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:l}),c.length>0&&e.jsx("div",{className:a.tagsList,children:c.map((i,m)=>e.jsxs("div",{className:a.tagItem,children:[i.icon&&e.jsx("div",{className:a.iconWrapper,children:e.jsx(y.Icon,{name:i.icon,className:a.icon})}),e.jsxs("div",{className:a.tagText,children:[e.jsx(r.Typography,{className:a.tagLabel,as:"p",defaultVariant:"headingXs",children:i.label}),i.description&&e.jsx(r.Typography,{className:a.tagDescription,as:"p",defaultVariant:"bodyMd",children:i.description})]})]},m))}),(s==null?void 0:s.link)&&(s==null?void 0:s.label)&&e.jsx("div",{className:a.callbackButton,children:e.jsx(g.Button,{href:s.link,as:"a",analyticsProps:d,size:"lg",variant:p,children:s.label})}),e.jsx("img",{src:o,alt:"Your Protocol",className:a.image})]})})};exports.YourProtocol=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../src/modules/YourProtocol/yourProtocol.module.css"),n=require("../../types/analytics/analytics.cjs.js"),y=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),h=require("../../components/Icon/Icon.cjs.js"),r=require("../../components/Typography/Typography.cjs.js"),g=require("../../components/Button/Button.cjs.js"),j=({title:t,image:o,tags:c,button:i,colorScheme:l="light"})=>{const d={event:n.EAnalyticsEvent.ctaClicked,type:n.EAnalyticsEventType.interaction,component:"YourProtocol",element:"Callback",payload:{ctaLink:(i==null?void 0:i.link)||"no_link"}},m=l==="dark"?"secondary":"primary";return e.jsx("section",{className:a.root,"data-scheme":l,children:e.jsxs("div",{className:a.container,children:[e.jsx(y.HighlightedTitle,{title:t,className:a.title,defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:l}),c.length>0&&e.jsx("div",{className:a.tagsList,children:c.map((s,p)=>e.jsxs("div",{className:a.tagItem,children:[s.icon&&e.jsx("div",{className:a.iconWrapper,children:e.jsx(h.Icon,{name:s.icon,className:a.icon})}),e.jsxs("div",{className:a.tagText,children:[e.jsx(r.Typography,{className:a.tagLabel,as:"p",defaultVariant:"preambleSm",children:s.label}),s.description&&e.jsx(r.Typography,{className:a.tagDescription,as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:s.description})]})]},p))}),(i==null?void 0:i.link)&&(i==null?void 0:i.label)&&e.jsx("div",{className:a.callbackButton,children:e.jsx(g.Button,{href:i.link,as:"a",analyticsProps:d,size:"lg",variant:m,children:i.label})}),e.jsx("img",{src:o,alt:"Your Protocol",className:a.image})]})})};exports.YourProtocol=j;

package/dist/modules/YourProtocol/YourProtocol.d.ts

@@ -1,7 +1,6 @@
-import { ReactNode } from 'react';
-import { TTagView } from './types';
-import { TColorScheme } from '../../types/common';
-
+import type { ReactNode } from 'react';
+import type { TTagView } from './types';
+import type { TColorScheme } from '../../types/common';
 type Props = {
     title: ReactNode;
     tags: Array<TTagView>;

package/dist/modules/YourProtocol/YourProtocol.es.js

@@ -1,11 +1,11 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import a from "../../modules/YourProtocol/yourProtocol.module.css";
 import { EAnalyticsEventType as h, EAnalyticsEvent as y } from "../../types/analytics/analytics.es.js";
 import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Icon as f } from "../../components/Icon/Icon.es.js";
 import { Typography as n } from "../../components/Typography/Typography.es.js";
 import { Button as v } from "../../components/Button/Button.es.js";
-const L = ({ title: o, image: m, tags: c, button: i, colorScheme: r = "light" }) => {
+const L = ({ title: m, image: o, tags: s, button: i, colorScheme: r = "light" }) => {
   const d = {
     event: y.ctaClicked,
     type: h.interaction,
@@ -15,26 +15,35 @@ const L = ({ title: o, image: m, tags: c, button: i, colorScheme: r = "light" })
       ctaLink: (i == null ? void 0 : i.link) || "no_link"
     }
   }, t = r === "dark" ? "secondary" : "primary";
-  return /* @__PURE__ */ e("section", { className: a.root, "data-scheme": r, children: /* @__PURE__ */ s("div", { className: a.container, children: [
+  return /* @__PURE__ */ e("section", { className: a.root, "data-scheme": r, children: /* @__PURE__ */ c("div", { className: a.container, children: [
     /* @__PURE__ */ e(
       N,
       {
-        title: o,
+        title: m,
         className: a.title,
         defaultVariant: "displayMd",
         mobileVariant: "headingXl",
         colorScheme: r
       }
     ),
-    c.length > 0 && /* @__PURE__ */ e("div", { className: a.tagsList, children: c.map((l, p) => /* @__PURE__ */ s("div", { className: a.tagItem, children: [
+    s.length > 0 && /* @__PURE__ */ e("div", { className: a.tagsList, children: s.map((l, p) => /* @__PURE__ */ c("div", { className: a.tagItem, children: [
       l.icon && /* @__PURE__ */ e("div", { className: a.iconWrapper, children: /* @__PURE__ */ e(f, { name: l.icon, className: a.icon }) }),
-      /* @__PURE__ */ s("div", { className: a.tagText, children: [
-        /* @__PURE__ */ e(n, { className: a.tagLabel, as: "p", defaultVariant: "headingXs", children: l.label }),
-        l.description && /* @__PURE__ */ e(n, { className: a.tagDescription, as: "p", defaultVariant: "bodyMd", children: l.description })
+      /* @__PURE__ */ c("div", { className: a.tagText, children: [
+        /* @__PURE__ */ e(n, { className: a.tagLabel, as: "p", defaultVariant: "preambleSm", children: l.label }),
+        l.description && /* @__PURE__ */ e(
+          n,
+          {
+            className: a.tagDescription,
+            as: "p",
+            defaultVariant: "bodyMd",
+            mobileVariant: "bodySm",
+            children: l.description
+          }
+        )
       ] })
     ] }, p)) }),
     (i == null ? void 0 : i.link) && (i == null ? void 0 : i.label) && /* @__PURE__ */ e("div", { className: a.callbackButton, children: /* @__PURE__ */ e(v, { href: i.link, as: "a", analyticsProps: d, size: "lg", variant: t, children: i.label }) }),
-    /* @__PURE__ */ e("img", { src: m, alt: "Your Protocol", className: a.image })
+    /* @__PURE__ */ e("img", { src: o, alt: "Your Protocol", className: a.image })
   ] }) });
 };
 export {

package/dist/modules/YourProtocol/types.d.ts

@@ -1,5 +1,4 @@
 import { EIconName } from '../../components/Icon/constants';
-
 export type TTagView = {
     label: string;
     description?: string;