@zenpatient-org/healthspan-marketing-ui 0.1.20 → 0.1.22

package/README.md

@@ -1,17 +1,6 @@
-## Healthspan - Design System
+# Healthspan - Marketing UI
 
-A modern, reusable UI library built with **React**, **TypeScript**, and **Vite**, designed to power web applications with consistent components and design tokens.
-
-## ✨ Features
-
-- React components with full TypeScript support
-- Design tokens: colors, spacing, typography via CSS variables
-- CSS Modules for scoped styles
-- Icon system with SVG + enums
-- Bundled with Vite (ESM + UMD)
-- Ready for NPM publishing
-
----
+This is the marketing UI library for Healthspan Marketing Website v3.
 
 ## Installation
 
@@ -19,10 +8,23 @@ A modern, reusable UI library built with **React**, **TypeScript**, and **Vite**
 npm install @zenpatient-org/healthspan-marketing-ui
 ```
 
-Or with Yarn:
+## Development
+Start the storybook:
 
+```bash
+npm run storybook
 ```
-yarn add @zenpatient-org/healthspan-marketing-ui
+
+When you create a new public component, you need to add it to the `components` section of the `vite.config.ts` file. Also, you need to add the component to the `exports` section of the `package.json` file.
+
+⚠️ Be sure to use 'use client' in the component file if it is a [client component](https://18.react.dev/reference/rsc/use-client).
+
+Avoid using barrel exports. Instead, import the components directly from the `src` directory.
+
+## Importing the components and modules
+```tsx
+import { Button } from '@zenpatient-org/healthspan-marketing-ui/Button';
+import { CallbackModule } from '@zenpatient-org/healthspan-marketing-ui/CallbackModule';
 ```
 
 ### To build for publishing:
@@ -44,5 +46,5 @@ npm publish
 Design tokens (colors, spacing, etc.) are injected via CSS variables globally. Just import the global styles once:
 
 ```tsx
