@zenpatient-org/healthspan-marketing-ui 0.2.11 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./assets/VectorLogo.svg.cjs.js"),r=require("../../src/components/PlainFeaturesGroup/plainFeaturesGroup.module.css"),n=require("../Typography/Typography.cjs.js"),c=({items:s})=>e.jsxs("div",{className:r.container,children:[e.jsx("div",{className:r.plainFeaturesGroup,children:s&&s.map((a,t)=>e.jsx("div",{className:r.feature,children:e.jsx(n.Typography,{className:r.featureText,defaultVariant:"bodyXs",children:a.text})},t))}),e.jsx(o.default,{className:r.logo})]});exports.PlainFeaturesGroup=c;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("./assets/VectorLogo.svg.cjs.js"),s=require("../../src/components/PlainFeaturesGroup/plainFeaturesGroup.module.css"),c=require("../Icon/Icon.cjs.js"),t=require("../Typography/Typography.cjs.js"),u=({items:a})=>e.jsxs("div",{className:s.container,children:[e.jsx("div",{className:s.plainFeaturesGroup,children:a&&a.map((r,o)=>e.jsxs("div",{className:s.feature,children:[r.icon&&e.jsx(c.Icon,{name:r.icon,className:s.featureIcon}),e.jsx(t.Typography,{className:s.featureText,defaultVariant:"bodyXs",children:r.text})]},o))}),e.jsx(n.default,{className:s.logo})]});exports.PlainFeaturesGroup=u;
@@ -1,11 +1,15 @@
1
- import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
- import i from "./assets/VectorLogo.svg.es.js";
1
+ import { jsxs as s, jsx as a } from "react/jsx-runtime";
2
+ import c from "./assets/VectorLogo.svg.es.js";
3
3
  import r from "../../components/PlainFeaturesGroup/plainFeaturesGroup.module.css";
