@zenpatient-org/healthspan-marketing-ui 0.2.68 → 0.2.70

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"),j=require("react"),x=require("swiper/modules"),d=require("swiper/react"),y=require("../../utils/useSwiper/useSwiper.cjs.js"),q=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),w=require("../Label/Label.cjs.js"),P=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),u=require("../GalleryPagination/GalleryPagination.cjs.js"),v=[x.Navigation],N=({images:a,label:o,className:m,type:r="primary"})=>{const{activeIndex:s,handleSlideTo:t,handleSlideChange:h,onSwiperInit:g,handleSwiperResize:p,handleUserInteraction:n}=y.useSwiperWithAutoPlay(3e3),l=j.useCallback(c=>{n(),t(c)},[n,t]);return e.jsxs("div",{className:q.cn(i.root,m,{[i.primary]:r==="primary",[i.secondary]:r==="secondary"}),children:[o&&e.jsx("div",{className:i.labelWrap,children:e.jsx(w.Label,{color:"black",size:"sm",children:o})}),e.jsx(d.Swiper,{onSwiper:g,onResize:p,onSlideChange:h,onTouchStart:n,onTouchEnd:n,modules:v,spaceBetween:0,slidesPerView:1,className:i.swiper,children:a.map((c,S)=>e.jsx(d.SwiperSlide,{children:e.jsx("div",{className:i.imageContainer,children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:c,alt:"product image",width:r==="primary"?600:492,height:r==="primary"?600:389,className:i.image,onClick:n})})})},S))}),r==="primary"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:i.hideOnMobile,children:e.jsx(P.ImageGalleryPagination,{images:a,activeIndex:s,onSelect:l})}),e.jsx("div",{className:i.hideOnDesktop,children:e.jsx(u.GalleryPagination,{count:a.length,activeIndex:s,onSelect:l})})]}):e.jsx(u.GalleryPagination,{count:a.length,activeIndex:s,onSelect:l})]})};exports.ImageGallery=N;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),w=require("swiper/modules"),h=require("swiper/react"),P=require("../../utils/useSwiper/useSwiper.cjs.js"),N=require("../../utils/cn/cn.cjs.js");;/* empty css                                        */;/* empty css                                                    */;/* empty css                                                    */const n=require("../../src/components/ImageGallery/imageGallery.module.css"),m=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),g=require("../GalleryPagination/GalleryPagination.cjs.js"),b=require("../Label/Label.cjs.js"),v=[w.Navigation],G=({images:r,label:o,className:S,type:s="primary",paginationType:t})=>{const{activeIndex:i,handleSlideTo:d,handleSlideChange:p,onSwiperInit:j,handleSwiperResize:x,handleUserInteraction:a}=P.useSwiperWithAutoPlay(3e3),l=u.useCallback(c=>{a(),d(c)},[a,d]),y=u.useMemo(()=>t?t==="thumbnail"?e.jsx(m.ImageGalleryPagination,{images:r,activeIndex:i,onSelect:l}):e.jsx(g.GalleryPagination,{count:r.length,activeIndex:i,onSelect:l}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:n.hideOnMobile,children:e.jsx(m.ImageGalleryPagination,{images:r,activeIndex:i,onSelect:l})}),e.jsx("div",{className:n.hideOnDesktop,children:e.jsx(g.GalleryPagination,{count:r.length,activeIndex:i,onSelect:l})})]}),[r.length,i,l,t]);return e.jsxs("div",{className:N.cn(n.root,S,{[n.primary]:s==="primary",[n.secondary]:s==="secondary"}),children:[o&&e.jsx("div",{className:n.labelWrap,children:e.jsx(b.Label,{color:"black",size:"sm",children:o})}),e.jsx(h.Swiper,{onSwiper:j,onResize:x,onSlideChange:p,onTouchStart:a,onTouchEnd:a,modules:v,spaceBetween:0,slidesPerView:1,className:n.swiper,children:r.map((c,q)=>e.jsx(h.SwiperSlide,{children:e.jsx("div",{className:n.imageContainer,children:e.jsx("div",{className:n.imageWrapper,children:e.jsx("img",{src:c,alt:"product image",width:s==="primary"?600:492,height:s==="primary"?600:389,className:n.image,onClick:a})})})},q))}),y]})};exports.ImageGallery=G;

package/dist/components/ImageGallery/ImageGallery.d.ts

