@zenpatient-org/healthspan-marketing-ui 0.1.171 → 0.2.0

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

@@ -0,0 +1,74 @@
+.content {
+    border-radius: var(--border-radius-sm);
+    border: var(--border-width-sm) solid var(--border-color-alpha-black-10);
+    color: var(--color-text-primary-inverted);
+    width: 360px;
+    max-width: 360px;
+    padding: var(--spacing-24);
+    box-shadow:
+        0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 8px 10px -6px var(--border-color-alpha-black-10);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-16);
+    outline: none;
+}
+
+.content[data-style='light'] {
+    border-color: var(--border-color-alpha-black-10);
+    background-color: var(--color-bg-fill-brand-inverse);
+    color: var(--color-text-primary);
+}
+
+.content[data-style='dark'] {
+    border-color: var(--border-color-alpha-white-10);
+    background-color: var(--color-bg-fill-neutral-dark);
+    color: var(--color-text-primary-inverted);
+}
+
+.blurred {
+    backdrop-filter: blur(25px);
+}
+
+.blurred[data-style='light'] {
+    background-color: var(--color-bg-fill-alpha-white-10);
+    color: var(--color-text-primary-inverted);
+}
+
+.blurred[data-style='dark'] {
+    background-color: var(--color-bg-fill-alpha-black-10);
+    color: var(--color-text-primary);
+}
+
+.contentHeader {
+    position: relative;
+    width: 100%;
+    padding-right: var(--spacing-40);
+}
+
+.closeButton {
+    position: absolute;
+    top: 5px;
+    right: 0;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 0;
+    border: none;
+    background: none;
+    display: none;
+    color: inherit;
+}
+
+.closeIcon {
+    width: 22px;
+    height: 12px;
+    margin: 0 4px;
+}
+
+@media (width <= 768px) {
+    .closeButton {
+        display: flex;
+    }
+}

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../utils/cn/cn.cjs.js"),s=require("../Typography/Typography.cjs.js"),d=require("../IconBracket/IconBracket.cjs.js"),u=require("../Icon/Icon.cjs.js"),n=require("./contentTabs.module.css.cjs.js");function m({tabs:c,activeTab:t,colorScheme:r,activeWithArrow:o,onTabClick:i}){return e.jsx("div",{className:l.cn(n.default.root,n.default[r]),children:c.map(a=>e.jsxs("div",{className:n.default.tabWrap,children:[e.jsxs("button",{className:l.cn(n.default.tab,{[n.default.activeTab]:t.label===a.label}),onClick:()=>i(a),children:[t.label===a.label&&o&&e.jsx("div",{className:n.default.arrow,children:e.jsx(d.IconBracket,{variant:"arrow",size:"md",colorScheme:r})}),a.icon&&e.jsx(u.Icon,{name:a.icon,className:n.default.icon}),e.jsx(s.Typography,{defaultVariant:"headingXxs",children:a.label})]}),e.jsx("div",{className:l.cn(n.default.itemContent,{[n.default.itemContentOpen]:t.label===a.label}),children:e.jsx("div",{className:n.default.itemContentInner,children:e.jsx(s.Typography,{as:"div",defaultVariant:"bodySm",children:a.description})})})]},String(a.label)))})}exports.ContentTabs=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../utils/cn/cn.cjs.js"),n=require("../../src/components/ContentTabs/contentTabs.module.css"),d=require("../IconBracket/IconBracket.cjs.js"),m=require("../Icon/Icon.cjs.js"),o=require("../Typography/Typography.cjs.js");function u({tabs:a,activeTab:c,colorScheme:i,activeWithArrow:t,onTabClick:l}){return e.jsx("div",{className:r.cn(n.root,n[i]),children:a.map(s=>e.jsxs("div",{className:n.tabWrap,children:[e.jsxs("button",{className:r.cn(n.tab,{[n.activeTab]:c.label===s.label}),onClick:()=>l(s),children:[c.label===s.label&&t&&e.jsx("div",{className:n.arrow,children:e.jsx(d.IconBracket,{variant:"arrow",size:"md",colorScheme:i})}),s.icon&&e.jsx(m.Icon,{name:s.icon,className:n.icon}),e.jsx(o.Typography,{defaultVariant:"headingXxs",children:s.label})]}),e.jsx("div",{className:r.cn(n.itemContent,{[n.itemContentOpen]:c.label===s.label}),children:e.jsx("div",{className:n.itemContentInner,children:e.jsx(o.Typography,{as:"div",defaultVariant:"bodySm",children:s.description})})})]},String(s.label)))})}exports.ContentTabs=u;

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

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as i, jsxs as o } from "react/jsx-runtime";
 import { cn as l } from "../../utils/cn/cn.es.js";
