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

package/dist/modules/CircleHighlights/circleHighlights.module.css

@@ -0,0 +1,75 @@
+.root {
+    display: flex;
+    width: var(--content-max-width);
+    padding: var(--spacing-112) var(--spacing-64);
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 0 auto;
+}
+
+.title {
+    text-align: center;
+}
+
+.wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.highlight {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 405px;
+    gap: var(--spacing-32);
+    background: transparent;
+}
+
+.image {
+    width: 240px;
+    height: 240px;
+    border-radius: var(--border-radius-full);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0px 30px;
+    gap: var(--spacing-16);
+}
+
+.description {
+    text-align: center;
+}
+
+@media (width < 1440px) {
+    .root {
+        width: 375px;
+        padding: var(--spacing-40) var(--spacing-20);
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--spacing-40);
+        flex-shrink: 0;
+    }
+
+    .wrapper {
+        flex-direction: column;
+        align-items: center;
+        gap: var(--spacing-40);
+        align-content: center;
+    }
+
+    .highlight {
+        width: 335px;
+    }
+    .content {
+        padding: 0px var(--spacing-24);
+    }
+}

package/dist/modules/Claims/Claims.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../components/Typography/Typography.cjs.js"),u=require("../../components/ClaimBlock/ClaimBlock.cjs.js"),c=require("../../components/Button/Button.cjs.js"),a=require("./claims.module.css.cjs.js");function o({text:l,button:s,claimBlocks:r}){return e.jsx("section",{className:a.default.root,children:e.jsxs("div",{className:a.default.content,children:[(l||s)&&e.jsxs("div",{className:a.default.container,children:[l?e.jsx(n.Typography,{className:a.default.text,as:"h2",defaultVariant:"preambleLg",mobileVariant:"preambleSm",children:l}):e.jsx("div",{}),s&&e.jsx("div",{className:a.default.buttonContainer,children:e.jsx(c.Button,{as:"a",href:s.link,variant:"muted",size:"lg",children:s.text})})]}),e.jsx("div",{className:a.default.claimContainer,children:r.slice(0,4).map((i,t)=>e.jsx("div",{className:a.default.claimBlock,children:e.jsx(u.ClaimBlock,{value:i.value,subtitle:i.subtitle,description:i.description,valuePrefix:i.valuePrefix,valueSuffix:i.valueSuffix})},t))})]})})}exports.Claims=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../src/modules/Claims/claims.module.css"),l=require("../../components/Typography/Typography.cjs.js"),c=require("../../components/Button/Button.cjs.js"),o=require("../../components/ClaimBlock/ClaimBlock.cjs.js");function u({text:n,button:a,claimBlocks:r}){return e.jsx("section",{className:s.root,children:e.jsxs("div",{className:s.content,children:[(n||a)&&e.jsxs("div",{className:s.container,children:[n?e.jsx(l.Typography,{className:s.text,as:"h2",defaultVariant:"preambleLg",mobileVariant:"preambleSm",children:n}):e.jsx("div",{}),a&&e.jsx("div",{className:s.buttonContainer,children:e.jsx(c.Button,{as:"a",href:a.link,variant:"muted",size:"lg",children:a.text})})]}),e.jsx("div",{className:s.claimContainer,children:r.slice(0,4).map((i,t)=>e.jsx("div",{className:s.claimBlock,children:e.jsx(o.ClaimBlock,{value:i.value,subtitle:i.subtitle,description:i.description,valuePrefix:i.valuePrefix,valueSuffix:i.valueSuffix})},t))})]})})}exports.Claims=u;

package/dist/modules/Claims/Claims.es.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import i from "../../modules/Claims/claims.module.css";
 import { Typography as m } from "../../components/Typography/Typography.es.js";