-import "@zenpatient-org/healthspan-marketing-ui/dist/index.css"
+import "@zenpatient-org/healthspan-marketing-ui/dist/healthspan-marketing-ui.css"
 ```

package/dist/_virtual/Popover.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../node_modules/react-tiny-popover/dist/Popover.cjs.js");var r=e.__require();exports.PopoverExports=r;

package/dist/_virtual/Popover.es.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/react-tiny-popover/dist/Popover.es.js";
+var e = r();
+export {
+  e as P
+};

package/dist/_virtual/Popover.es2.js

@@ -0,0 +1,4 @@
+var o = {};
+export {
+  o as __exports
+};

package/dist/_virtual/{jsx-runtime.cjs2.js → PopoverPortal.cjs.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;

package/dist/_virtual/PopoverPortal.es.js

@@ -0,0 +1,4 @@
+var o = {};
+export {
+  o as __exports
+};

package/dist/_virtual/useArrowContainer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;

package/dist/_virtual/useArrowContainer.es.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/useElementRef.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;

package/dist/_virtual/useHandlePrevValues.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;

package/dist/_virtual/useHandlePrevValues.es.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/useMemoizedArray.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;

package/dist/_virtual/useMemoizedArray.es.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/usePopover.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;

package/dist/_virtual/usePopover.es.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/util.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;

package/dist/_virtual/util.es.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/components/Benefit/Benefit.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../Typography/Typography.cjs.js"),a=require("./benefit.module.css.cjs.js");function o({title:i,description:r,button:n}){return e.jsxs("div",{className:a.default.benefit,children:[e.jsx(t.Typography,{as:"h3",defaultVariant:"headingMd",mobileVariant:"headingSm",children:i}),e.jsx(t.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyXs",children:r}),e.jsx("div",{className:a.default.textButton,children:n})]})}exports.Benefit=o;

package/dist/components/Benefit/Benefit.es.js

@@ -0,0 +1,13 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Typography as i } from "../Typography/Typography.es.js";
+import a from "./benefit.module.css.es.js";
+function m({ title: t, description: r, button: n }) {
+  return /* @__PURE__ */ d("div", { className: a.benefit, children: [
+    /* @__PURE__ */ e(i, { as: "h3", defaultVariant: "headingMd", mobileVariant: "headingSm", children: t }),
+    /* @__PURE__ */ e(i, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyXs", children: r }),
+    /* @__PURE__ */ e("div", { className: a.textButton, children: n })
+  ] });
+}
+export {
+  m as Benefit
+};

package/dist/components/Benefit/benefit.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="benefit-module__benefit___QQY-K",e="benefit-module__textButton___qXfU6",n={benefit:t,textButton:e};exports.benefit=t;exports.default=n;exports.textButton=e;

package/dist/components/Benefit/benefit.module.css.es.js

@@ -0,0 +1,9 @@
+const t = "benefit-module__benefit___QQY-K", e = "benefit-module__textButton___qXfU6", n = {
+  benefit: t,
+  textButton: e
+};
+export {
+  t as benefit,
+  n as default,
+  e as textButton
+};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.cjs.js"),R=require("react"),f=require("../../utils/cn.cjs.js"),r=require("../Icon/Icon.cjs.js"),s=require("./button.module.css.cjs.js"),o=R.forwardRef(({variant:u="primary",size:i="md",as:c="button",disabled:e=!1,children:l,prefixIcon:n,suffixIcon:a,...d},x)=>{const m=s.default[u]||"",j=s.default[i]||"",p=e?s.default.disabled:"";return t.jsxRuntimeExports.jsx(c,{ref:x,...d,className:f.cn(s.default.button,m,j,p),disabled:e,children:t.jsxRuntimeExports.jsxs("div",{className:s.default.content,children:[n&&t.jsxRuntimeExports.jsx("div",{className:s.default.iconWrap,children:t.jsxRuntimeExports.jsx(r.Icon,{name:n})}),t.jsxRuntimeExports.jsx("div",{children:l}),a&&t.jsxRuntimeExports.jsx("div",{className:s.default.iconWrap,children:t.jsxRuntimeExports.jsx(r.Icon,{name:a})})]})})});o.displayName="Button";exports.Button=o;
+"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:d,prefixIcon:n,suffixIcon:a,...i},m)=>{const f=t.default[r]||"",j=t.default[l]||"",b=s?t.default.disabled:"";return e.jsx(u,{ref:m,...i,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:d}),a&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(c.Icon,{name:a})})]})})});o.displayName="Button";exports.Button=o;

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

@@ -1,19 +1,19 @@
-import { j as s } from "../../_virtual/jsx-runtime.es.js";
-import { forwardRef as f } from "react";
-import { cn as u } from "../../utils/cn.es.js";
+import { jsx as a, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { cn as u } from "../../utils/cn/cn.es.js";
 import { Icon as n } from "../Icon/Icon.es.js";
-import a from "./button.module.css.es.js";
-const v = f(
-  ({ variant: m = "primary", size: e = "md", as: i = "button", disabled: t = !1, children: c, prefixIcon: r, suffixIcon: o, ...l }, d) => {
-    const p = a[m] || "", j = a[e] || "", x = t ? a.disabled : "";
-    return /* @__PURE__ */ s.jsx(i, { ref: d, ...l, className: u(a.button, p, j, x), disabled: t, children: /* @__PURE__ */ s.jsxs("div", { className: a.content, children: [
-      r && /* @__PURE__ */ s.jsx("div", { className: a.iconWrap, children: /* @__PURE__ */ s.jsx(n, { name: r }) }),
-      /* @__PURE__ */ s.jsx("div", { children: c }),
-      o && /* @__PURE__ */ s.jsx("div", { className: a.iconWrap, children: /* @__PURE__ */ s.jsx(n, { name: o }) })
+import s from "./button.module.css.es.js";
+const b = h(
+  ({ variant: m = "primary", size: e = "md", as: i = "button", disabled: r = !1, children: c, prefixIcon: t, suffixIcon: o, ...l }, d) => {
+    const p = s[m] || "", f = s[e] || "", v = r ? s.disabled : "";
+    return /* @__PURE__ */ a(i, { ref: d, ...l, className: u(s.button, p, f, v), disabled: r, children: /* @__PURE__ */ N("div", { className: s.content, children: [
+      t && /* @__PURE__ */ a("div", { className: s.iconWrap, children: /* @__PURE__ */ a(n, { name: t }) }),
+      /* @__PURE__ */ a("div", { children: c }),
+      o && /* @__PURE__ */ a("div", { className: s.iconWrap, children: /* @__PURE__ */ a(n, { name: o }) })
     ] }) });
   }
 );
-v.displayName = "Button";
+b.displayName = "Button";
 export {
-  v as Button
+  b as Button
 };

package/dist/components/Callback/Callback.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.cjs.js"),d=require("../../utils/cn.cjs.js");require("react");const x=require("../Button/Button.cjs.js"),r=require("../Typography/Typography.cjs.js"),e=require("./callback.module.css.cjs.js"),a=require("./constants.cjs.js"),E=({image:i,title:n,description:l,price:o,button:u,size:s="lg"})=>{const c=e.default[s]||"";return t.jsxRuntimeExports.jsxs("div",{className:d.cn(e.default.root,c),children:[t.jsxRuntimeExports.jsxs("div",{className:e.default.productInfo,children:[t.jsxRuntimeExports.jsx("img",{src:i,alt:"product image",className:e.default.productImage}),t.jsxRuntimeExports.jsxs("div",{className:e.default.textContainer,children:[t.jsxRuntimeExports.jsx("div",{className:e.default.titleContainer,children:t.jsxRuntimeExports.jsx(r.Typography,{defaultVariant:a.TITLE_BY_SIZE_DESKTOP[s],mobileVariant:a.TITLE_BY_SIZE_MOBILE[s],className:e.default.title,children:n})}),t.jsxRuntimeExports.jsx("div",{className:e.default.divider}),t.jsxRuntimeExports.jsxs("div",{className:e.default.descriptionContainer,children:[t.jsxRuntimeExports.jsx(r.Typography,{defaultVariant:a.DESC_BY_SIZE_DESKTOP[s],mobileVariant:a.DESC_BY_SIZE_MOBILE[s],className:e.default.description,children:l}),t.jsxRuntimeExports.jsxs(r.Typography,{defaultVariant:a.PRICE_BY_SIZE_DESKTOP[s],mobileVariant:a.PRICE_BY_SIZE_MOBILE[s],className:e.default.price,children:["Starting at ",o]})]})]})]}),t.jsxRuntimeExports.jsx("div",{className:e.default.buttonContainer,children:t.jsxRuntimeExports.jsx(x.Button,{...u,as:"a",size:a.BUTTON_BY_SIZE[s],children:"GET STARTED"})})]})};exports.Callback=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),u=require("../../utils/cn/cn.cjs.js"),_=require("../Button/Button.cjs.js"),r=require("../Typography/Typography.cjs.js"),e=require("./callback.module.css.cjs.js"),l=require("./constants.cjs.js"),m=({image:s,title:n,description:c,price:i,button:d,size:t="lg"})=>{const o=e.default[t]||"";return a.jsxs("div",{className:u.cn(e.default.root,o),children:[a.jsxs("div",{className:e.default.productInfo,children:[a.jsx("img",{src:s,alt:"product image",className:e.default.productImage}),a.jsxs("div",{className:e.default.textContainer,children:[a.jsx("div",{className:e.default.titleContainer,children:a.jsx(r.Typography,{defaultVariant:l.TITLE_BY_SIZE_DESKTOP[t],mobileVariant:l.TITLE_BY_SIZE_MOBILE[t],className:e.default.title,children:n})}),a.jsx("div",{className:e.default.divider}),a.jsxs("div",{className:e.default.descriptionContainer,children:[a.jsx(r.Typography,{defaultVariant:l.DESC_BY_SIZE_DESKTOP[t],mobileVariant:l.DESC_BY_SIZE_MOBILE[t],className:e.default.description,children:c}),a.jsxs(r.Typography,{defaultVariant:l.PRICE_BY_SIZE_DESKTOP[t],mobileVariant:l.PRICE_BY_SIZE_MOBILE[t],className:e.default.price,children:["Starting at ",i]})]})]})]}),a.jsx("div",{className:e.default.buttonContainer,children:a.jsx(_.Button,{...d,as:"a",size:l.BUTTON_BY_SIZE[t],children:"GET STARTED"})})]})};exports.Callback=m;

package/dist/components/Callback/Callback.es.js

@@ -1,54 +1,53 @@
-import { j as a } from "../../_virtual/jsx-runtime.es.js";
-import { cn as m } from "../../utils/cn.es.js";
-import "react";
-import { Button as d } from "../Button/Button.es.js";
-import { Typography as t } from "../Typography/Typography.es.js";
-import r from "./callback.module.css.es.js";
-import { TITLE_BY_SIZE_MOBILE as E, TITLE_BY_SIZE_DESKTOP as _, DESC_BY_SIZE_MOBILE as p, DESC_BY_SIZE_DESKTOP as x, PRICE_BY_SIZE_MOBILE as I, PRICE_BY_SIZE_DESKTOP as j, BUTTON_BY_SIZE as S } from "./constants.es.js";
-const v = ({ image: i, title: e, description: l, price: n, button: o, size: s = "lg" }) => {
-  const c = r[s] || "";
-  return /* @__PURE__ */ a.jsxs("div", { className: m(r.root, c), children: [
-    /* @__PURE__ */ a.jsxs("div", { className: r.productInfo, children: [
-      /* @__PURE__ */ a.jsx("img", { src: i, alt: "product image", className: r.productImage }),
-      /* @__PURE__ */ a.jsxs("div", { className: r.textContainer, children: [
-        /* @__PURE__ */ a.jsx("div", { className: r.titleContainer, children: /* @__PURE__ */ a.jsx(
-          t,
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { cn as d } from "../../utils/cn/cn.es.js";
+import { Button as E } from "../Button/Button.es.js";
+import { Typography as e } from "../Typography/Typography.es.js";
+import a from "./callback.module.css.es.js";
+import { TITLE_BY_SIZE_MOBILE as _, TITLE_BY_SIZE_DESKTOP as I, DESC_BY_SIZE_MOBILE as p, DESC_BY_SIZE_DESKTOP as S, PRICE_BY_SIZE_MOBILE as T, PRICE_BY_SIZE_DESKTOP as B, BUTTON_BY_SIZE as N } from "./constants.es.js";
+const Y = ({ image: l, title: n, description: o, price: c, button: s, size: r = "lg" }) => {
+  const m = a[r] || "";
+  return /* @__PURE__ */ i("div", { className: d(a.root, m), children: [
+    /* @__PURE__ */ i("div", { className: a.productInfo, children: [
+      /* @__PURE__ */ t("img", { src: l, alt: "product image", className: a.productImage }),
+      /* @__PURE__ */ i("div", { className: a.textContainer, children: [
+        /* @__PURE__ */ t("div", { className: a.titleContainer, children: /* @__PURE__ */ t(
+          e,
           {
-            defaultVariant: _[s],
-            mobileVariant: E[s],
-            className: r.title,
-            children: e
+            defaultVariant: I[r],
+            mobileVariant: _[r],
+            className: a.title,
+            children: n
           }
         ) }),
-        /* @__PURE__ */ a.jsx("div", { className: r.divider }),
-        /* @__PURE__ */ a.jsxs("div", { className: r.descriptionContainer, children: [
-          /* @__PURE__ */ a.jsx(
-            t,
+        /* @__PURE__ */ t("div", { className: a.divider }),
+        /* @__PURE__ */ i("div", { className: a.descriptionContainer, children: [
+          /* @__PURE__ */ t(
+            e,
             {
-              defaultVariant: x[s],
-              mobileVariant: p[s],
-              className: r.description,
-              children: l
+              defaultVariant: S[r],
+              mobileVariant: p[r],
+              className: a.description,
+              children: o
             }
           ),
-          /* @__PURE__ */ a.jsxs(
-            t,
+          /* @__PURE__ */ i(
+            e,
             {
-              defaultVariant: j[s],
-              mobileVariant: I[s],
-              className: r.price,
+              defaultVariant: B[r],
+              mobileVariant: T[r],
+              className: a.price,
               children: [
                 "Starting at ",
-                n
+                c
               ]
             }
           )
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ a.jsx("div", { className: r.buttonContainer, children: /* @__PURE__ */ a.jsx(d, { ...o, as: "a", size: S[s], children: "GET STARTED" }) })
+    /* @__PURE__ */ t("div", { className: a.buttonContainer, children: /* @__PURE__ */ t(E, { ...s, as: "a", size: N[r], children: "GET STARTED" }) })
   ] });
 };
 export {
-  v as Callback
+  Y as Callback
 };

package/dist/components/ComplexTooltip/ComplexTooltip.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("react"),x=require("../../_virtual/Popover.cjs.js"),h=require("../../utils/useIsMobile.cjs.js"),k=require("./components/ComplexTooltipContent/ComplexTooltipContent.cjs.js"),q=({trigger:n,title:p,description:a,link:m,style:f="light",isBlurred:M=!1,children:c,positions:b=["top","bottom","left","right"],onClose:r})=>{const[v,u]=e.useState(!1),o=e.useRef(null),s=e.useCallback(()=>{o.current&&clearTimeout(o.current),o.current=setTimeout(()=>u(!0),200)},[]),t=e.useCallback(()=>{o.current=setTimeout(()=>{u(!1),r==null||r()},200)},[r]),l=e.useCallback(()=>u(d=>!d),[]),C=e.useMemo(()=>n==="hover"?{onMouseEnter:s,onMouseLeave:t}:{onClick:l},[n,s,t,l]),T=e.useMemo(()=>n==="hover"?{onMouseEnter:s,onMouseLeave:t}:{},[n,s,t]);return e.useEffect(()=>()=>{o.current&&clearTimeout(o.current)},[]),h.useIsMobile()?c:i.jsx(x.PopoverExports.Popover,{isOpen:v,positions:b,padding:8,onClickOutside:t,content:i.jsx(k.ComplexTooltipContent,{title:p,description:a,link:m,style:f,isBlurred:M,onClose:t,...T}),children:i.jsx("div",{...C,children:c})})};exports.ComplexTooltip=q;

package/dist/components/ComplexTooltip/ComplexTooltip.d.ts

@@ -1,19 +1,11 @@
-import { default as React } from 'react';
+import { ReactElement } from 'react';
 import { PopoverPosition } from 'react-tiny-popover';
-import { TColorScheme } from '../../types/common';
+import { CommonComplexTooltipProps } from './types';
 
 type ComplexTooltipProps = {
+    children: ReactElement;
     trigger: 'hover' | 'click';
-    title: string;
-    description: string;
-    link?: {
-        label: string;
-        url: string;
-    };
-    children: React.ReactElement;
-    style: Omit<TColorScheme, 'custom'>;
     positions?: Array<PopoverPosition>;
-    isBlurred?: boolean;
-};
-export declare const ComplexTooltip: ({ trigger, title, description, link, style, isBlurred, children, positions, }: ComplexTooltipProps) => import("react/jsx-runtime").JSX.Element;
+} & CommonComplexTooltipProps;
+export declare const ComplexTooltip: ({ trigger, title, description, link, style, isBlurred, children, positions, onClose, }: ComplexTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ComplexTooltip/ComplexTooltip.es.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import { useState as C, useRef as P, useCallback as i, useMemo as l, useEffect as k } from "react";
+import { P as E } from "../../_virtual/Popover.es.js";
+import { useIsMobile as O } from "../../utils/useIsMobile.es.js";
+import { ComplexTooltipContent as L } from "./components/ComplexTooltipContent/ComplexTooltipContent.es.js";
+const y = ({
+  trigger: t,
+  title: m,
+  description: a,
+  link: f,
+  style: v = "light",
+  isBlurred: M = !1,
+  children: c,
+  positions: d = ["top", "bottom", "left", "right"],
+  onClose: r
+}) => {
+  const [h, s] = C(!1), e = P(null), n = i(() => {
+    e.current && clearTimeout(e.current), e.current = setTimeout(() => s(!0), 200);
+  }, []), o = i(() => {
+    e.current = setTimeout(() => {
+      s(!1), r == null || r();
+    }, 200);
+  }, [r]), p = i(() => s((x) => !x), []), T = l(() => t === "hover" ? {
+    onMouseEnter: n,
+    onMouseLeave: o
+  } : {
+    onClick: p
+  }, [t, n, o, p]), b = l(() => t === "hover" ? {
+    onMouseEnter: n,
+    onMouseLeave: o
+  } : {}, [t, n, o]);
+  return k(() => () => {
+    e.current && clearTimeout(e.current);
+  }, []), O() ? c : /* @__PURE__ */ u(
+    E.Popover,
+    {
+      isOpen: h,
+      positions: d,
+      padding: 8,
+      onClickOutside: o,
+      content: /* @__PURE__ */ u(
+        L,
+        {
+          title: m,
+          description: a,
+          link: f,
+          style: v,
+          isBlurred: M,
+          onClose: o,
+          ...b
+        }
+      ),
+      children: /* @__PURE__ */ u("div", { ...T, children: c })
+    }
+  );
+};
+export {
+  y as ComplexTooltip
+};

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../../Icon/Icon.cjs.js"),r=require("../../../Icon/constants.cjs.js"),h=require("../../../TextButton/TextButton.cjs.js"),s=require("../../../Typography/Typography.cjs.js"),x=require("../../../../utils/cn/cn.cjs.js"),t=require("./complexTooltipContent.module.css.cjs.js"),_=({style:n,title:l,description:u,link:o,isBlurred:c,className:i,onMouseEnter:d,onMouseLeave:p,onClose:a})=>e.jsxs("div",{className:x.cn(t.default.content,c&&t.default.blurred,i),"data-style":n,onMouseEnter:d,onMouseLeave:p,children:[e.jsxs("div",{className:t.default.contentHeader,children:[e.jsx(s.Typography,{as:"h4",defaultVariant:"headingSm",children:l}),a&&e.jsxs("button",{className:t.default.closeButton,onClick:a,children:["(",e.jsx(m.Icon,{name:r.EIconName.CLOSE,className:t.default.closeIcon}),")"]})]}),e.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",children:u}),o&&e.jsx(h.TextButton,{suffixIcon:r.EIconName.ARROW_FORWARD,as:"a",href:o.url,inverted:n==="dark"&&!c||n==="light"&&c,children:o.label})]});exports.ComplexTooltipContent=_;

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.d.ts

@@ -0,0 +1,10 @@
+import { CommonComplexTooltipProps } from '../../types';
+
+type ComplexTooltipContentProps = {
+    className?: string;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onClose?: () => void;
+} & CommonComplexTooltipProps;
+export declare const ComplexTooltipContent: ({ style, title, description, link, isBlurred, className, onMouseEnter, onMouseLeave, onClose, }: ComplexTooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/ComplexTooltipContent.es.js

@@ -0,0 +1,50 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { Icon as h } from "../../../Icon/Icon.es.js";
+import { EIconName as c } from "../../../Icon/constants.es.js";
+import { TextButton as u } from "../../../TextButton/TextButton.es.js";
+import { Typography as i } from "../../../Typography/Typography.es.js";
+import { cn as x } from "../../../../utils/cn/cn.es.js";
+import o from "./complexTooltipContent.module.css.es.js";
+const C = ({
+  style: r,
+  title: l,
+  description: s,
+  link: e,
+  isBlurred: a,
+  className: d,
+  onMouseEnter: p,
+  onMouseLeave: f,
+  onClose: m
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: x(o.content, a && o.blurred, d),
+    "data-style": r,
+    onMouseEnter: p,
+    onMouseLeave: f,
+    children: [
+      /* @__PURE__ */ n("div", { className: o.contentHeader, children: [
+        /* @__PURE__ */ t(i, { as: "h4", defaultVariant: "headingSm", children: l }),
+        m && /* @__PURE__ */ n("button", { className: o.closeButton, onClick: m, children: [
+          "(",
+          /* @__PURE__ */ t(h, { name: c.CLOSE, className: o.closeIcon }),
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ t(i, { as: "p", defaultVariant: "bodySm", children: s }),
+      e && /* @__PURE__ */ t(
+        u,
+        {
+          suffixIcon: c.ARROW_FORWARD,
+          as: "a",
+          href: e.url,
+          inverted: r === "dark" && !a || r === "light" && a,
+          children: e.label
+        }
+      )
+    ]
+  }
+);
+export {
+  C as ComplexTooltipContent
+};

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/complexTooltipContent.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="complexTooltipContent-module__content___gGk3B",e="complexTooltipContent-module__blurred___5ZgFB",t="complexTooltipContent-module__contentHeader___zWu-A",n="complexTooltipContent-module__closeButton___LvHd5",l="complexTooltipContent-module__closeIcon___8Nx3Z",c={content:o,blurred:e,contentHeader:t,closeButton:n,closeIcon:l};exports.blurred=e;exports.closeButton=n;exports.closeIcon=l;exports.content=o;exports.contentHeader=t;exports.default=c;

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/complexTooltipContent.module.css.es.js

@@ -0,0 +1,15 @@
+const o = "complexTooltipContent-module__content___gGk3B", t = "complexTooltipContent-module__blurred___5ZgFB", e = "complexTooltipContent-module__contentHeader___zWu-A", n = "complexTooltipContent-module__closeButton___LvHd5", c = "complexTooltipContent-module__closeIcon___8Nx3Z", l = {
+  content: o,
+  blurred: t,
+  contentHeader: e,
+  closeButton: n,
+  closeIcon: c
+};
+export {
+  t as blurred,
+  n as closeButton,
+  c as closeIcon,
+  o as content,
+  e as contentHeader,
+  l as default
+};

package/dist/components/ComplexTooltip/components/ComplexTooltipContent/index.d.ts

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

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

@@ -1 +1,2 @@
 export { ComplexTooltip } from './ComplexTooltip';
+export { ComplexTooltipContent } from './components/ComplexTooltipContent';

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

@@ -0,0 +1,13 @@
+import { TColorScheme } from '../../types/common';
+
+export type CommonComplexTooltipProps = {
+    title: string;
+    description: string;
+    link?: {
+        label: string;
+        url: string;
+    };
+    style: Omit<TColorScheme, 'custom'>;
+    isBlurred?: boolean;
+    onClose?: () => void;
+};

package/dist/components/ContentTabs/ContentTabs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.cjs.js"),l=require("../../styles/typography.module.css.cjs.js"),n=require("../../utils/cn.cjs.js"),a=require("../Icon/Icon.cjs.js"),s=require("./contentTabs.module.css.cjs.js");function u({tabs:o,activeTab:i,colorScheme:r,onTabClick:c}){return t.jsxRuntimeExports.jsx("div",{className:n.cn(s.default.root,s.default[r]),children:o.map(e=>t.jsxRuntimeExports.jsxs("div",{className:s.default.tabWrap,children:[t.jsxRuntimeExports.jsxs("button",{className:n.cn(s.default.tab,{[s.default.activeTab]:i.label===e.label}),onClick:()=>c(e),children:[e.icon&&t.jsxRuntimeExports.jsx("div",{className:s.default.icon,children:t.jsxRuntimeExports.jsx(a.Icon,{name:e.icon})}),t.jsxRuntimeExports.jsx("div",{className:l.default.headingXs,children:e.label})]}),t.jsxRuntimeExports.jsx("p",{className:n.cn(s.default.description,{[s.default.descriptionActive]:i.label===e.label},l.default.bodySm),children:e.description})]},String(e.label)))})}exports.ContentTabs=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),t=require("../../styles/typography.module.css.cjs.js"),c=require("../../utils/cn/cn.cjs.js"),r=require("../Icon/Icon.cjs.js"),n=require("./contentTabs.module.css.cjs.js");function d({tabs:i,activeTab:s,colorScheme:a,onTabClick:o}){return l.jsx("div",{className:c.cn(n.default.root,n.default[a]),children:i.map(e=>l.jsxs("div",{className:n.default.tabWrap,children:[l.jsxs("button",{className:c.cn(n.default.tab,{[n.default.activeTab]:s.label===e.label}),onClick:()=>o(e),children:[e.icon&&l.jsx("div",{className:n.default.icon,children:l.jsx(r.Icon,{name:e.icon})}),l.jsx("div",{className:t.default.headingXs,children:e.label})]}),l.jsx("p",{className:c.cn(n.default.description,{[n.default.descriptionActive]:s.label===e.label},t.default.bodySm),children:e.description})]},String(e.label)))})}exports.ContentTabs=d;

package/dist/components/ContentTabs/ContentTabs.es.js

@@ -1,38 +1,38 @@
-import { j as i } from "../../_virtual/jsx-runtime.es.js";
-import r from "../../styles/typography.module.css.es.js";
-import { cn as l } from "../../utils/cn.es.js";
-import { Icon as a } from "../Icon/Icon.es.js";
+import { jsx as l, jsxs as n } from "react/jsx-runtime";
+import c from "../../styles/typography.module.css.es.js";
+import { cn as o } from "../../utils/cn/cn.es.js";
+import { Icon as d } from "../Icon/Icon.es.js";
 import e from "./contentTabs.module.css.es.js";
-function h({ tabs: n, activeTab: o, colorScheme: c, onTabClick: m }) {
-  return /* @__PURE__ */ i.jsx("div", { className: l(e.root, e[c]), children: n.map((s) => /* @__PURE__ */ i.jsxs("div", { className: e.tabWrap, children: [
-    /* @__PURE__ */ i.jsxs(
+function v({ tabs: s, activeTab: r, colorScheme: a, onTabClick: m }) {
+  return /* @__PURE__ */ l("div", { className: o(e.root, e[a]), children: s.map((i) => /* @__PURE__ */ n("div", { className: e.tabWrap, children: [
+    /* @__PURE__ */ n(
       "button",
       {
-        className: l(e.tab, {
-          [e.activeTab]: o.label === s.label
+        className: o(e.tab, {
+          [e.activeTab]: r.label === i.label
         }),
-        onClick: () => m(s),
+        onClick: () => m(i),
         children: [
-          s.icon && /* @__PURE__ */ i.jsx("div", { className: e.icon, children: /* @__PURE__ */ i.jsx(a, { name: s.icon }) }),
-          /* @__PURE__ */ i.jsx("div", { className: r.headingXs, children: s.label })
+          i.icon && /* @__PURE__ */ l("div", { className: e.icon, children: /* @__PURE__ */ l(d, { name: i.icon }) }),
+          /* @__PURE__ */ l("div", { className: c.headingXs, children: i.label })
         ]
       }
     ),
-    /* @__PURE__ */ i.jsx(
+    /* @__PURE__ */ l(
       "p",
       {
-        className: l(
+        className: o(
           e.description,
           {
-            [e.descriptionActive]: o.label === s.label
+            [e.descriptionActive]: r.label === i.label
           },
-          r.bodySm
+          c.bodySm
         ),
-        children: s.description
+        children: i.description
       }
     )
-  ] }, String(s.label))) });
+  ] }, String(i.label))) });
 }
 export {
-  h as ContentTabs
+  v as ContentTabs
 };

package/dist/components/Cursor/Cursor.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./components/ClientCursor.cjs.js"),n=require("./components/ServerCursor.cjs.js");function s({children:r,label:u,colorScheme:o}){return typeof window>"u"?e.jsx(n.ServerCursor,{children:r}):e.jsx(t.ClientCursor,{label:u,colorScheme:o,children:r})}exports.Cursor=s;

package/dist/components/Cursor/Cursor.es.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { ClientCursor as f } from "./components/ClientCursor.es.js";
+import { ServerCursor as i } from "./components/ServerCursor.es.js";
+function p({ children: r, label: t, colorScheme: e }) {
+  return typeof window > "u" ? /* @__PURE__ */ o(i, { children: r }) : /* @__PURE__ */ o(f, { label: t, colorScheme: e, children: r });
+}
+export {
+  p as Cursor
+};

package/dist/components/Cursor/components/ClientCursor.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("react"),x=require("react-dom"),q=require("../../../utils/cn/cn.cjs.js"),b=require("../../Typography/Typography.cjs.js"),s=require("../cursor.module.css.cjs.js");function g({children:c,label:a,colorScheme:l}){const[r,d]=e.useState({x:0,y:0}),[f,o]=e.useState(!1),m=e.useRef(null),[p,n]=e.useState(!1);e.useEffect(()=>(n(!0),()=>n(!1)),[]),e.useEffect(()=>{const u=i=>{d({x:i.clientX,y:i.clientY})};return window.addEventListener("mousemove",u),()=>window.removeEventListener("mousemove",u)},[]);const y=()=>{o(!0)},h=()=>{o(!1)},v=t.jsx("div",{ref:m,className:q.cn(s.default.cursor,{[s.default.cursorVisible]:f}),style:{left:`${r.x}px`,top:`${r.y}px`},"data-color-scheme":l,children:t.jsx(b.Typography,{as:"p",emphasis:!0,defaultVariant:"labelLg",children:a})});return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:s.default.cursorContainer,onMouseEnter:y,onMouseLeave:h,children:c}),p&&x.createPortal(v,document.body)]})}exports.ClientCursor=g;