-import { Typography as t } from "../Typography/Typography.es.js";
+import e from "../../components/ContentTabs/contentTabs.module.css";
 import { IconBracket as d } from "../IconBracket/IconBracket.es.js";
 import { Icon as p } from "../Icon/Icon.es.js";
-import e from "./contentTabs.module.css.es.js";
+import { Typography as t } from "../Typography/Typography.es.js";
 function b({ tabs: m, activeTab: r, colorScheme: a, activeWithArrow: s, onTabClick: c }) {
   return /* @__PURE__ */ i("div", { className: l(e.root, e[a]), children: m.map((n) => /* @__PURE__ */ o("div", { className: e.tabWrap, children: [
     /* @__PURE__ */ o(

package/dist/components/ContentTabs/contentTabs.module.css

@@ -0,0 +1,88 @@
+.root {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+}
+
+.tabWrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.tab {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-16);
+    color: var(--color-text-primary-disabled);
+    padding: var(--spacing-20) var(--spacing-20);
+    border-radius: var(--border-radius-sm);
+    min-height: 60px;
+    border: none;
+    background: none;
+    box-shadow: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.light .tab {
+    background-color: var(--color-bg-fill-brand-inverse);
+}
+
+.dark .tab {
+    background-color: var(--color-bg-fill-neutral-dark);
+}
+
+.activeTab {
+    cursor: default;
+}
+
+.light .activeTab {
+    color: var(--color-text-primary-inverted);
+    background: linear-gradient(93deg, var(--color-bg-fill-brand-indigo) 40.44%, var(--color-indigo-400) 160.95%);
+}
+
+.dark .activeTab {
+    color: var(--color-text-primary);
+    background:
+        linear-gradient(93deg, var(--color-bg-fill-brand-solar) 40.44%, var(--color-solar-400) 160.95%),
+        var(--color-bg-fill-neutral-dark);
+}
+
+.icon {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    color: inherit;
+}
+
+.light .description {
+    color: var(--color-text-primary);
+}
+
+.dark .description {
+    color: var(--color-text-primary-inverted);
+}
+
+.arrow {
+    margin-right: 8px;
+}
+
+.itemContent {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    transition: grid-template-rows 0.3s, padding-top 0.3s;
+    padding-top: 0;
+}
+
+.itemContentOpen {
+    grid-template-rows: 1fr;
+    padding-top: 16px;
+}
+
+.itemContentInner {
+    min-height: 0;
+}

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

@@ -1 +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;
+"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=="undefined"?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

@@ -2,7 +2,7 @@ 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 });
+  return typeof window == "undefined" ? /* @__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

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

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

@@ -3,8 +3,8 @@ import { jsx as e, jsxs as b } from "react/jsx-runtime";
 import { useState as o, useRef as E, useEffect as c } from "react";
 import { createPortal as L } from "react-dom";
 import { cn as M } from "../../../utils/cn/cn.es.js";
+import s from "../../../components/Cursor/components/clientCursor.module.css";
 import { Typography as w } from "../../Typography/Typography.es.js";
-import s from "../cursor.module.css.es.js";
 function R({ children: l, label: a, colorScheme: m }) {
   const [t, d] = o({ x: 0, y: 0 }), [f, r] = o(!1), p = E(null), [v, n] = o(!1);
   c(() => (n(!0), () => n(!1)), []), c(() => {

package/dist/components/Cursor/components/clientCursor.module.css

@@ -0,0 +1,36 @@
+.cursor {
+    padding: 48px;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    width: 160px;
+    height: 160px;
+    border-radius: 50%;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    border: var(--border-width-sm) solid var(--border-color-alpha-white-50);
+    background: var(--color-bg-fill-alpha-black-10);
+    backdrop-filter: blur(6px);
+    color: var(--color-text-primary-inverted);
+    text-align: center;
+    z-index: 9999;
+}
+
+.cursorVisible {
+    display: flex;
+}
+
+.cursorContainer {
+    cursor: none;
+}
+
+.cursorContainer * {
+    cursor: none;
+}
+
+.cursor[data-color-scheme='dark'] {
+    border: var(--border-width-sm) solid var(--border-color-solar);
+    background: var(--color-bg-fill-alpha-black-10);
+    color: var(--color-text-primary-brand-solar);
+}

package/dist/components/FAQComponent/FAQComponent.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("react"),C=require("../FAQComponentItem/FAQComponentItem.cjs.js"),S=require("./faqComponent.module.css.cjs.js"),g=({items:c,mode:o="multiple",initialActiveIndex:r})=>{const[u,m]=l.useState(r??null),[i,a]=l.useState(new Set),p=e=>{o==="single"?m(t=>t===e?null:e):a(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},I=e=>o==="single"?u===e:i.has(e);return s.jsx("div",{className:S.default.root,children:c.map((e,t)=>s.jsx(C.FAQComponentItem,{title:e.title,content:e.content,isOpen:I(t),index:t,onClick:p},t))})};exports.FAQComponent=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),l=require("react"),C=require("../../src/components/FAQComponent/faqComponent.module.css"),F=require("../FAQComponentItem/FAQComponentItem.cjs.js"),Q=({items:r,mode:o="multiple",initialActiveIndex:n})=>{const[u,m]=l.useState(n!=null?n:null),[p,a]=l.useState(new Set),S=e=>{o==="single"?m(t=>t===e?null:e):a(t=>{const s=new Set(t);return s.has(e)?s.delete(e):s.add(e),s})},g=e=>o==="single"?u===e:p.has(e);return c.jsx("div",{className:C.root,children:r.map((e,t)=>c.jsx(F.FAQComponentItem,{title:e.title,content:e.content,isOpen:g(t),index:t,onClick:S},t))})};exports.FAQComponent=Q;

package/dist/components/FAQComponent/FAQComponent.es.js

@@ -1,27 +1,27 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { FAQComponentItem as I } from "../FAQComponentItem/FAQComponentItem.es.js";
-import g from "./faqComponent.module.css.es.js";
-const A = ({ items: m, mode: o = "multiple", initialActiveIndex: r }) => {
-  const [c, p] = l(r ?? null), [i, a] = l(/* @__PURE__ */ new Set()), u = (t) => {
-    o === "single" ? p((e) => e === t ? null : t) : a((e) => {
-      const n = new Set(e);
-      return n.has(t) ? n.delete(t) : n.add(t), n;
+import { jsx as l } from "react/jsx-runtime";
+import { useState as m } from "react";
+import S from "../../components/FAQComponent/faqComponent.module.css";
+import { FAQComponentItem as h } from "../FAQComponentItem/FAQComponentItem.es.js";
+const I = ({ items: r, mode: n = "multiple", initialActiveIndex: s }) => {
+  const [p, c] = m(s != null ? s : null), [u, f] = m(/* @__PURE__ */ new Set()), a = (t) => {
+    n === "single" ? c((e) => e === t ? null : t) : f((e) => {
+      const o = new Set(e);
+      return o.has(t) ? o.delete(t) : o.add(t), o;
     });
-  }, f = (t) => o === "single" ? c === t : i.has(t);
-  return /* @__PURE__ */ s("div", { className: g.root, children: m.map((t, e) => /* @__PURE__ */ s(
-    I,
+  }, g = (t) => n === "single" ? p === t : u.has(t);
+  return /* @__PURE__ */ l("div", { className: S.root, children: r.map((t, e) => /* @__PURE__ */ l(
+    h,
     {
       title: t.title,
       content: t.content,
-      isOpen: f(e),
+      isOpen: g(e),
       index: e,
-      onClick: u
+      onClick: a
     },
     e
   )) });
 };
 export {
-  A as FAQComponent
+  I as FAQComponent
 };

package/dist/components/FAQComponent/faqComponent.module.css

@@ -0,0 +1,40 @@
+.root {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.root > div:nth-child(2n + 1) {
+    padding-left: 36px;
+}
+
+.root > div:nth-child(2n) {
+    padding-right: 36px;
+    margin-left: -1px;
+}
+
+.root > div:nth-child(n + 3) {
+    margin-top: -1px;
+}
+
+@media (width <= 768px) {
+    .root {
+        grid-template-columns: 1fr;
+    }
+
+    .root > div:nth-child(2n + 1) {
+        padding-left: 0;
+    }
+
+    .root > div:nth-child(2n) {
+        padding-right: 0;
+        margin-left: 0;
+    }
+
+    .root > div:nth-child(n + 2) {
+        margin-top: 0;
+    }
+
+    .root > div:not(:first-child) {
+        margin-top: -1px;
+    }
+}

package/dist/components/FAQComponentItem/FAQComponentItem.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../Typography/Typography.cjs.js"),a=require("../Icon/Icon.cjs.js"),o=require("../Icon/constants.cjs.js"),s=require("../../utils/cn/cn.cjs.js"),n=require("./faqComponentItem.module.css.cjs.js"),u=({title:r,content:d,isOpen:t,index:i,onClick:l})=>e.jsxs("div",{className:n.default.root,children:[e.jsxs("div",{onClick:()=>l(i??0),className:s.cn(n.default.header,{[n.default.headerSticky]:t}),children:[e.jsx(c.Typography,{defaultVariant:"headingMd",mobileVariant:"headingXxs",children:r}),e.jsxs("div",{className:n.default.closeButtonWrapper,children:[e.jsx(a.Icon,{name:o.EIconName.BRACKET_LEFT}),e.jsx("div",{className:s.cn(n.default.closeButton,{[n.default.closeButtonActive]:t}),children:e.jsx(a.Icon,{name:o.EIconName.PLUS_BOLD})}),e.jsx(a.Icon,{name:o.EIconName.BRACKET_RIGHT})]})]}),e.jsx("div",{className:s.cn(n.default.description,{[n.default.descriptionShow]:t}),children:e.jsx("div",{className:n.default.descriptionInner,children:e.jsx(c.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyXs",children:d})})}),e.jsx("div",{className:n.default.leftBorder}),e.jsx("div",{className:n.default.rightBorder})]});exports.FAQComponentItem=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn/cn.cjs.js"),n=require("../../src/components/FAQComponentItem/faqComponentItem.module.css"),a=require("../Typography/Typography.cjs.js"),r=require("../Icon/Icon.cjs.js"),t=require("../Icon/constants.cjs.js"),m=({title:i,content:l,isOpen:s,index:o,onClick:d})=>e.jsxs("div",{className:n.root,children:[e.jsxs("div",{onClick:()=>d(o!=null?o:0),className:c.cn(n.header,{[n.headerSticky]:s}),children:[e.jsx(a.Typography,{defaultVariant:"headingMd",mobileVariant:"headingXxs",children:i}),e.jsxs("div",{className:n.closeButtonWrapper,children:[e.jsx(r.Icon,{name:t.EIconName.BRACKET_LEFT}),e.jsx("div",{className:c.cn(n.closeButton,{[n.closeButtonActive]:s}),children:e.jsx(r.Icon,{name:t.EIconName.PLUS_BOLD})}),e.jsx(r.Icon,{name:t.EIconName.BRACKET_RIGHT})]})]}),e.jsx("div",{className:c.cn(n.description,{[n.descriptionShow]:s}),children:e.jsx("div",{className:n.descriptionInner,children:e.jsx(a.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodyXs",children:l})})}),e.jsx("div",{className:n.leftBorder}),e.jsx("div",{className:n.rightBorder})]});exports.FAQComponentItem=m;

