@zenpatient-org/healthspan-marketing-ui 0.1.102 → 0.1.103

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"),h=require("../../utils/formatDate.cjs.js");require("../Icon/Icon.cjs.js");const l=require("../Icon/constants.cjs.js"),x=require("../Label/Label.cjs.js"),r=require("../TextButton/TextButton.cjs.js"),s=require("../Typography/Typography.cjs.js"),i=require("../../utils/cn/cn.cjs.js"),a=require("./studyGridCard.module.css.cjs.js");function b(d){if(d.compressed===!0){const{title:n,link:t,image:o}=d;return e.jsxs("div",{className:i.cn(a.default.study,a.default.studyCompressed),children:[e.jsx("div",{className:i.cn(a.default.imagePart,a.default.imagePartCompressed),style:{backgroundImage:`url(${o})`}}),e.jsxs("div",{className:i.cn(a.default.dataPart,a.default.dataPartCompressed),children:[e.jsx(s.Typography,{className:i.cn(a.default.title,a.default.titleCompressed),defaultVariant:"headingSm",mobileVariant:"bodySm",as:"h6",children:n}),e.jsxs("div",{className:a.default.button,children:[e.jsx(r.TextButton,{hideOn:"desktop",className:a.default.mobileButton,size:"sm",as:"a",href:t,suffixIcon:l.EIconName.ARROW_FORWARD,children:"READ MORE"}),e.jsx(r.TextButton,{hideOn:"mobile",className:a.default.desktopButton,size:"lg",as:"a",href:t,suffixIcon:l.EIconName.ARROW_FORWARD,children:"READ MORE"})]})]}),e.jsx("div",{className:a.default.borderLeft}),e.jsx("div",{className:a.default.borderRight})]})}else{const{title:n,link:t,image:o,inverted:c,date:m,label:u,readTime:f}=d;return e.jsxs("div",{className:a.default.study,"data-inverted":c,children:[e.jsx("div",{className:a.default.imagePart,style:{backgroundImage:`url(${o})`},children:u&&e.jsx(x.Label,{...u})}),e.jsxs("div",{className:a.default.dataPart,children:[e.jsxs("div",{className:a.default.info,children:[e.jsx(s.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:h.formatDate(m)}),e.jsxs(e.Fragment,{children:[e.jsx(s.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:"•"}),e.jsxs(s.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:[f," MIN READ"]})]})]}),e.jsx(s.Typography,{className:a.default.title,defaultVariant:"headingSm",mobileVariant:"bodySm",as:"h6",children:n}),e.jsxs("div",{className:a.default.button,children:[e.jsx(r.TextButton,{hideOn:"desktop",className:a.default.mobileButton,size:"sm",as:"a",href:t,suffixIcon:l.EIconName.ARROW_FORWARD,children:"READ MORE"}),e.jsx(r.TextButton,{hideOn:"mobile",className:a.default.desktopButton,size:"lg",as:"a",href:t,suffixIcon:l.EIconName.ARROW_FORWARD,children:"READ MORE"})]})]})]})}}exports.StudyGridCard=b;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../utils/formatDate.cjs.js");require("../Icon/Icon.cjs.js");const l=require("../Icon/constants.cjs.js"),b=require("../Label/Label.cjs.js"),r=require("../TextButton/TextButton.cjs.js"),t=require("../Typography/Typography.cjs.js"),i=require("../../utils/cn/cn.cjs.js"),a=require("./studyGridCard.module.css.cjs.js");function x(d){if(d.compressed===!0){const{title:n,link:s,image:o}=d;return e.jsxs("div",{className:i.cn(a.default.study,a.default.studyCompressed),children:[e.jsx("div",{className:i.cn(a.default.imagePart,a.default.imagePartCompressed),style:{backgroundImage:`url(${o})`}}),e.jsxs("div",{className:i.cn(a.default.dataPart,a.default.dataPartCompressed),children:[e.jsx(t.Typography,{className:i.cn(a.default.title,a.default.titleCompressed),defaultVariant:"headingSm",mobileVariant:"bodySm",as:"h6",children:n}),e.jsxs("div",{className:a.default.button,children:[e.jsx(r.TextButton,{hideOn:"desktop",className:a.default.mobileButton,size:"sm",as:"a",href:s,suffixIcon:l.EIconName.ARROW_FORWARD,children:"READ MORE"}),e.jsx(r.TextButton,{hideOn:"mobile",className:a.default.desktopButton,size:"lg",as:"a",href:s,suffixIcon:l.EIconName.ARROW_FORWARD,children:"READ MORE"})]})]}),e.jsx("div",{className:a.default.borderLeft}),e.jsx("div",{className:a.default.borderRight})]})}else{const{title:n,link:s,image:o,inverted:f,date:u,label:c,readTime:h}=d;return e.jsxs("div",{className:a.default.study,"data-inverted":f,children:[e.jsx("div",{className:a.default.imagePart,style:{backgroundImage:`url(${o})`},children:c&&e.jsx(b.Label,{...c})}),e.jsxs("div",{className:a.default.dataPart,children:[e.jsxs("div",{className:a.default.info,children:[e.jsx(t.Typography,{className:a.default.date,defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:m.formatDate(u)}),e.jsx(t.Typography,{className:a.default.mobileDate,defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:m.formatDate(u,{year:"2-digit"}).replaceAll(" / ","/")}),e.jsxs(e.Fragment,{children:[e.jsx(t.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",align:"center",children:"•"}),e.jsxs(t.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"medium",color:"color-neutral-500",children:[h," MIN READ"]})]})]}),e.jsx(t.Typography,{className:a.default.title,defaultVariant:"headingSm",mobileVariant:"bodySm",as:"h6",children:n}),e.jsxs("div",{className:a.default.button,children:[e.jsx(r.TextButton,{hideOn:"desktop",className:a.default.mobileButton,size:"sm",as:"a",href:s,suffixIcon:l.EIconName.ARROW_FORWARD,children:"READ MORE"}),e.jsx(r.TextButton,{hideOn:"mobile",className:a.default.desktopButton,size:"lg",as:"a",href:s,suffixIcon:l.EIconName.ARROW_FORWARD,children:"READ MORE"})]})]})]})}}exports.StudyGridCard=x;
@@ -1,13 +1,13 @@
1
1
  import { jsxs as i, jsx as a, Fragment as R } from "react/jsx-runtime";
2
- import { formatDate as b } from "../../utils/formatDate.es.js";
2
+ import { formatDate as u } from "../../utils/formatDate.es.js";
3
3
  import "../Icon/Icon.es.js";
4
- import { EIconName as l } from "../Icon/constants.es.js";
5
- import { Label as p } from "../Label/Label.es.js";
4
+ import { EIconName as r } from "../Icon/constants.es.js";
5
+ import { Label as g } from "../Label/Label.es.js";
6
6
  import { TextButton as s } from "../TextButton/TextButton.es.js";
7
- import { Typography as r } from "../Typography/Typography.es.js";
7
+ import { Typography as l } from "../Typography/Typography.es.js";
8
8
  import { cn as m } from "../../utils/cn/cn.es.js";
9
9
  import e from "./studyGridCard.module.css.es.js";
10
- function k(d) {
10
+ function S(d) {
11
11
  if (d.compressed === !0) {
12
12
  const { title: o, link: t, image: n } = d;
13
13
  return /* @__PURE__ */ i("div", { className: m(e.study, e.studyCompressed), children: [
@@ -20,7 +20,7 @@ function k(d) {
20
20
  ),
21
21
  /* @__PURE__ */ i("div", { className: m(e.dataPart, e.dataPartCompressed), children: [
22
22
  /* @__PURE__ */ a(
23
- r,
23
+ l,
24
24
  {
25
25
  className: m(e.title, e.titleCompressed),
26
26
  defaultVariant: "headingSm",
@@ -38,7 +38,7 @@ function k(d) {
38
38
  size: "sm",
39
39
  as: "a",
40
40
  href: t,
41
- suffixIcon: l.ARROW_FORWARD,
41
+ suffixIcon: r.ARROW_FORWARD,
42
42
  children: "READ MORE"
43
43
  }
44
44
  ),
@@ -50,7 +50,7 @@ function k(d) {
50
50
  size: "lg",
51
51
  as: "a",
52
52
  href: t,
53
- suffixIcon: l.ARROW_FORWARD,
53
+ suffixIcon: r.ARROW_FORWARD,
54
54
  children: "READ MORE"
55
55
  }
56
56
  )
@@ -60,36 +60,50 @@ function k(d) {
60
60
  /* @__PURE__ */ a("div", { className: e.borderRight })
61
61
  ] });
62
62
  } else {
63
- const { title: o, link: t, image: n, inverted: h, date: u, label: c, readTime: f } = d;
64
- return /* @__PURE__ */ i("div", { className: e.study, "data-inverted": h, children: [
65
- /* @__PURE__ */ a("div", { className: e.imagePart, style: { backgroundImage: `url(${n})` }, children: c && /* @__PURE__ */ a(p, { ...c }) }),
63
+ const { title: o, link: t, image: n, inverted: f, date: c, label: h, readTime: b } = d;
64
+ return /* @__PURE__ */ i("div", { className: e.study, "data-inverted": f, children: [
65
+ /* @__PURE__ */ a("div", { className: e.imagePart, style: { backgroundImage: `url(${n})` }, children: h && /* @__PURE__ */ a(g, { ...h }) }),
66
66
  /* @__PURE__ */ i("div", { className: e.dataPart, children: [
67
67
  /* @__PURE__ */ i("div", { className: e.info, children: [
68
68
  /* @__PURE__ */ a(
69
- r,
69
+ l,
70
70
  {
71
+ className: e.date,
71
72
  defaultVariant: "labelSm",
72
73
  mobileVariant: "labelXs",
73
74
  emphasis: !0,
74
75
  weight: "medium",
75
76
  color: "color-neutral-500",
76
- children: b(u)
77
+ children: u(c)
78
+ }
79
+ ),
80
+ /* @__PURE__ */ a(
81
+ l,
82
+ {
83
+ className: e.mobileDate,
84
+ defaultVariant: "labelSm",
85
+ mobileVariant: "labelXs",
86
+ emphasis: !0,
87
+ weight: "medium",
88
+ color: "color-neutral-500",
89
+ children: u(c, { year: "2-digit" }).replaceAll(" / ", "/")
77
90
  }
78
91
  ),
79
92
  /* @__PURE__ */ i(R, { children: [
80
93
  /* @__PURE__ */ a(
81
- r,
94
+ l,
82
95
  {
83
96
  defaultVariant: "labelSm",
84
97
  mobileVariant: "labelXs",
85
98
  emphasis: !0,
86
99
  weight: "medium",
87
100
  color: "color-neutral-500",
101
+ align: "center",
88
102
  children: "•"
89
103
  }
90
104
  ),
91
105
  /* @__PURE__ */ i(
92
- r,
106
+ l,
93
107
  {
94
108
  defaultVariant: "labelSm",
95
109
  mobileVariant: "labelXs",
@@ -97,14 +111,14 @@ function k(d) {
97
111
  weight: "medium",
98
112
  color: "color-neutral-500",
99
113
  children: [
100
- f,
114
+ b,
101
115
  " MIN READ"
102
116
  ]
103
117
  }
104
118
  )
105
119
  ] })
106
120
  ] }),
107
- /* @__PURE__ */ a(r, { className: e.title, defaultVariant: "headingSm", mobileVariant: "bodySm", as: "h6", children: o }),
121
+ /* @__PURE__ */ a(l, { className: e.title, defaultVariant: "headingSm", mobileVariant: "bodySm", as: "h6", children: o }),
108
122
  /* @__PURE__ */ i("div", { className: e.button, children: [
109
123
  /* @__PURE__ */ a(
110
124
  s,
@@ -114,7 +128,7 @@ function k(d) {
114
128
  size: "sm",
115
129
  as: "a",
116
130
  href: t,
117
- suffixIcon: l.ARROW_FORWARD,
131
+ suffixIcon: r.ARROW_FORWARD,
118
132
  children: "READ MORE"
119
133
  }
120
134
  ),
@@ -126,7 +140,7 @@ function k(d) {
126
140
  size: "lg",
127
141
  as: "a",
128
142
  href: t,
129
- suffixIcon: l.ARROW_FORWARD,
143
+ suffixIcon: r.ARROW_FORWARD,
130
144
  children: "READ MORE"
131
145
  }
132
146
  )
@@ -136,5 +150,5 @@ function k(d) {
136
150
  }
137
151
  }
138
152
  export {
139
- k as StudyGridCard
153
+ S as StudyGridCard
140
154
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="studyGridCard-module__study___mkYRU",d="studyGridCard-module__imagePart___fvIQO",e="studyGridCard-module__dataPart___mweMi",r="studyGridCard-module__dataPartCompressed___bLUMa",s="studyGridCard-module__info___xY-Kk",o="studyGridCard-module__title___U2va1",_="studyGridCard-module__button___bvI0u",a="studyGridCard-module__mobileButton___v-RZs",u="studyGridCard-module__studyCompressed___0XTXS",i="studyGridCard-module__imagePartCompressed___8GG-N",m="studyGridCard-module__titleCompressed___Z7uqM",l="studyGridCard-module__borderLeft___xGpbL",C="studyGridCard-module__borderRight___DmL9W",n={study:t,imagePart:d,dataPart:e,dataPartCompressed:r,info:s,title:o,button:_,mobileButton:a,studyCompressed:u,imagePartCompressed:i,titleCompressed:m,borderLeft:l,borderRight:C};exports.borderLeft=l;exports.borderRight=C;exports.button=_;exports.dataPart=e;exports.dataPartCompressed=r;exports.default=n;exports.imagePart=d;exports.imagePartCompressed=i;exports.info=s;exports.mobileButton=a;exports.study=t;exports.studyCompressed=u;exports.title=o;exports.titleCompressed=m;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="studyGridCard-module__study___mkYRU",d="studyGridCard-module__mobileDate___rOS6q",e="studyGridCard-module__imagePart___fvIQO",r="studyGridCard-module__dataPart___mweMi",o="studyGridCard-module__dataPartCompressed___bLUMa",s="studyGridCard-module__info___xY-Kk",_="studyGridCard-module__title___U2va1",a="studyGridCard-module__button___bvI0u",u="studyGridCard-module__mobileButton___v-RZs",i="studyGridCard-module__studyCompressed___0XTXS",m="studyGridCard-module__imagePartCompressed___8GG-N",l="studyGridCard-module__titleCompressed___Z7uqM",C="studyGridCard-module__borderLeft___xGpbL",n="studyGridCard-module__borderRight___DmL9W",b="studyGridCard-module__date___UBDSq",y={study:t,mobileDate:d,imagePart:e,dataPart:r,dataPartCompressed:o,info:s,title:_,button:a,mobileButton:u,studyCompressed:i,imagePartCompressed:m,titleCompressed:l,borderLeft:C,borderRight:n,date:b};exports.borderLeft=C;exports.borderRight=n;exports.button=a;exports.dataPart=r;exports.dataPartCompressed=o;exports.date=b;exports.default=y;exports.imagePart=e;exports.imagePartCompressed=m;exports.info=s;exports.mobileButton=u;exports.mobileDate=d;exports.study=t;exports.studyCompressed=i;exports.title=_;exports.titleCompressed=l;
@@ -1,31 +1,35 @@
1
- const t = "studyGridCard-module__study___mkYRU", d = "studyGridCard-module__imagePart___fvIQO", e = "studyGridCard-module__dataPart___mweMi", _ = "studyGridCard-module__dataPartCompressed___bLUMa", r = "studyGridCard-module__info___xY-Kk", s = "studyGridCard-module__title___U2va1", o = "studyGridCard-module__button___bvI0u", a = "studyGridCard-module__mobileButton___v-RZs", u = "studyGridCard-module__studyCompressed___0XTXS", m = "studyGridCard-module__imagePartCompressed___8GG-N", i = "studyGridCard-module__titleCompressed___Z7uqM", C = "studyGridCard-module__borderLeft___xGpbL", l = "studyGridCard-module__borderRight___DmL9W", n = {
2
- study: t,
3
- imagePart: d,
4
- dataPart: e,
5
- dataPartCompressed: _,
6
- info: r,
1
+ const d = "studyGridCard-module__study___mkYRU", t = "studyGridCard-module__mobileDate___rOS6q", e = "studyGridCard-module__imagePart___fvIQO", _ = "studyGridCard-module__dataPart___mweMi", r = "studyGridCard-module__dataPartCompressed___bLUMa", o = "studyGridCard-module__info___xY-Kk", s = "studyGridCard-module__title___U2va1", a = "studyGridCard-module__button___bvI0u", u = "studyGridCard-module__mobileButton___v-RZs", m = "studyGridCard-module__studyCompressed___0XTXS", i = "studyGridCard-module__imagePartCompressed___8GG-N", l = "studyGridCard-module__titleCompressed___Z7uqM", C = "studyGridCard-module__borderLeft___xGpbL", n = "studyGridCard-module__borderRight___DmL9W", y = "studyGridCard-module__date___UBDSq", b = {
2
+ study: d,
3
+ mobileDate: t,
4
+ imagePart: e,
5
+ dataPart: _,
6
+ dataPartCompressed: r,
7
+ info: o,
7
8
  title: s,
8
- button: o,
9
- mobileButton: a,
10
- studyCompressed: u,
11
- imagePartCompressed: m,
12
- titleCompressed: i,
9
+ button: a,
10
+ mobileButton: u,
11
+ studyCompressed: m,
12
+ imagePartCompressed: i,
13
+ titleCompressed: l,
13
14
  borderLeft: C,
14
- borderRight: l
15
+ borderRight: n,
16
+ date: y
15
17
  };
16
18
  export {
17
19
  C as borderLeft,
18
- l as borderRight,
19
- o as button,
20
- e as dataPart,
21
- _ as dataPartCompressed,
22
- n as default,
23
- d as imagePart,
24
- m as imagePartCompressed,
25
- r as info,
26
- a as mobileButton,
27
- t as study,
28
- u as studyCompressed,
20
+ n as borderRight,
21
+ a as button,
22
+ _ as dataPart,
23
+ r as dataPartCompressed,
24
+ y as date,
25
+ b as default,
26
+ e as imagePart,
27
+ i as imagePartCompressed,
28
+ o as info,
29
+ u as mobileButton,
30
+ t as mobileDate,
31
+ d as study,
32
+ m as studyCompressed,
29
33
  s as title,
30
- i as titleCompressed
34
+ l as titleCompressed
31
35
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),s=require("../../styles/typography.module.css.cjs.js"),m=require("../../utils/cn/cn.cjs.js"),f=require("./Typography.service.cjs.js"),C=({defaultVariant:t,children:o,className:i="",weight:l,emphasis:r=!1,as:c="span",mobileVariant:a,color:n,id:u})=>{const p=s.default[t]||"";let e=l;r&&!l&&(e="medium");const y=e?s.default[`weight${e.charAt(0).toUpperCase()}${e.slice(1)}`]:"",g=t.startsWith("label")&&r?s.default.labelEmphasis:"",h=a?s.default[`mobile__${a}`]:"";return d.jsx(c,{style:f.getMemoizedColorStyles(n),className:m.cn(p,y,g,h,i),id:u,children:o})};exports.Typography=C;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),e=require("../../styles/typography.module.css.cjs.js"),C=require("../../utils/cn/cn.cjs.js"),_=require("./Typography.service.cjs.js"),$=({defaultVariant:l,children:i,className:c="",weight:a,emphasis:o=!1,as:n="span",mobileVariant:r,color:u,id:p,align:t="left"})=>{const y=e.default[l]||"";let s=a;o&&!a&&(s="medium");const d=s?e.default[`weight${s.charAt(0).toUpperCase()}${s.slice(1)}`]:"",g=l.startsWith("label")&&o?e.default.labelEmphasis:"",f=r?e.default[`mobile__${r}`]:"",h=t?e.default[`${t}Align`]:"";return m.jsx(n,{style:_.getMemoizedColorStyles(u),className:C.cn(y,d,g,f,h,c),id:p,"data-align":t,children:i})};exports.Typography=$;
@@ -12,6 +12,7 @@ export interface TypographyProps {
12
12
  as?: ElementType;
13
13
  color?: string;
14
14
  id?: string;
15
+ align?: 'left' | 'center' | 'right';
15
16
  }
16
- export declare const Typography: ({ defaultVariant, children, className, weight, emphasis, as: Component, mobileVariant, color, id, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
17
+ export declare const Typography: ({ defaultVariant, children, className, weight, emphasis, as: Component, mobileVariant, color, id, align, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
17
18
  export {};
@@ -1,32 +1,34 @@
1
- import { jsx as C } from "react/jsx-runtime";
2
- import o from "../../styles/typography.module.css.es.js";
3
- import { cn as g } from "../../utils/cn/cn.es.js";
4
- import { getMemoizedColorStyles as b } from "./Typography.service.es.js";
5
- const d = ({
6
- defaultVariant: t,
7
- children: a,
1
+ import { jsx as $ } from "react/jsx-runtime";
2
+ import s from "../../styles/typography.module.css.es.js";
3
+ import { cn as b } from "../../utils/cn/cn.es.js";
4
+ import { getMemoizedColorStyles as d } from "./Typography.service.es.js";
5
+ const j = ({
6
+ defaultVariant: e,
7
+ children: i,
8
8
  className: m = "",
9
- weight: e,
10
- emphasis: l = !1,
11
- as: i = "span",
9
+ weight: l,
10
+ emphasis: a = !1,
11
+ as: p = "span",
12
12
  mobileVariant: r,
13
- color: p,
14
- id: c
13
+ color: c,
14
+ id: n,
15
+ align: o = "left"
15
16
  }) => {
16
- const n = o[t] || "";
17
- let s = e;
18
- l && !e && (s = "medium");
19
- const h = s ? o[`weight${s.charAt(0).toUpperCase()}${s.slice(1)}`] : "", f = t.startsWith("label") && l ? o.labelEmphasis : "", y = r ? o[`mobile__${r}`] : "";
20
- return /* @__PURE__ */ C(
21
- i,
17
+ const f = s[e] || "";
18
+ let t = l;
19
+ a && !l && (t = "medium");
20
+ const h = t ? s[`weight${t.charAt(0).toUpperCase()}${t.slice(1)}`] : "", C = e.startsWith("label") && a ? s.labelEmphasis : "", g = r ? s[`mobile__${r}`] : "", y = o ? s[`${o}Align`] : "";
21
+ return /* @__PURE__ */ $(
22
+ p,
22
23
  {
23
- style: b(p),
24
- className: g(n, h, f, y, m),
25
- id: c,
26
- children: a
24
+ style: d(c),
25
+ className: b(f, h, C, g, y, m),
26
+ id: n,
27
+ "data-align": o,
28
+ children: i
27
29
  }
28
30
  );
29
31
  };
30
32
  export {
31
- d as Typography
33
+ j as Typography
32
34
  };