@@ -4,5 +4,6 @@ export type ImageGalleryProps = {
     label?: string;
     className?: string;
     type?: 'primary' | 'secondary';
+    paginationType?: 'thumbnail' | 'bullet';
 };
-export declare const ImageGallery: ({ images, label, className, type }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageGallery: ({ images, label, className, type, paginationType }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,80 +1,80 @@
 "use client";
-import { jsxs as s, jsx as e, Fragment as f } from "react/jsx-runtime";
-import { useCallback as w } from "react";
-import { Navigation as y } from "swiper/modules";
-import { Swiper as N, SwiperSlide as v } from "swiper/react";
-import { useSwiperWithAutoPlay as I } from "../../utils/useSwiper/useSwiper.es.js";
-import { cn as P } from "../../utils/cn/cn.es.js";
+import { jsxs as d, Fragment as v, jsx as e } from "react/jsx-runtime";
+import { useCallback as y, useMemo as I } from "react";
+import { Navigation as P } from "swiper/modules";
+import { Swiper as b, SwiperSlide as C } from "swiper/react";
+import { useSwiperWithAutoPlay as k } from "../../utils/useSwiper/useSwiper.es.js";
+import { cn as x } from "../../utils/cn/cn.es.js";
 /* empty css                                      */
 /* empty css                                                  */
 /* empty css                                                  */
-import i from "../../components/ImageGallery/imageGallery.module.css";
-import { Label as C } from "../Label/Label.es.js";
-import { ImageGalleryPagination as b } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
-import { GalleryPagination as d } from "../GalleryPagination/GalleryPagination.es.js";
-const k = [y], A = ({ images: o, label: m, className: p, type: r = "primary" }) => {
-  const { activeIndex: n, handleSlideTo: c, handleSlideChange: h, onSwiperInit: S, handleSwiperResize: g, handleUserInteraction: a } = I(3e3), l = w(
-    (t) => {
-      a(), c(t);
+import r from "../../components/ImageGallery/imageGallery.module.css";
+import { ImageGalleryPagination as h } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
+import { GalleryPagination as p } from "../GalleryPagination/GalleryPagination.es.js";
+import { Label as W } from "../Label/Label.es.js";
+const z = [P], V = ({ images: i, label: m, className: S, type: l = "primary", paginationType: t }) => {
+  const { activeIndex: n, handleSlideTo: s, handleSlideChange: u, onSwiperInit: f, handleSwiperResize: g, handleUserInteraction: o } = k(3e3), a = y(
+    (c) => {
+      o(), s(c);
     },
-    [a, c]
-  );
-  return /* @__PURE__ */ s(
+    [o, s]
+  ), w = I(() => t ? t === "thumbnail" ? /* @__PURE__ */ e(h, { images: i, activeIndex: n, onSelect: a }) : /* @__PURE__ */ e(p, { count: i.length, activeIndex: n, onSelect: a }) : /* @__PURE__ */ d(v, { children: [
+    /* @__PURE__ */ e("div", { className: r.hideOnMobile, children: /* @__PURE__ */ e(
+      h,
+      {
+        images: i,
+        activeIndex: n,
+        onSelect: a
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: r.hideOnDesktop, children: /* @__PURE__ */ e(
+      p,
+      {
+        count: i.length,
+        activeIndex: n,
+        onSelect: a
+      }
+    ) })
+  ] }), [i.length, n, a, t]);
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: P(i.root, p, {
-        [i.primary]: r === "primary",
-        [i.secondary]: r === "secondary"
+      className: x(r.root, S, {
+        [r.primary]: l === "primary",
+        [r.secondary]: l === "secondary"
       }),
       children: [
-        m && /* @__PURE__ */ e("div", { className: i.labelWrap, children: /* @__PURE__ */ e(C, { color: "black", size: "sm", children: m }) }),
+        m && /* @__PURE__ */ e("div", { className: r.labelWrap, children: /* @__PURE__ */ e(W, { color: "black", size: "sm", children: m }) }),
         /* @__PURE__ */ e(
-          N,
+          b,
           {
-            onSwiper: S,
+            onSwiper: f,
             onResize: g,
-            onSlideChange: h,
-            onTouchStart: a,
-            onTouchEnd: a,
-            modules: k,
+            onSlideChange: u,
+            onTouchStart: o,
+            onTouchEnd: o,
+            modules: z,
             spaceBetween: 0,
             slidesPerView: 1,
-            className: i.swiper,
-            children: o.map((t, u) => /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e("div", { className: i.imageContainer, children: /* @__PURE__ */ e("div", { className: i.imageWrapper, children: /* @__PURE__ */ e(
+            className: r.swiper,
+            children: i.map((c, N) => /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("div", { className: r.imageContainer, children: /* @__PURE__ */ e("div", { className: r.imageWrapper, children: /* @__PURE__ */ e(
               "img",
               {
-                src: t,
+                src: c,
                 alt: "product image",
-                width: r === "primary" ? 600 : 492,
-                height: r === "primary" ? 600 : 389,
-                className: i.image,
-                onClick: a
+                width: l === "primary" ? 600 : 492,
+                height: l === "primary" ? 600 : 389,
+                className: r.image,
+                onClick: o
               }
-            ) }) }) }, u))
+            ) }) }) }, N))
           }
         ),
-        r === "primary" ? /* @__PURE__ */ s(f, { children: [
-          /* @__PURE__ */ e("div", { className: i.hideOnMobile, children: /* @__PURE__ */ e(
-            b,
-            {
-              images: o,
-              activeIndex: n,
-              onSelect: l
-            }
-          ) }),
-          /* @__PURE__ */ e("div", { className: i.hideOnDesktop, children: /* @__PURE__ */ e(
-            d,
-            {
-              count: o.length,
-              activeIndex: n,
-              onSelect: l
-            }
-          ) })
-        ] }) : /* @__PURE__ */ e(d, { count: o.length, activeIndex: n, onSelect: l })
+        w
       ]
     }
   );
 };
 export {
-  A as ImageGallery
+  V as ImageGallery
 };

package/dist/components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css

@@ -1,32 +1,37 @@
-@media (width > 768px) {
-    .root {
-        display: flex;
-        justify-content: center;
-        gap: 12px;
-        padding: 0 24px;
-    }
+.root {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    padding: 0 24px;
+}
 
-    .thumbnailButton {
-        width: 64px;
-        height: 64px;
-        padding: 0;
-        border: 1px solid var(--color-neutral-200);
-        border-radius: var(--border-radius-xs);
-        background: none;
-        cursor: pointer;
-        opacity: 0.5;
-        transition: opacity 0.3s ease;
-        overflow: hidden;
-    }
+.thumbnailButton {
+    width: 64px;
+    height: 64px;
+    padding: 0;
+    border: 1px solid var(--color-neutral-200);
+    border-radius: var(--border-radius-xs);
+    background: none;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+    overflow: hidden;
+}
 
-    .thumbnailButton.active {
-        opacity: 1;
-        border-color: var(--color-neutral-200);
-    }
+.thumbnailButton.active {
+    opacity: 1;
+    border-color: var(--color-neutral-200);
+}
 
-    .thumbnailImage {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }    
+.thumbnailImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
+
+@media (width <= 768px) {
+    .thumbnailButton {
+        width: 48px;
+        height: 48px;
+    }
+}

package/dist/components/ImageGallery/imageGallery.module.css

@@ -16,7 +16,6 @@
 .secondary {
     padding: 10px 0 5px;
     background-color: var(--color-bg-base-light);
-    border: 1px solid var(--color-neutral-200);
 }
 
 .labelWrap {
@@ -91,4 +90,4 @@
     .hideOnMobile {
         display: none;
     }
-}
+}

package/dist/components/Profile/Profile.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../Typography/Typography.cjs.js"),i=require("./utils.cjs.js"),s=require("../../src/components/Profile/styles.module.css"),m=require("../Icon/Icon.cjs.js"),d=require("../Icon/constants.cjs.js"),p={xl:"profileXl",lg:"profileLg",md:"profileMd",sm:"profileSm"},u=({firstName:o,lastName:r,image:a,size:n="md",editable:t=!1,onEdit:c})=>e.jsxs("div",{className:s.root,"data-size":n,children:[a?e.jsx("div",{className:s.imageContainer,children:e.jsx("img",{src:a,alt:i.getFullName({firstName:o,lastName:r}),className:s.image})}):e.jsx("div",{className:s.textContainer,children:e.jsx(l.Typography,{defaultVariant:p[n],className:s.name,children:i.getInitials({firstName:o,lastName:r})})}),t&&n!=="sm"&&e.jsx("div",{className:s.editableContainer,onClick:c,children:e.jsx(m.Icon,{name:d.EIconName.PLUS,className:s.editableIcon})})]});exports.Profile=u;

package/dist/components/Profile/Profile.d.ts

@@ -0,0 +1,10 @@
+export type ProfileProps = {
+    firstName: string;
+    lastName: string;
+    image?: string;
+    size?: ProfileSizeVariant;
+    editable?: boolean;
+    onEdit?: () => void;
+};
+export type ProfileSizeVariant = 'xl' | 'lg' | 'md' | 'sm';
+export declare const Profile: ({ firstName, lastName, image, size, editable, onEdit }: ProfileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Profile/Profile.es.js

@@ -0,0 +1,18 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { Typography as n } from "../Typography/Typography.es.js";
+import { getFullName as c, getInitials as d } from "./utils.es.js";
+import e from "../../components/Profile/styles.module.css";
+import { Icon as p } from "../Icon/Icon.es.js";
+import { EIconName as f } from "../Icon/constants.es.js";
+const g = {
+  xl: "profileXl",
+  lg: "profileLg",
+  md: "profileMd",
+  sm: "profileSm"
+}, u = ({ firstName: i, lastName: o, image: l, size: r = "md", editable: m = !1, onEdit: s }) => /* @__PURE__ */ t("div", { className: e.root, "data-size": r, children: [
+  l ? /* @__PURE__ */ a("div", { className: e.imageContainer, children: /* @__PURE__ */ a("img", { src: l, alt: c({ firstName: i, lastName: o }), className: e.image }) }) : /* @__PURE__ */ a("div", { className: e.textContainer, children: /* @__PURE__ */ a(n, { defaultVariant: g[r], className: e.name, children: d({ firstName: i, lastName: o }) }) }),
+  m && r !== "sm" && /* @__PURE__ */ a("div", { className: e.editableContainer, onClick: s, children: /* @__PURE__ */ a(p, { name: f.PLUS, className: e.editableIcon }) })
+] });
+export {
+  u as Profile
+};

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

@@ -0,0 +1 @@
+export { Profile } from './Profile';

package/dist/components/Profile/styles.module.css

@@ -0,0 +1,106 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 0 0 auto;
+    justify-content: center;
+    position: relative;
+    border-radius: var(--border-radius-full);
+    overflow: hidden;
+}
+
+.root[data-size="xl"] {
+    width: 96px;
+    height: 96px;
+
+    & .editableIcon {
+        width: 24px;
+        height: 24px;
+        padding: 3px;
+    }
+}
+
+.root[data-size="lg"] {
+    width: 64px;
+    height: 64px;
+
+    & .editableIcon {
+        width: 16px;
+        height: 16px;
+        padding: 2px;
+    }
+}
+
+.root[data-size="md"] {
+    width: 48px;
+    height: 48px;
+
+    & .editableIcon {
+        width: 12px;
+        height: 12px;
+        padding: 1px;
+    }
+}
+
+.root[data-size="sm"] {
+    width: 32px;
+    height: 32px;
+}
+
+.imageContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius-full);
+    border: var(--border-width-sm) solid #F8F4EE;
+    overflow: hidden;
+}
+
+.image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.textContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius-full);
+    overflow: hidden;
+    background-color: var(--color-bg-fill-primary);
+}
+
+.name {
+    color: var(--color-text-primary-inverted);
+}
+
+.editableContainer {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 31%;
+    background-color: rgba(20, 18, 16, 0.80);
+    cursor: pointer;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+.root:hover .editableContainer {
+    display: flex;
+}
+
+.editableIcon {
+    color: #FFFEFC;
+}

package/dist/components/Profile/utils.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=({firstName:t,lastName:n})=>!t&&!n?"":`${t||""} ${n||""}`.trim(),o=({firstName:t,lastName:n})=>{const r=(t==null?void 0:t.charAt(0).toUpperCase())||"",e=(n==null?void 0:n.charAt(0).toUpperCase())||"";return`${r} ${e}`.trim()};exports.getFullName=i;exports.getInitials=o;

package/dist/components/Profile/utils.d.ts

@@ -0,0 +1,7 @@
+type NameParts = {
+    firstName?: string;
+    lastName?: string;
+};
+export declare const getFullName: ({ firstName, lastName }: NameParts) => string;
+export declare const getInitials: ({ firstName, lastName }: NameParts) => string;
+export {};

package/dist/components/Profile/utils.es.js

@@ -0,0 +1,8 @@
+const c = ({ firstName: t, lastName: n }) => !t && !n ? "" : `${t || ""} ${n || ""}`.trim(), i = ({ firstName: t, lastName: n }) => {
+  const r = (t == null ? void 0 : t.charAt(0).toUpperCase()) || "", o = (n == null ? void 0 : n.charAt(0).toUpperCase()) || "";
+  return `${r} ${o}`.trim();
+};
+export {
+  c as getFullName,
+  i as getInitials
+};

package/dist/components/Typography/Typography.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ElementType } from 'react';
 