-import { ClaimBlock as o } from "../../components/ClaimBlock/ClaimBlock.es.js";
-import { Button as c } from "../../components/Button/Button.es.js";
-import i from "./claims.module.css.es.js";
+import { Button as o } from "../../components/Button/Button.es.js";
+import { ClaimBlock as c } from "../../components/ClaimBlock/ClaimBlock.es.js";
 function h({ text: l, button: r, claimBlocks: n }) {
   return /* @__PURE__ */ e("section", { className: i.root, children: /* @__PURE__ */ s("div", { className: i.content, children: [
     (l || r) && /* @__PURE__ */ s("div", { className: i.container, children: [
@@ -16,10 +16,10 @@ function h({ text: l, button: r, claimBlocks: n }) {
           children: l
         }
       ) : /* @__PURE__ */ e("div", {}),
-      r && /* @__PURE__ */ e("div", { className: i.buttonContainer, children: /* @__PURE__ */ e(c, { as: "a", href: r.link, variant: "muted", size: "lg", children: r.text }) })
+      r && /* @__PURE__ */ e("div", { className: i.buttonContainer, children: /* @__PURE__ */ e(o, { as: "a", href: r.link, variant: "muted", size: "lg", children: r.text }) })
     ] }),
     /* @__PURE__ */ e("div", { className: i.claimContainer, children: n.slice(0, 4).map((a, t) => /* @__PURE__ */ e("div", { className: i.claimBlock, children: /* @__PURE__ */ e(
-      o,
+      c,
       {
         value: a.value,
         subtitle: a.subtitle,

package/dist/modules/Claims/claims.module.css

@@ -0,0 +1,107 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.content {
+    position: relative;
+    width: 100%;
+    max-width: var(--content-max-width);
+    display: flex;
+    flex-direction: column;
+    padding: 64px 120px;
+    gap: 48px;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.text {
+    max-width: 690px;
+    text-align: left;
+}
+
+.buttonContainer {
+    display: flex;
+}
+
+.claimContainer {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(100px, 264px));
+    gap: 48px;
+}
+
+.claimContainer::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top: 1px solid var(--border-color-light);
+    border-bottom: 1px solid var(--border-color-light);
+    width: 100vw;
+    height: 100%;
+    z-index: -1;
+}
+
+.claimBlock {
+    position: relative;
+}
+
+.claimBlock:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    top: 16px;
+    right: -24px;
+    width: 1px;
+    height: calc(100% - 32px);
+    background-color: var(--border-color-light);
+}
+
+@media (max-width: 1400px) {
+    .claimContainer {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .claimBlock:nth-child(3)::after {
+        display: none;
+    }
+
+    .claimBlock:nth-child(1)::after,
+    .claimBlock:nth-child(2)::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        height: 1px;
+        width: 100%;
+        background-color: var(--border-color-light);
+    }
+}
+
+@media (width <= 1100px) {
+    .container {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 24px;
+    }
+}
+
+@media (width <= 768px) {
+    .content {
+        padding: 20px;
+    }
+
+    .claimContainer {
+        min-width: 372px;
+        row-gap: 0;
+    }
+}

package/dist/modules/Compare/Compare.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("./compare.module.css.cjs.js"),s=require("../../components/Typography/Typography.cjs.js"),c=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),r=require("../../components/Pricing/Pricing.cjs.js"),o=({label:t,title:a,leftElement:l,rightElement:n})=>e.jsx("section",{className:i.default.root,children:e.jsxs("div",{className:i.default.container,children:[e.jsxs("div",{className:i.default.header,children:[t&&e.jsx(s.Typography,{defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,children:t}),e.jsx(c.HighlightedTitle,{title:a,defaultVariant:"displayMd",mobileVariant:"headingXl",className:i.default.title})]}),e.jsxs("div",{className:i.default.content,children:[e.jsx(r.Pricing,{...l,element:"left_card"}),e.jsx(r.Pricing,{...n,element:"right_card"})]})]})});exports.Compare=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../src/modules/Compare/compare.module.css"),l=require("../../components/Typography/Typography.cjs.js"),c=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),r=require("../../components/Pricing/Pricing.cjs.js"),o=({label:t,title:s,leftElement:n,rightElement:a})=>e.jsx("section",{className:i.root,children:e.jsxs("div",{className:i.container,children:[e.jsxs("div",{className:i.header,children:[t&&e.jsx(l.Typography,{defaultVariant:"labelMd",mobileVariant:"labelSm",emphasis:!0,children:t}),e.jsx(c.HighlightedTitle,{title:s,defaultVariant:"displayMd",mobileVariant:"headingXl",className:i.title})]}),e.jsxs("div",{className:i.content,children:[e.jsx(r.Pricing,{...n,element:"left_card"}),e.jsx(r.Pricing,{...a,element:"right_card"})]})]})});exports.Compare=o;

package/dist/modules/Compare/Compare.es.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import r from "./compare.module.css.es.js";
+import r from "../../modules/Compare/compare.module.css";
 import { Typography as n } from "../../components/Typography/Typography.es.js";
 import { HighlightedTitle as s } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Pricing as t } from "../../components/Pricing/Pricing.es.js";

package/dist/modules/Compare/compare.module.css

@@ -0,0 +1,79 @@
+.root {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 64px;
+    width: 100%;
+    max-width: var(--content-max-width);
+    padding: 120px;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+.title {
+    text-align: center;
+}
+
+.content {
+    display: flex;
+    width: max-content;
+}
+
+.content div:last-child {
+    margin-left: -1px;
+}
+
+@media (width <= 1024px) {
+    .container {
+        padding: 64px 40px;
+    }
+
+    .content {
+        flex-direction: column;
+        margin-left: 0;
+    }
+
+    .content > div:first-child {
+        order: 2;
+        margin-top: -1px;
+    }
+
+    .content > div:last-child {
+        order: 1;
+        margin-left: 0;
+    }
+}
+
+@media (width <= 768px) {
+    .container {
+        padding: 64px 20px;
+        gap: 40px;
+    }
+
+    .content {
+        flex-direction: column;
+        margin-left: 0;
+    }
+
+    .content > div:first-child {
+        order: 2;
+        margin-top: -1px;
+    }
+
+    .content > div:last-child {
+        order: 1;
+        margin-left: 0;
+    }
+}

package/dist/modules/Comparison/Comparison.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),h=require("../../components/Icon/Icon.cjs.js"),u=require("../../components/Icon/constants.cjs.js"),f=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),d=require("../../components/Typography/Typography.cjs.js"),s=require("../../utils/cn/cn.cjs.js"),p=require("./assets/company-logo.svg.cjs.js"),g=require("./components/ComparisonMobileView/ComparisonMobileView.cjs.js"),e=require("./comparison.module.css.cjs.js"),o=require("./utils.cjs.js"),y=({title:m,description:r,comparison:i})=>a.jsx("div",{className:e.default.root,children:a.jsxs("div",{className:e.default.container,children:[a.jsxs("div",{className:e.default.header,children:[a.jsx(f.HighlightedTitle,{title:m,defaultVariant:"displayMd",mobileVariant:"headingXl"}),r&&a.jsx(d.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:e.default.description,children:r})]}),a.jsxs("div",{className:e.default.table,style:{gridTemplateColumns:`minmax(220px, 1fr) repeat(${i.headers.length}, minmax(220px, 270px))`},children:[a.jsx("div",{className:s.cn(e.default.emptyCell,e.default.stickyCell)}),a.jsx("div",{className:s.cn(e.default.otherEmptyCells)}),a.jsx(d.Typography,{defaultVariant:"bodyXl",as:"div",className:s.cn(e.default.cell,e.default.cellFeature,e.default.stickyCell),weight:"medium",children:"Features"}),i.headers.map(l=>a.jsx(d.Typography,{as:"div",defaultVariant:i.headers.length>2?"bodyXl":"headingLg",className:s.cn(e.default.cell,o.isHealthspan(l)?e.default.cellHighlighted:""),weight:i.headers.length>2?"medium":"regular",children:o.isHealthspan(l)?a.jsx(p.default,{className:e.default.companyLogo}):l},l)),i.rows.map((l,c)=>a.jsxs(a.Fragment,{children:[a.jsx("div",{className:s.cn(e.default.cell,e.default.cellFeature,e.default.stickyCell),children:a.jsxs("div",{className:e.default.featureContent,children:[a.jsx(d.Typography,{defaultVariant:"bodyXl",weight:"medium",children:l.feature}),l.description&&a.jsx(d.Typography,{defaultVariant:"bodyXl",className:e.default.featureDescription,children:l.description})]})},`feature-${c}`),i.headers.map((j,n)=>{const t=l.values[n];return a.jsxs("div",{className:s.cn(e.default.cell,n?"":e.default.cellHighlighted),children:[(t==null?void 0:t.type)==="boolean"&&a.jsx("div",{className:s.cn(e.default.booleanValue,!n&&t.value?e.default.booleanValueHighlighted:""),children:a.jsx(h.Icon,{name:t.value?u.EIconName.CHECK:u.EIconName.CLOSE})}),(t==null?void 0:t.type)==="string"&&a.jsx(d.Typography,{defaultVariant:"bodyXl",weight:"medium",className:e.default.stringValue,children:t.value})]},`value-${c}-${n}`)})]})),a.jsx("div",{className:s.cn(e.default.emptyCell,e.default.stickyCell)}),a.jsx("div",{className:s.cn(e.default.otherEmptyCells)}),a.jsx("div",{className:e.default.gradientBackground})]}),a.jsx(g.ComparisonMobileView,{comparison:i,className:e.default.mobileTable})]})});exports.Comparison=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("../../utils/cn/cn.cjs.js"),g=require("./assets/company-logo.svg.cjs.js"),e=require("../../src/modules/Comparison/comparison.module.css"),d=require("./utils.cjs.js"),p=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),u=require("../../components/Icon/Icon.cjs.js"),m=require("../../components/Icon/constants.cjs.js"),y=require("./components/ComparisonMobileView/ComparisonMobileView.cjs.js"),j=({title:h,description:c,comparison:t})=>s.jsx("div",{className:e.root,children:s.jsxs("div",{className:e.container,children:[s.jsxs("div",{className:e.header,children:[s.jsx(p.HighlightedTitle,{title:h,defaultVariant:"displayMd",mobileVariant:"headingXl"}),c&&s.jsx(n.Typography,{as:"p",defaultVariant:"bodyLg",mobileVariant:"bodySm",className:e.description,children:c})]}),s.jsxs("div",{className:e.table,style:{gridTemplateColumns:`minmax(220px, 1fr) repeat(${t.headers.length}, minmax(220px, 270px))`},children:[s.jsx("div",{className:i.cn(e.emptyCell,e.stickyCell)}),s.jsx("div",{className:i.cn(e.otherEmptyCells)}),s.jsx(n.Typography,{defaultVariant:"bodyXl",as:"div",className:i.cn(e.cell,e.cellFeature,e.stickyCell),weight:"medium",children:"Features"}),t.headers.map(a=>s.jsx(n.Typography,{as:"div",defaultVariant:t.headers.length>2?"bodyXl":"headingLg",className:i.cn(e.cell,d.isHealthspan(a)?e.cellHighlighted:""),weight:t.headers.length>2?"medium":"regular",children:d.isHealthspan(a)?s.jsx(g.default,{className:e.companyLogo}):a},a)),t.rows.map((a,o)=>s.jsxs(s.Fragment,{children:[s.jsx("div",{className:i.cn(e.cell,e.cellFeature,e.stickyCell),children:s.jsxs("div",{className:e.featureContent,children:[s.jsx(n.Typography,{defaultVariant:"bodyXl",weight:"medium",children:a.feature}),a.description&&s.jsx(n.Typography,{defaultVariant:"bodyXl",className:e.featureDescription,children:a.description})]})},`feature-${o}`),t.headers.map((x,r)=>{const l=a.values[r];return s.jsxs("div",{className:i.cn(e.cell,r?"":e.cellHighlighted),children:[(l==null?void 0:l.type)==="boolean"&&s.jsx("div",{className:i.cn(e.booleanValue,!r&&l.value?e.booleanValueHighlighted:""),children:s.jsx(u.Icon,{name:l.value?m.EIconName.CHECK:m.EIconName.CLOSE})}),(l==null?void 0:l.type)==="string"&&s.jsx(n.Typography,{defaultVariant:"bodyXl",weight:"medium",className:e.stringValue,children:l.value})]},`value-${o}-${r}`)})]})),s.jsx("div",{className:i.cn(e.emptyCell,e.stickyCell)}),s.jsx("div",{className:i.cn(e.otherEmptyCells)}),s.jsx("div",{className:e.gradientBackground})]}),s.jsx(y.ComparisonMobileView,{comparison:t})]})});exports.Comparison=j;

package/dist/modules/Comparison/Comparison.es.js

@@ -1,14 +1,14 @@
 import { jsx as a, jsxs as s, Fragment as g } from "react/jsx-runtime";
-import { Icon as u } from "../../components/Icon/Icon.es.js";
-import { EIconName as o } from "../../components/Icon/constants.es.js";
+import { cn as t } from "../../utils/cn/cn.es.js";
+import u from "./assets/company-logo.svg.es.js";
+import e from "../../modules/Comparison/comparison.module.css";
+import { isHealthspan as o } from "./utils.es.js";
 import { HighlightedTitle as y } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { Typography as m } from "../../components/Typography/Typography.es.js";
-import { cn as t } from "../../utils/cn/cn.es.js";
-import f from "./assets/company-logo.svg.es.js";
+import { Icon as f } from "../../components/Icon/Icon.es.js";
+import { EIconName as h } from "../../components/Icon/constants.es.js";
 import { ComparisonMobileView as N } from "./components/ComparisonMobileView/ComparisonMobileView.es.js";
-import e from "./comparison.module.css.es.js";
-import { isHealthspan as h } from "./utils.es.js";
-const T = ({ title: p, description: n, comparison: r }) => /* @__PURE__ */ a("div", { className: e.root, children: /* @__PURE__ */ s("div", { className: e.container, children: [
+const $ = ({ title: p, description: n, comparison: r }) => /* @__PURE__ */ a("div", { className: e.root, children: /* @__PURE__ */ s("div", { className: e.container, children: [
   /* @__PURE__ */ s("div", { className: e.header, children: [
     /* @__PURE__ */ a(y, { title: p, defaultVariant: "displayMd", mobileVariant: "headingXl" }),
     n && /* @__PURE__ */ a(
@@ -47,9 +47,9 @@ const T = ({ title: p, description: n, comparison: r }) => /* @__PURE__ */ a("di
           {
             as: "div",
             defaultVariant: r.headers.length > 2 ? "bodyXl" : "headingLg",
-            className: t(e.cell, h(l) ? e.cellHighlighted : ""),
+            className: t(e.cell, o(l) ? e.cellHighlighted : ""),
             weight: r.headers.length > 2 ? "medium" : "regular",
-            children: h(l) ? /* @__PURE__ */ a(f, { className: e.companyLogo }) : l
+            children: o(l) ? /* @__PURE__ */ a(u, { className: e.companyLogo }) : l
           },
           l
         )),
@@ -79,7 +79,7 @@ const T = ({ title: p, description: n, comparison: r }) => /* @__PURE__ */ a("di
                         e.booleanValue,
                         !d && i.value ? e.booleanValueHighlighted : ""
                       ),
-                      children: /* @__PURE__ */ a(u, { name: i.value ? o.CHECK : o.CLOSE })
+                      children: /* @__PURE__ */ a(f, { name: i.value ? h.CHECK : h.CLOSE })
                     }
                   ),
                   (i == null ? void 0 : i.type) === "string" && /* @__PURE__ */ a(
@@ -103,8 +103,8 @@ const T = ({ title: p, description: n, comparison: r }) => /* @__PURE__ */ a("di
       ]
     }
   ),
-  /* @__PURE__ */ a(N, { comparison: r, className: e.mobileTable })
+  /* @__PURE__ */ a(N, { comparison: r })
 ] }) });
 export {
-  T as Comparison
+  $ as Comparison
 };

package/dist/modules/Comparison/assets/company-logo.svg

@@ -0,0 +1,3 @@
+<svg width="160" height="32" viewBox="0 0 160 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.056 6.4704C50.1504 6.4704 49.3088 6.7456 48.288 7.3888C49.7216 7.8944 50.2624 9.1328 50.2624 11.6256V11.7376L45.4848 14.4064C41.6608 16.5568 39.888 18.1056 39.888 20.9536C39.888 23.3888 42.0736 25.0336 44.4128 25.0336C46.752 25.0336 48.8736 23.7088 50.2656 20.8256V24.7616H54.0608V10.6144C54.0608 7.7984 53.0496 6.4704 51.056 6.4704ZM50.2656 20.7584C48.8096 22.1632 47.6224 22.5664 46.2496 22.5664C44.9536 22.5664 43.5936 21.5552 43.5936 19.9744C43.5936 17.728 44.5088 16.272 47.5776 14.5024L50.2656 12.9472V20.7584ZM73.6512 21.888L73.6832 21.92C72.3072 24.2016 70.9344 25.0336 68.8096 25.0336C66.528 25.0336 64.9856 23.5072 64.9856 20.6656V0H68.8064V6.7392H73.1744V8.1056H68.8064V20.1216C68.8064 21.9008 69.9936 22.8608 71.3056 22.8608C72.0864 22.8608 72.9344 22.544 73.6512 21.888ZM25.52 13.3792C25.4432 13.9488 25.4048 14.528 25.4048 15.0976C25.4048 19.6256 28.496 22.1344 32.3072 22.1344C34.7136 22.1344 36.4928 21.072 37.7728 19.3536L37.8368 19.3856C37.1168 22.1024 34.496 25.0368 30.56 25.0368C25.44 25.0368 21.568 21.2064 21.568 15.9264C21.568 10.6464 24.5984 7.504 28.72 7.504H28.9088C27.2576 8.4928 26.2656 10.1952 25.7792 12.0928H33.968C33.6544 9.2512 31.6896 7.7216 28.9088 7.504C29.8464 6.9408 30.9888 6.4672 32.3328 6.4672C35.5168 6.4672 37.8688 9.3184 37.9328 13.3792H25.52ZM14.4704 0H18.5664V24.7616H14.4704V13.3824H4.096V24.7616H0V0H4.096V12.016H14.4704V0ZM48.288 7.3888L41.7888 11.5296V8.272C42.992 7.5424 44.5696 7.1008 46.1504 7.1008C47.0208 7.1008 47.7216 7.1904 48.288 7.3888ZM57.6096 0H61.4336V24.7616H57.6096V0ZM138.976 6.4704C138.07 6.4704 137.229 6.7456 136.208 7.3888C137.642 7.8944 138.182 9.1328 138.182 11.6256V11.7376L133.405 14.4064C129.581 16.5568 127.808 18.1056 127.808 20.9536C127.808 23.3888 129.994 25.0336 132.333 25.0336C134.672 25.0336 136.794 23.7088 138.186 20.8256V24.7616H141.981V10.6144C141.981 7.7984 140.97 6.4704 138.976 6.4704ZM138.186 20.7584C136.73 22.1632 135.542 22.5664 134.17 22.5664C132.874 22.5664 131.514 21.5552 131.514 19.9744C131.514 17.728 132.429 16.272 135.498 14.5024L138.186 12.9472V20.7584ZM136.208 7.3888L129.709 11.5296V8.272C130.912 7.5424 132.49 7.1008 134.07 7.1008C134.941 7.1008 135.642 7.1904 136.208 7.3888ZM160 10.8352V24.7616H156.176V11.3824C156.176 9.5104 155.395 8.432 153.834 8.432C152.896 8.432 151.35 8.6816 149.35 9.744V24.7584H145.526V6.7392H149.35V9.68C151.568 7.152 153.994 6.4672 155.904 6.4672C158.589 6.4672 160 8.0544 160 10.8352ZM119.162 6.4672C116.726 6.4672 114.24 7.4048 112.493 9.6832V6.7392H108.669V32H112.493V24.7232C113.056 24.88 113.728 25.0336 114.355 25.0336C116.01 25.0336 117.478 24.5952 118.696 23.7872C121.819 24.6256 126.144 20.5584 126.144 14.6592C126.144 9.9744 123.411 6.4672 119.162 6.4672ZM118.696 23.7856L112.496 21.9936V9.7152C113.651 9.0272 115.011 8.4672 116.323 8.4672C120.038 8.4672 122.323 11.1232 122.323 16.0256C122.323 19.4624 120.976 22.288 118.696 23.7856ZM93.6512 21.2128L99.888 24.5152C99.0432 24.8256 97.9904 25.0336 96.928 25.0336C95.8656 25.0336 94.6816 24.8256 93.6512 24.4192V21.2128ZM90.3776 10.5632V24.7616H86.5536V11.3824C86.5536 9.5104 85.7728 8.432 84.2112 8.432C83.2736 8.432 81.728 8.6816 79.728 9.744V24.7616H75.904V0H79.728V9.68C81.9456 7.152 84.3712 6.4672 86.2816 6.4672C88.9664 6.4672 90.3776 7.7824 90.3776 10.5632ZM105.824 20.4224C105.824 23.1712 103.872 25.0336 101.654 25.0336C101.155 25.0336 100.33 24.7648 99.8912 24.5152C101.328 23.952 102.326 22.9824 102.326 21.7344C102.326 20.3936 101.67 19.456 97.984 16.5824C94.4544 13.8336 93.7056 12.672 93.7056 10.9536C93.7056 8.2336 96.3296 6.3616 98.9216 7.392C97.8912 7.8912 97.2032 8.672 97.2032 9.7024C97.2032 10.8256 97.984 11.856 101.325 14.3552C104.698 16.8544 105.824 18.2048 105.824 20.4224ZM105.12 10.288L98.9216 7.392C99.9808 6.8928 101.258 6.4672 102.662 6.4672C103.536 6.4672 104.621 6.7392 105.12 7.0176V10.288Z" fill="#FEF38E"/>
+</svg>

package/dist/modules/Comparison/comparison.module.css

@@ -0,0 +1,150 @@
+.root {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    width: 100%;
+    min-width: 0;
+    max-width: var(--content-max-width);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--spacing-64);
+    padding: var(--spacing-120);
+    box-sizing: border-box;
+    background-color: var(--color-bg-base-light);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--spacing-20);
+    text-align: center;
+    width: 100%;
+    max-width: 690px;
+}
+
+.description {
+    max-width: 570px;
+}
+
+.table {
+    position: relative;
+    width: 100%;
+    padding: 0;
+    text-align: center;
+    display: grid;
+    color: var(--color-text-primary);
+    overflow-x: auto;
+    overflow-y: hidden;
+    z-index: 0;
+    background-color: inherit;
+}
+
+.emptyCell {
+    height: 60px;
+    grid-column: 1 / 1;
+}
+
+.otherEmptyCells {
+    height: 60px;
+    grid-column: 2 / -1;
+}
+
+.cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: var(--spacing-20) 0;
+    border-bottom: var(--border-width-sm) solid var(--border-color-light);
+    z-index: 1;
+}
+
+.cellFeature {
+    justify-content: flex-start;
+    text-align: left;
+}
+
+.featureContent {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+    padding-right: var(--spacing-8);
+}
+
+.featureDescription {
+    opacity: 0.6;
+}
+
+.cellHighlighted {
+    color: var(--color-text-primary-inverted);
+    border-color: var(--border-color-alpha-white-10);
+}
+
+.mainCompanyLogo {
+    height: 32px;
+}
+
+.booleanValue {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-8);
+    border-radius: var(--border-radius-full);
+}
+
+.stringValue {
+    padding: 0 var(--spacing-8);
+}
+
+.booleanValueHighlighted {
+    background:
+        linear-gradient(180deg, rgba(143, 161, 205, 0.3) 0%, rgba(143, 161, 205, 0) 100%), rgba(255, 255, 255, 0.05);
+}
+
+.gradientBackground {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    grid-column: 2 / 3;
+    width: 100%;
+    border-radius: var(--border-radius-full);
+    background:
+        linear-gradient(180deg, rgba(143, 161, 205, 0) 0%, rgba(143, 161, 205, 0.4) 100%), var(--color-bg-base-dark);
+    z-index: 0;
+}
+
+.stickyCell {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+    background-color: inherit;
+}
+
+@media (width <= 1200px) {
+    .container {
+        padding: var(--spacing-120) var(--spacing-64);
+    }
+}
+
+@media screen and (width <= 768px) {
+    .container {
+        gap: var(--spacing-40);
+        padding: var(--spacing-64) var(--spacing-20);
+    }
+
+    .header {
+        gap: var(--spacing-16);
+    }
+
+    .table {
+        display: none;
+    }
+}

package/dist/modules/Comparison/components/ComparisonMobileView/ComparisonMobileView.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),r=require("../../../../components/Icon/constants.cjs.js"),f=require("../../../../components/FilterMenu/FilterMenu.cjs.js"),m=require("../../../../components/Icon/Icon.cjs.js"),c=require("../../../../components/Typography/Typography.cjs.js"),i=require("../../../../utils/cn/cn.cjs.js"),v=require("../../assets/company-logo.svg.cjs.js"),l=require("./comparisonMobileView.module.css.cjs.js"),d=s=>s?s.type==="string"?e.jsx(c.Typography,{defaultVariant:"bodyMd",as:"div",children:s.value}):e.jsx("div",{className:i.cn(l.default.iconCell,s.value?l.default.iconCellHighlighted:""),children:e.jsx(m.Icon,{name:s.value?r.EIconName.CHECK:r.EIconName.CLOSE,className:l.default.icon})}):null,p=s=>s.slice(1).map((t,a)=>({values:[{value:a+1,label:t}]})),g=({comparison:s,className:t})=>{const[a,o]=h.useState(1);return e.jsxs("div",{className:i.cn(l.default.root,t),children:[s.headers.length>2&&e.jsx("div",{children:e.jsx(f.FilterMenu,{options:p(s.headers),label:"Select comparison",selectedValue:a,onSelect:o})}),e.jsxs("div",{className:l.default.table,children:[e.jsxs("div",{className:l.default.headers,children:[e.jsx("div",{className:i.cn(l.default.cell,l.default.cellHighlighted),children:e.jsx(v.default,{className:l.default.companyLogo})}),e.jsx(c.Typography,{as:"div",defaultVariant:"bodyXl",className:l.default.cell,children:s.headers[a]})]}),s.rows.map((n,u)=>e.jsxs("div",{className:l.default.feature,children:[e.jsx(c.Typography,{defaultVariant:"bodyLg",as:"div",weight:"medium",children:n.feature}),e.jsxs("div",{className:l.default.row,children:[e.jsx("div",{className:l.default.cell,children:d(n.values[0])}),e.jsx("div",{className:l.default.cell,children:d(n.values[a])})]})]},`feature-${u}`))]})]})};exports.ComparisonMobileView=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),r=require("../../../../components/Icon/constants.cjs.js"),a=require("../../../../utils/cn/cn.cjs.js"),m=require("../../assets/company-logo.svg.cjs.js"),s=require("../../../../src/modules/Comparison/components/ComparisonMobileView/comparisonMobileView.module.css"),v=require("../../../../components/FilterMenu/FilterMenu.cjs.js"),i=require("../../../../components/Typography/Typography.cjs.js"),p=require("../../../../components/Icon/Icon.cjs.js"),o=l=>l?l.type==="string"?e.jsx(i.Typography,{defaultVariant:"bodyMd",as:"div",children:l.value}):e.jsx("div",{className:a.cn(s.iconCell,l.value?s.iconCellHighlighted:""),children:e.jsx(p.Icon,{name:l.value?r.EIconName.CHECK:r.EIconName.CLOSE,className:s.icon})}):null,x=l=>l.slice(1).map((c,n)=>({values:[{value:n+1,label:c}]})),y=({comparison:l,className:c})=>{const[n,d]=h.useState(1);return e.jsxs("div",{className:a.cn(s.root,c),children:[l.headers.length>2&&e.jsx("div",{children:e.jsx(v.FilterMenu,{options:x(l.headers),label:"Select comparison",selectedValue:n,onSelect:d})}),e.jsxs("div",{className:s.table,children:[e.jsxs("div",{className:s.headers,children:[e.jsx("div",{className:a.cn(s.cell,s.cellHighlighted),children:e.jsx(m.default,{className:s.companyLogo})}),e.jsx(i.Typography,{as:"div",defaultVariant:"bodyXl",className:s.cell,children:l.headers[n]})]}),l.rows.map((t,u)=>e.jsxs("div",{className:s.feature,children:[e.jsx(i.Typography,{defaultVariant:"bodyLg",as:"div",weight:"medium",children:t.feature}),e.jsxs("div",{className:s.row,children:[e.jsx("div",{className:s.cell,children:o(t.values[0])}),e.jsx("div",{className:s.cell,children:o(t.values[n])})]})]},`feature-${u}`))]})]})};exports.ComparisonMobileView=y;

package/dist/modules/Comparison/components/ComparisonMobileView/ComparisonMobileView.es.js

@@ -2,19 +2,19 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import { useState as v } from "react";
 import { EIconName as n } from "../../../../components/Icon/constants.es.js";
-import { FilterMenu as u } from "../../../../components/FilterMenu/FilterMenu.es.js";
-import { Icon as f } from "../../../../components/Icon/Icon.es.js";
-import { Typography as d } from "../../../../components/Typography/Typography.es.js";
-import { cn as c } from "../../../../utils/cn/cn.es.js";
-import p from "../../assets/company-logo.svg.es.js";
-import e from "./comparisonMobileView.module.css.es.js";
-const o = (l) => l ? l.type === "string" ? /* @__PURE__ */ a(d, { defaultVariant: "bodyMd", as: "div", children: l.value }) : /* @__PURE__ */ a("div", { className: c(e.iconCell, l.value ? e.iconCellHighlighted : ""), children: /* @__PURE__ */ a(f, { name: l.value ? n.CHECK : n.CLOSE, className: e.icon }) }) : null, g = (l) => l.slice(1).map((t, i) => ({
+import { cn as d } from "../../../../utils/cn/cn.es.js";
+import u from "../../assets/company-logo.svg.es.js";
+import e from "../../../../modules/Comparison/components/ComparisonMobileView/comparisonMobileView.module.css";
+import { FilterMenu as f } from "../../../../components/FilterMenu/FilterMenu.es.js";
+import { Typography as c } from "../../../../components/Typography/Typography.es.js";
+import { Icon as p } from "../../../../components/Icon/Icon.es.js";
+const o = (l) => l ? l.type === "string" ? /* @__PURE__ */ a(c, { defaultVariant: "bodyMd", as: "div", children: l.value }) : /* @__PURE__ */ a("div", { className: d(e.iconCell, l.value ? e.iconCellHighlighted : ""), children: /* @__PURE__ */ a(p, { name: l.value ? n.CHECK : n.CLOSE, className: e.icon }) }) : null, g = (l) => l.slice(1).map((t, i) => ({
   values: [{ value: i + 1, label: t }]
 })), H = ({ comparison: l, className: t }) => {
   const [i, m] = v(1);
-  return /* @__PURE__ */ r("div", { className: c(e.root, t), children: [
+  return /* @__PURE__ */ r("div", { className: d(e.root, t), children: [
     l.headers.length > 2 && /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
-      u,
+      f,
       {
         options: g(l.headers),
         label: "Select comparison",
@@ -24,11 +24,11 @@ const o = (l) => l ? l.type === "string" ? /* @__PURE__ */ a(d, { defaultVariant
     ) }),
     /* @__PURE__ */ r("div", { className: e.table, children: [
       /* @__PURE__ */ r("div", { className: e.headers, children: [
-        /* @__PURE__ */ a("div", { className: c(e.cell, e.cellHighlighted), children: /* @__PURE__ */ a(p, { className: e.companyLogo }) }),
-        /* @__PURE__ */ a(d, { as: "div", defaultVariant: "bodyXl", className: e.cell, children: l.headers[i] })
+        /* @__PURE__ */ a("div", { className: d(e.cell, e.cellHighlighted), children: /* @__PURE__ */ a(u, { className: e.companyLogo }) }),
+        /* @__PURE__ */ a(c, { as: "div", defaultVariant: "bodyXl", className: e.cell, children: l.headers[i] })
       ] }),
       l.rows.map((s, h) => /* @__PURE__ */ r("div", { className: e.feature, children: [
-        /* @__PURE__ */ a(d, { defaultVariant: "bodyLg", as: "div", weight: "medium", children: s.feature }),
+        /* @__PURE__ */ a(c, { defaultVariant: "bodyLg", as: "div", weight: "medium", children: s.feature }),
         /* @__PURE__ */ r("div", { className: e.row, children: [
           /* @__PURE__ */ a("div", { className: e.cell, children: o(s.values[0]) }),
           /* @__PURE__ */ a("div", { className: e.cell, children: o(s.values[i]) })