4
- import { Typography as l } from "../Typography/Typography.es.js";
5
- const d = ({ items: a }) => /* @__PURE__ */ t("div", { className: r.container, children: [
6
- /* @__PURE__ */ e("div", { className: r.plainFeaturesGroup, children: a && a.map((o, s) => /* @__PURE__ */ e("div", { className: r.feature, children: /* @__PURE__ */ e(l, { className: r.featureText, defaultVariant: "bodyXs", children: o.text }) }, s)) }),
7
- /* @__PURE__ */ e(i, { className: r.logo })
4
+ import { Icon as n } from "../Icon/Icon.es.js";
5
+ import { Typography as i } from "../Typography/Typography.es.js";
6
+ const u = ({ items: o }) => /* @__PURE__ */ s("div", { className: r.container, children: [
7
+ /* @__PURE__ */ a("div", { className: r.plainFeaturesGroup, children: o && o.map((e, t) => /* @__PURE__ */ s("div", { className: r.feature, children: [
8
+ e.icon && /* @__PURE__ */ a(n, { name: e.icon, className: r.featureIcon }),
9
+ /* @__PURE__ */ a(i, { className: r.featureText, defaultVariant: "bodyXs", children: e.text })
10
+ ] }, t)) }),
11
+ /* @__PURE__ */ a(c, { className: r.logo })
8
12
  ] });
9
13
  export {
10
- d as PlainFeaturesGroup
14
+ u as PlainFeaturesGroup
11
15
  };
@@ -20,7 +20,9 @@
20
20
  position: relative;
21
21
  height: 200px;
22
22
  width: 300px;
23
- margin-bottom: -66px;
23
+ margin-top: -13px;
24
+ margin-right: -37px;
25
+ margin-bottom: -200px;
24
26
  flex-shrink: 0;
25
27
  z-index: 0;
26
28
  opacity: 0.6;
@@ -33,9 +35,10 @@
33
35
  }
34
36
 
35
37
  .featureIcon {
38
+ margin-top: -1px;
36
39
  color: var(--color-text-secondary);
37
- width: 20px;
38
- height: 20px;
40
+ width: 16px;
41
+ height: 16px;
39
42
  }
40
43
 
41
44
  .featureText {
@@ -44,7 +47,13 @@
44
47
 
45
48
  @media (width <= 1200px) {
46
49
  .logo {
47
- margin-left: -47px;
50
+ margin-right: -180px;
51
+ }
52
+ }
53
+
54
+ @media (width <= 768px) {
55
+ .logo {
56
+ margin-right: -220px;
48
57
  margin-top: -30px;
49
58
  }
50
59
  }
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),c=require("../../utils/cn/cn.cjs.js"),d=require("../../utils/periodView.cjs.js"),l=({items:i})=>a.jsx("div",{className:e.root,children:i.map((r,n)=>a.jsxs("div",{className:c.cn(e.container,r.display==="double"?e.double:e.single),children:[a.jsx(s.Typography,{as:"p",defaultVariant:r.display==="double"?"bodySm":"bodyLg",className:e.description,children:r.description}),a.jsxs("div",{className:e.priceWrapper,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.prefix,children:r.prefix}),a.jsxs("div",{className:e.priceAmount,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingLg",className:e.price,children:(r.price/100).toFixed(0)}),a.jsx(s.Typography,{as:"p",defaultVariant:"headingXs",mobileVariant:"headingXxs",className:e.currency,children:"$"}),r.period!=="none"&&a.jsxs(s.Typography,{as:"p",defaultVariant:"labelMd",className:e.period,children:["/",d.shortPeriod(r.period)]})]})]})]},n))});exports.PriceDisplay=l;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../Typography/Typography.cjs.js"),e=require("../../src/components/PriceDisplay/priceDisplay.module.css"),c=require("../../utils/cn/cn.cjs.js"),l=require("../../utils/periodView.cjs.js"),o=({items:i})=>a.jsx("div",{className:e.root,children:i.map((r,n)=>a.jsxs("div",{className:c.cn(e.container,r.display==="double"?e.double:e.single),children:[a.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.description,children:r.description}),a.jsxs("div",{className:e.priceWrapper,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"bodySm",className:e.prefix,children:r.prefix}),a.jsxs("div",{className:e.priceAmount,children:[a.jsx(s.Typography,{as:"p",defaultVariant:"headingXl",mobileVariant:"headingLg",className:e.price,children:(r.price/100).toFixed(0)}),a.jsx(s.Typography,{as:"p",defaultVariant:"headingXs",mobileVariant:"headingXxs",className:e.currency,children:"$"}),r.period!=="none"&&a.jsxs(s.Typography,{as:"p",defaultVariant:"labelMd",className:e.period,children:["/",l.shortPeriod(r.period)]})]})]})]},n))});exports.PriceDisplay=o;
@@ -1,25 +1,17 @@
1
- import { jsx as e, jsxs as d } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as s } from "react/jsx-runtime";
2
2
  import { Typography as i } from "../Typography/Typography.es.js";
3
3
  import a from "../../components/PriceDisplay/priceDisplay.module.css";
4
- import { cn as o } from "../../utils/cn/cn.es.js";
5
- import { shortPeriod as n } from "../../utils/periodView.es.js";
6
- const f = ({ items: s }) => /* @__PURE__ */ e("div", { className: a.root, children: s.map((r, l) => /* @__PURE__ */ d(
4
+ import { cn as n } from "../../utils/cn/cn.es.js";
5
+ import { shortPeriod as o } from "../../utils/periodView.es.js";
6
+ const f = ({ items: d }) => /* @__PURE__ */ e("div", { className: a.root, children: d.map((r, l) => /* @__PURE__ */ s(
7
7
  "div",
8
8
  {
9
- className: o(a.container, r.display === "double" ? a.double : a.single),
9
+ className: n(a.container, r.display === "double" ? a.double : a.single),
10
10
  children: [
11
- /* @__PURE__ */ e(
12
- i,
13
- {
14
- as: "p",
15
- defaultVariant: r.display === "double" ? "bodySm" : "bodyLg",
16
- className: a.description,
17
- children: r.description
18
- }
19
- ),
20
- /* @__PURE__ */ d("div", { className: a.priceWrapper, children: [
11
+ /* @__PURE__ */ e(i, { as: "p", defaultVariant: "bodySm", className: a.description, children: r.description }),
12
+ /* @__PURE__ */ s("div", { className: a.priceWrapper, children: [
21
13
  /* @__PURE__ */ e(i, { as: "p", defaultVariant: "bodySm", className: a.prefix, children: r.prefix }),
22
- /* @__PURE__ */ d("div", { className: a.priceAmount, children: [
14
+ /* @__PURE__ */ s("div", { className: a.priceAmount, children: [
23
15
  /* @__PURE__ */ e(
24
16
  i,
25
17
  {
@@ -40,9 +32,9 @@ const f = ({ items: s }) => /* @__PURE__ */ e("div", { className: a.root, childr
40
32
  children: "$"
41
33
  }
42
34
  ),
43
- r.period !== "none" && /* @__PURE__ */ d(i, { as: "p", defaultVariant: "labelMd", className: a.period, children: [
35
+ r.period !== "none" && /* @__PURE__ */ s(i, { as: "p", defaultVariant: "labelMd", className: a.period, children: [
44
36
  "/",
45
- n(r.period)
37
+ o(r.period)
46
38
  ] })
47
39
  ] })
48
40
  ] })
@@ -22,6 +22,7 @@
22
22
  justify-content: space-between;
23
23
  align-items: center;
24
24
  gap: 3vw;
25
+ width: 100%;
25
26
  }
26
27
 
27
28
  .container.double {
@@ -49,7 +50,6 @@
49
50
  .description {
50
51
  flex: 1;
51
52
  min-width: 0;
52
- max-width: 25ch;
53
53
  }
54
54
 
55
55
  .priceWrapper {
@@ -1,4 +1,5 @@
1
1
  import { ETypeBadge } from '../../components/TypeBadge';
2
+ import { EIconName } from '../../components/Icon/constants';
2
3
 
3
4
  export type TTypeBadge = 'senescence' | 'supplements' | 'outline' | 'energy' | 'metabolism' | 'labs';
4
5
  export type TProductFeature = {
@@ -26,7 +27,7 @@ export type TPriceDisplayComponentView = {
26
27
  };
27
28
  export type TInternalPlainFeatureItemView = {
28
29
  text: string;
29
- icon: string;
30
+ icon: EIconName;
30
31
  href?: string;
31
32
  };
32
33
  export type TPlainFeaturesGroupView = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zenpatient-org/healthspan-marketing-ui",
3
- "version": "0.2.11",
3
+ "version": "0.2.12",
4
4
  "description": "Design system",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",