-export type TypographyVariant = 'displayXl' | 'displayLg' | 'displayMd' | 'displaySm' | 'displayXs' | 'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'headingXxs' | 'preambleLg' | 'preambleMd' | 'preambleSm' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs' | 'linkLg' | 'linkMd' | 'linkSm' | 'linkXs' | 'labelXl' | 'labelLg' | 'labelMd' | 'labelSm' | 'labelXs';
+export type TypographyVariant = 'displayXl' | 'displayLg' | 'displayMd' | 'displaySm' | 'displayXs' | 'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'headingXxs' | 'preambleLg' | 'preambleMd' | 'preambleSm' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs' | 'linkLg' | 'linkMd' | 'linkSm' | 'linkXs' | 'labelXl' | 'labelLg' | 'labelMd' | 'labelSm' | 'labelXs' | 'profileXl' | 'profileLg' | 'profileMd' | 'profileSm';
 type FontWeight = 'regular' | 'medium';
 export interface TypographyProps {
     defaultVariant: TypographyVariant;

package/dist/components/Typography/typography.module.css

@@ -284,6 +284,51 @@
     letter-spacing: var(--letter-spacing-xl);
 }
 
+.profileXl {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-heading-lg);
+}
+
+.profileLg {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-xxl);
+}
+
+.profileMd {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-sm);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-lg);
+}
+
+.profileSm {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-xs);
+}
+
+.profileXs {
+    font-family: var(--font-default), sans-serif;
+    line-height: var(--line-height-xs);
+    letter-spacing: var(--letter-spacing-xxl);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    font-size: var(--font-size-3xs);
+}
+
 .weightRegular {
     font-weight: var(--font-weight-regular);
 }