package/dist/components/FAQComponentItem/FAQComponentItem.es.js

@@ -1,28 +1,28 @@
 "use client";
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { Typography as d } from "../Typography/Typography.es.js";
-import { Icon as a } from "../Icon/Icon.es.js";
-import { EIconName as t } from "../Icon/constants.es.js";
-import { cn as n } from "../../utils/cn/cn.es.js";
-import e from "./faqComponentItem.module.css.es.js";
-const u = ({ title: c, content: s, isOpen: i, index: m, onClick: l }) => /* @__PURE__ */ o("div", { className: e.root, children: [
-  /* @__PURE__ */ o("div", { onClick: () => l(m ?? 0), className: n(e.header, { [e.headerSticky]: i }), children: [
-    /* @__PURE__ */ r(d, { defaultVariant: "headingMd", mobileVariant: "headingXxs", children: c }),
-    /* @__PURE__ */ o("div", { className: e.closeButtonWrapper, children: [
-      /* @__PURE__ */ r(a, { name: t.BRACKET_LEFT }),
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn/cn.es.js";
+import e from "../../components/FAQComponentItem/faqComponentItem.module.css";
+import { Typography as m } from "../Typography/Typography.es.js";
+import { Icon as c } from "../Icon/Icon.es.js";
+import { EIconName as s } from "../Icon/constants.es.js";
+const u = ({ title: n, content: d, isOpen: o, index: a, onClick: l }) => /* @__PURE__ */ i("div", { className: e.root, children: [
+  /* @__PURE__ */ i("div", { onClick: () => l(a != null ? a : 0), className: t(e.header, { [e.headerSticky]: o }), children: [
+    /* @__PURE__ */ r(m, { defaultVariant: "headingMd", mobileVariant: "headingXxs", children: n }),
+    /* @__PURE__ */ i("div", { className: e.closeButtonWrapper, children: [
+      /* @__PURE__ */ r(c, { name: s.BRACKET_LEFT }),
       /* @__PURE__ */ r(
         "div",
         {
-          className: n(e.closeButton, {
-            [e.closeButtonActive]: i
+          className: t(e.closeButton, {
+            [e.closeButtonActive]: o
           }),
-          children: /* @__PURE__ */ r(a, { name: t.PLUS_BOLD })
+          children: /* @__PURE__ */ r(c, { name: s.PLUS_BOLD })
         }
       ),
-      /* @__PURE__ */ r(a, { name: t.BRACKET_RIGHT })
+      /* @__PURE__ */ r(c, { name: s.BRACKET_RIGHT })
     ] })
   ] }),
-  /* @__PURE__ */ r("div", { className: n(e.description, { [e.descriptionShow]: i }), children: /* @__PURE__ */ r("div", { className: e.descriptionInner, children: /* @__PURE__ */ r(d, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyXs", children: s }) }) }),
+  /* @__PURE__ */ r("div", { className: t(e.description, { [e.descriptionShow]: o }), children: /* @__PURE__ */ r("div", { className: e.descriptionInner, children: /* @__PURE__ */ r(m, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyXs", children: d }) }) }),
   /* @__PURE__ */ r("div", { className: e.leftBorder }),
   /* @__PURE__ */ r("div", { className: e.rightBorder })
 ] });

package/dist/components/FAQComponentItem/faqComponentItem.module.css

@@ -0,0 +1,149 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 16px 24px;
+    position: relative;
+    background-color: var(--color-bg-base-light);
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+    padding: 24px 0;
+    cursor: pointer;
+}
+
+.closeButtonWrapper {
+    display: flex;
+    align-items: center;
+}
+
+.closeButton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 4px;
+    transform: rotate(0);
+    transition: transform 0.3s ease-in-out;
+}
+
+.closeButton.closeButtonActive {
+    transform: rotate(45deg);
+}
+
+.description {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    width: 100%;
+    transition:
+        grid-template-rows 0.3s,
+        padding-top 0.3s;
+
+    strong,
+    b {
+        font-weight: var(--font-weight-bold);
+    }
+}
+
+.descriptionInner {
+    min-height: 0;
+}
+
+.descriptionShow {
+    grid-template-rows: 1fr;
+}
+
+.root::before,
+.root::after {
+    content: '';
+    position: absolute;
+    height: var(--border-width-sm);
+    background-color: var(--border-color-light);
+}
+
+.root::before {
+    top: 0;
+    left: 12px;
+    right: 12px;
+}
+
+.root::after {
+    bottom: 0;
+    left: 12px;
+    right: 12px;
+}
+
+.leftBorder,
+.rightBorder {
+    position: absolute;
+    width: var(--border-width-sm);
+    background-color: var(--border-color-light);
+}
+
+.leftBorder {
+    top: 8px;
+    bottom: 8px;
+    left: 0;
+}
+
+.rightBorder {
+    top: 8px;
+    bottom: 8px;
+    right: 0;
+}
+
+@media (width <= 768px) {
+    .root {
+        /* 1px is for not to hide ::before pseudo element */
+        padding: 1px 0 16px;
+    }
+
+    .header {
+        gap: 12px;
+        padding: 28px 12px 12px;
+        margin: 0 1px;
+        z-index: 1;
+    }
+
+    .headerSticky {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+
+    .description {
+        padding: 0 12px;
+    }
+
+    .descriptionShow {
+        padding-top: 12px;
+    }
+
+    .root::before {
+        top: 0;
+        left: 8px;
+        right: 8px;
+    }
+
+    .root::after {
+        bottom: 0;
+        left: 8px;
+        right: 8px;
+    }
+
+    .leftBorder {
+        top: 4px;
+        bottom: 4px;
+        left: 0;
+    }
+
+    .rightBorder {
+        top: 4px;
+        bottom: 4px;
+        right: 0;
+    }
+}

package/dist/components/FilterError/FilterError.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./filterError.module.css.cjs.js"),c=require("../Icon/Icon.cjs.js"),n=require("../Icon/constants.cjs.js"),a=require("../Typography/Typography.cjs.js"),s=require("../Button/Button.cjs.js"),i=({text:o,onClearAllFilters:t})=>e.jsxs("div",{className:r.default.root,children:[e.jsx(c.Icon,{name:n.EIconName.ALERT_ERROR_FILL}),e.jsx(a.Typography,{defaultVariant:"headingLg",mobileVariant:"headingMd",className:r.default.text,children:o}),e.jsx("div",{className:r.default.buttonWrapper,children:e.jsx(s.Button,{onClick:t,variant:"muted",size:"md",prefixIcon:n.EIconName.SEARCH,children:"clear search"})})]});exports.FilterError=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../src/components/FilterError/filterError.module.css"),s=require("../Icon/Icon.cjs.js"),r=require("../Icon/constants.cjs.js"),c=require("../Typography/Typography.cjs.js"),a=require("../Button/Button.cjs.js"),i=({text:o,onClearAllFilters:t})=>e.jsxs("div",{className:n.root,children:[e.jsx(s.Icon,{name:r.EIconName.ALERT_ERROR_FILL}),e.jsx(c.Typography,{defaultVariant:"headingLg",mobileVariant:"headingMd",className:n.text,children:o}),e.jsx("div",{className:n.buttonWrapper,children:e.jsx(a.Button,{onClick:t,variant:"muted",size:"md",prefixIcon:r.EIconName.SEARCH,children:"clear search"})})]});exports.FilterError=i;

package/dist/components/FilterError/FilterError.es.js

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import o from "./filterError.module.css.es.js";
+import o from "../../components/FilterError/filterError.module.css";
 import { Icon as m } from "../Icon/Icon.es.js";
 import { EIconName as e } from "../Icon/constants.es.js";
 import { Typography as n } from "../Typography/Typography.es.js";

package/dist/components/FilterError/filterError.module.css

@@ -0,0 +1,21 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    align-items: center;
+    width: 100%;
+    margin: 60px auto;
+}
+
+.text {
+    white-space: pre-line;
+    text-align: center;
+    text-wrap: balance;
+}
+
+.buttonWrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+}

package/dist/components/FilterMenu/FilterMenu.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),j=require("react"),c=require("../../utils/cn/cn.cjs.js"),N=require("../Icon/Icon.cjs.js"),d=require("../Icon/constants.cjs.js"),i=require("../Typography/Typography.cjs.js"),e=require("./filterMenu.module.css.cjs.js");function _({label:u,open:m=!1,multiple:f,options:p,selectedValue:a,headerNode:r,onSelect:h}){const[o,g]=j.useState(m),y=()=>g(s=>!s);return n.jsxs("div",{className:e.default.root,children:[n.jsxs("button",{className:e.default.toggleButton,onClick:y,children:[n.jsx(i.Typography,{defaultVariant:"labelLg",emphasis:!0,children:u}),n.jsx(N.Icon,{name:o?d.EIconName.REMOVE:d.EIconName.PLUS,className:e.default.toggleIcon})]}),n.jsx("div",{className:c.cn(e.default.menu,o&&e.default.isOpen),role:"menu",children:n.jsxs("div",{className:e.default.menuContent,children:[r,p.map((s,t)=>n.jsxs("ul",{className:e.default.subOptions,children:[s.label&&n.jsx("li",{className:c.cn(e.default.divider,{[e.default.dividerLine]:!!(r||t!==0)}),children:n.jsx(i.Typography,{as:"div",defaultVariant:"bodyMd",weight:"medium",className:e.default.dividerLabel,children:s.label})},t),s.values.map(({value:l,label:b})=>n.jsx("li",{className:e.default.option,onClick:()=>h(l,s),children:n.jsx(i.Typography,{as:"div",defaultVariant:"bodyMd",className:c.cn(e.default.optionLabel,{[e.default.selected]:f?a==null?void 0:a.includes(l):l===a}),children:b})},l))]},`${s.label}_${t}`))]})})]})}exports.FilterMenu=_;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),N=require("react"),o=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/FilterMenu/filterMenu.module.css"),r=require("../Typography/Typography.cjs.js"),x=require("../Icon/Icon.cjs.js"),d=require("../Icon/constants.cjs.js");function _({label:m,open:u=!1,multiple:p,options:h,selectedValue:a,headerNode:l,onSelect:g}){const[t,y]=N.useState(u),b=()=>y(s=>!s);return n.jsxs("div",{className:e.root,children:[n.jsxs("button",{className:e.toggleButton,onClick:b,children:[n.jsx(r.Typography,{defaultVariant:"labelLg",emphasis:!0,children:m}),n.jsx(x.Icon,{name:t?d.EIconName.REMOVE:d.EIconName.PLUS,className:e.toggleIcon})]}),n.jsx("div",{className:o.cn(e.menu,t&&e.isOpen),role:"menu",children:n.jsxs("div",{className:e.menuContent,children:[l,h.map((s,i)=>n.jsxs("ul",{className:e.subOptions,children:[s.label&&n.jsx("li",{className:o.cn(e.divider,{[e.dividerLine]:!!(l||i!==0)}),children:n.jsx(r.Typography,{as:"div",defaultVariant:"bodyMd",weight:"medium",className:e.dividerLabel,children:s.label})},i),s.values.map(({value:c,label:j})=>n.jsx("li",{className:e.option,onClick:()=>g(c,s),children:n.jsx(r.Typography,{as:"div",defaultVariant:"bodyMd",className:o.cn(e.optionLabel,{[e.selected]:p?a==null?void 0:a.includes(c):c===a}),children:j})},c))]},`${s.label}_${i}`))]})})]})}exports.FilterMenu=_;

package/dist/components/FilterMenu/FilterMenu.es.js

@@ -2,10 +2,10 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import { useState as y } from "react";
 import { cn as o } from "../../utils/cn/cn.es.js";
+import i from "../../components/FilterMenu/filterMenu.module.css";
+import { Typography as m } from "../Typography/Typography.es.js";
 import { Icon as L } from "../Icon/Icon.es.js";
 import { EIconName as d } from "../Icon/constants.es.js";
-import { Typography as m } from "../Typography/Typography.es.js";
-import i from "./filterMenu.module.css.es.js";
 function w({
   label: p,
   open: h = !1,