@@ -591,6 +636,42 @@
         letter-spacing: var(--letter-spacing-xl);
     }
 
+    .profileXl {
+        font-family: var(--font-default), sans-serif;
+        line-height: var(--line-height-sm);
+        letter-spacing: var(--letter-spacing-xxl);
+        font-weight: var(--font-weight-regular);
+        font-style: normal;
+        font-size: var(--font-size-heading-lg);
+    }
+    
+    .profileLg {
+        font-family: var(--font-default), sans-serif;
+        line-height: var(--line-height-sm);
+        letter-spacing: var(--letter-spacing-xxl);
+        font-weight: var(--font-weight-regular);
+        font-style: normal;
+        font-size: var(--font-size-xxl);
+    }
+    
+    .profileMd {
+        font-family: var(--font-default), sans-serif;
+        line-height: var(--line-height-sm);
+        letter-spacing: var(--letter-spacing-xxl);
+        font-weight: var(--font-weight-regular);
+        font-style: normal;
+        font-size: var(--font-size-lg);
+    }
+    
+    .profileSm {
+        font-family: var(--font-default), sans-serif;
+        line-height: var(--line-height-xs);
+        letter-spacing: var(--letter-spacing-xxl);
+        font-weight: var(--font-weight-regular);
+        font-style: normal;
+        font-size: var(--font-size-xs);
+    }
+
     .weightRegular {
         font-weight: var(--font-weight-regular);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.68",
+    "version": "0.2.70",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -341,6 +341,11 @@
             "import": "./dist/components/FilterError/FilterError.es.js",
             "require": "./dist/components/FilterError/FilterError.cjs.js"
         },
+        "./Profile": {
+            "types": "./dist/components/Profile/Profile.d.ts",
+            "import": "./dist/components/Profile/Profile.es.js",
+            "require": "./dist/components/Profile/Profile.cjs.js"
+        },
         "./CallbackModule": {
             "types": "./dist/modules/Callback/Callback.d.ts",
             "import": "./dist/modules/Callback/Callback.es.js",