@bothub-chat/ui 2.17.3 → 2.17.5-develop-2f081aee-0fae-4914-af45-4139c02a4b02
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.
- package/dist/components/container/styled.js +5 -2
- package/dist/components/description/card/grid/styled.js +1 -1
- package/dist/components/description/card/styled.js +16 -15
- package/dist/components/modal/index.d.ts +1 -0
- package/dist/components/modal/index.js +1 -1
- package/dist/components/typography/styled.js +1 -1
- package/dist/components/typography/types.d.ts +1 -1
- package/fonts/Inter-Black.woff2 +0 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{styled as d,css as i}from"styled-components";const
|
|
1
|
+
import{styled as d,css as i}from"styled-components";const m=d.div.withConfig({displayName:"styled__ContainerStyled",componentId:"sc-m5rfmf-0"})(["",""],(({theme:d,$disabled:m})=>!m&&i`
|
|
2
2
|
width: 100%;
|
|
3
3
|
max-width: 1370px;
|
|
4
4
|
margin: auto;
|
|
@@ -6,4 +6,7 @@ import{styled as d,css as i}from"styled-components";const t=d.div.withConfig({di
|
|
|
6
6
|
@media (max-width: ${d.mobile.maxWidth}) {
|
|
7
7
|
padding: 0px 30px;
|
|
8
8
|
}
|
|
9
|
-
|
|
9
|
+
@media (max-width: ${d.mobile.maxWidth}) {
|
|
10
|
+
padding: 0px 16px;
|
|
11
|
+
}
|
|
12
|
+
`));export{m as ContainerStyled};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{styled as e,css as t}from"styled-components";import{adaptive as i}from"../../../../adaptive/index.js";const o=e.div.withConfig({displayName:"styled__DescriptionCardGridStyled",componentId:"sc-fo4yup-0"})(["display:grid;justify-items:center;gap:
|
|
1
|
+
import{styled as e,css as t}from"styled-components";import{adaptive as i}from"../../../../adaptive/index.js";const o=e.div.withConfig({displayName:"styled__DescriptionCardGridStyled",componentId:"sc-fo4yup-0"})(["display:grid;justify-items:center;gap:34px;",""],i((({$columns:e})=>({desktop:t(["grid-template-columns:repeat(",",1fr);"],e),tablet:t(["grid-template-columns:repeat(2,1fr);"]),mobile:t(["grid-template-columns:1fr;"])}))));export{o as DescriptionCardGridStyled};
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import{styled as t,css as i}from"styled-components";import{Typography as e}from"../../typography/index.js";import{Button as a}from"../../button/index.js";import o from"./assets/bg.svg.js";import d from"./assets/main-bg.webp.js";const n=t.div.withConfig({displayName:"styled__DescriptionCardBorderWrapper",componentId:"sc-1ylto9n-0"})(["padding:1px;border-radius:12px;height:100%;width:100%;",""],(({$variant:t})=>"tertiary"===t?i`
|
|
2
|
-
background: radial-gradient(50% 100% at 150px -10%, ${
|
|
3
|
-
`:i``)),r=t.div.withConfig({displayName:"styled__DescriptionCardBackgroundWrapper",componentId:"sc-1ylto9n-1"})(["position:relative;border-radius:12px;overflow:hidden;height:100%;width:100%;"]),m=t.div.withConfig({displayName:"styled__DescriptionCardContent",componentId:"sc-1ylto9n-2"})(["width:100%;height:100%;position:relative;box-sizing:border-box;",""],(({$variant:t})=>{switch(t){case"tertiary":return i`
|
|
1
|
+
import{styled as t,css as i}from"styled-components";import{Typography as e}from"../../typography/index.js";import{Button as a}from"../../button/index.js";import o from"./assets/bg.svg.js";import d from"./assets/main-bg.webp.js";const n=t.div.withConfig({displayName:"styled__DescriptionCardBorderWrapper",componentId:"sc-1ylto9n-0"})(["padding:1px;border-radius:12px;height:100%;width:100%;",""],(({$variant:t,theme:e})=>"tertiary"===t?i`
|
|
2
|
+
background: radial-gradient(50% 100% at 150px -10%, ${e.colors.accent.primary}, rgba(0, 0, 0, 0.0));
|
|
3
|
+
`:i``)),r=t.div.withConfig({displayName:"styled__DescriptionCardBackgroundWrapper",componentId:"sc-1ylto9n-1"})(["position:relative;border-radius:12px;overflow:hidden;height:100%;width:100%;"]),m=t.div.withConfig({displayName:"styled__DescriptionCardContent",componentId:"sc-1ylto9n-2"})(["width:100%;height:100%;position:relative;box-sizing:border-box;",""],(({$variant:t,theme:e})=>{switch(t){case"tertiary":return i`
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
align-items: flex-start;
|
|
7
7
|
padding: 24px 20px;
|
|
8
|
-
@media (max-width: ${
|
|
8
|
+
@media (max-width: ${e.tablet.maxWidth}) {
|
|
9
9
|
padding: 24px 18px;
|
|
10
10
|
}
|
|
11
|
-
@media (max-width: ${
|
|
11
|
+
@media (max-width: ${e.mobile.maxWidth}) {
|
|
12
12
|
padding: 24px 14px;
|
|
13
13
|
}
|
|
14
14
|
`;case"quaternary":return i`
|
|
15
15
|
padding: 28px 24px;
|
|
16
|
-
@media (max-width: ${
|
|
16
|
+
@media (max-width: ${e.tablet.maxWidth}) {
|
|
17
17
|
padding: 24px 18px;
|
|
18
18
|
align-items: center;
|
|
19
19
|
}
|
|
20
|
-
@media (max-width: ${
|
|
20
|
+
@media (max-width: ${e.mobile.maxWidth}) {
|
|
21
21
|
padding: 30px 16px;
|
|
22
22
|
}
|
|
23
23
|
`;default:return i`
|
|
@@ -25,12 +25,13 @@ import{styled as t,css as i}from"styled-components";import{Typography as e}from"
|
|
|
25
25
|
flex-direction: column;
|
|
26
26
|
justify-content: center;
|
|
27
27
|
align-items: flex-start;
|
|
28
|
-
padding:
|
|
29
|
-
@media (max-width: ${
|
|
28
|
+
padding: 34px;
|
|
29
|
+
@media (max-width: ${e.tablet.maxWidth}) {
|
|
30
30
|
align-items: center;
|
|
31
|
+
padding: 30px;
|
|
31
32
|
}
|
|
32
|
-
@media (max-width: ${
|
|
33
|
-
padding:
|
|
33
|
+
@media (max-width: ${e.mobile.maxWidth}) {
|
|
34
|
+
padding: 67px 30px;
|
|
34
35
|
}
|
|
35
36
|
`}})),p=t.div.withConfig({displayName:"styled__DescriptionCardBackground",componentId:"sc-1ylto9n-3"})(["position:absolute;width:100%;top:0px;bottom:0px;left:0px;right:0px;pointer-events:none;",""],(({theme:t,$variant:e})=>"tertiary"===e?i`
|
|
36
37
|
background-color: ${t.colors.grayScale.gray4};
|
|
@@ -39,9 +40,9 @@ import{styled as t,css as i}from"styled-components";import{Typography as e}from"
|
|
|
39
40
|
background-size: 630px 244px;
|
|
40
41
|
background-position-y: bottom;
|
|
41
42
|
background-repeat: no-repeat;
|
|
42
|
-
`)),s=t(e).attrs({variant:"body-xl-semibold",component:"h3"}).withConfig({displayName:"styled__DescriptionCardTitle",componentId:"sc-1ylto9n-4"})(["color:",";@media (max-width:","){text-align:center;}"],(({theme:t})=>t.default.colors.base.white),(({theme:t})=>t.tablet.maxWidth)),l=t(e).attrs({variant:"body-m-semibold"}).withConfig({displayName:"styled__DescriptionCardTertiaryTitle",componentId:"sc-1ylto9n-5"})(["margin-top:16px;@media (max-width:","){margin-top:14px;}@media (max-width:","){margin-top:10px;}"],(({theme:t})=>t.tablet.maxWidth),(({theme:t})=>t.mobile.maxWidth)),x=t(e).attrs({variant:"body-m-regular",component:"p"}).withConfig({displayName:"styled__DescriptionCardText",componentId:"sc-1ylto9n-6"})(["color:",";margin-top:16px;@media (max-width:","){text-align:center;}"],(({theme:t})=>t.default.colors.base.white),(({theme:t})=>t.tablet.maxWidth)),h=t(e).attrs({variant:"body-m-regular",component:"p"}).withConfig({displayName:"styled__DescriptionCardTertiaryText",componentId:"sc-1ylto9n-7"})(["margin-top:12px;"]),c=t(a).withConfig({displayName:"styled__DescriptionCardButton",componentId:"sc-1ylto9n-8"})(["margin-top:20px;display:flex;@media (max-width:","){display:flex;margin:auto;margin-top:14px;margin-bottom:0px;}"],(({theme:t})=>t.tablet.maxWidth)),g=t.div.withConfig({displayName:"styled__DescriptionCardStyled",componentId:"sc-1ylto9n-9"})(["display:flex;width:100%;min-height:
|
|
43
|
+
`)),s=t(e).attrs({variant:"body-xl-semibold",component:"h3"}).withConfig({displayName:"styled__DescriptionCardTitle",componentId:"sc-1ylto9n-4"})(["color:",";@media (max-width:","){text-align:center;}"],(({theme:t})=>t.default.colors.base.white),(({theme:t})=>t.tablet.maxWidth)),l=t(e).attrs({variant:"body-m-semibold"}).withConfig({displayName:"styled__DescriptionCardTertiaryTitle",componentId:"sc-1ylto9n-5"})(["margin-top:16px;@media (max-width:","){margin-top:14px;}@media (max-width:","){margin-top:10px;}"],(({theme:t})=>t.tablet.maxWidth),(({theme:t})=>t.mobile.maxWidth)),x=t(e).attrs({variant:"body-m-regular",component:"p"}).withConfig({displayName:"styled__DescriptionCardText",componentId:"sc-1ylto9n-6"})(["color:",";margin-top:16px;@media (max-width:","){text-align:center;}"],(({theme:t})=>t.default.colors.base.white),(({theme:t})=>t.tablet.maxWidth)),h=t(e).attrs({variant:"body-m-regular",component:"p"}).withConfig({displayName:"styled__DescriptionCardTertiaryText",componentId:"sc-1ylto9n-7"})(["margin-top:12px;"]),c=t(a).withConfig({displayName:"styled__DescriptionCardButton",componentId:"sc-1ylto9n-8"})(["margin-top:20px;display:flex;@media (max-width:","){display:flex;margin:auto;margin-top:14px;margin-bottom:0px;}"],(({theme:t})=>t.tablet.maxWidth)),g=t.div.withConfig({displayName:"styled__DescriptionCardStyled",componentId:"sc-1ylto9n-9"})(["display:flex;width:100%;min-height:180px;max-width:630px;"," "," ",""],(({$variant:t,theme:e})=>"main"===t&&i`
|
|
43
44
|
height: 532px;
|
|
44
|
-
@media (max-width: ${
|
|
45
|
+
@media (max-width: ${e.mobile.maxWidth}) {
|
|
45
46
|
height: 380px;
|
|
46
47
|
}
|
|
47
48
|
${m} {
|
|
@@ -65,8 +66,8 @@ import{styled as t,css as i}from"styled-components";import{Typography as e}from"
|
|
|
65
66
|
background-repeat: no-repeat;
|
|
66
67
|
background-position: bottom right;
|
|
67
68
|
}
|
|
68
|
-
`),(({$variant:t})=>"secondary"===t&&i`
|
|
69
|
-
@media (max-width: ${
|
|
69
|
+
`),(({$variant:t,theme:e})=>"secondary"===t&&i`
|
|
70
|
+
@media (max-width: ${e.mobile.maxWidth}) {
|
|
70
71
|
min-height: auto;
|
|
71
72
|
height: auto;
|
|
72
73
|
${p} {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useTransition as
|
|
1
|
+
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useTransition as l}from"@react-spring/web";import{ModalStyled as o,ModalWindow as i,ModalWindowBody as n,ModalTitle as c,ModalCloseButton as s,ModalCloseButtonIcon as t,ModalWindowBodyContent as a,ModalWindowBodyScrollbarWrapper as d,ModalContent as m}from"./styled.js";import{Backdrop as p}from"../backdrop/index.js";import{Portal as h}from"../portal/index.js";const f=({open:f,title:u=null,scrollbar:b=!1,children:j,onClose:x,images:y,className:g})=>{let k;const w=l(f,{from:{opacity:0,transform:"scale(0.9)"},enter:{opacity:1,transform:"scale(1)"},config:{duration:200}});return k=f?r(o,{children:[e(p,{open:f,onClick:x}),w(((l,o)=>o&&r(i,{style:l,className:g,children:[y,r(n,{children:[u?e(c,{children:u}):null,e(s,{onClick:x,children:e(t,{size:24})}),e(a,{children:e(d,{overflow:b?"auto":"visible",disabled:!b,disableShadows:!b,children:e(m,{children:j})})})]})]})))]}):null,e(h,{children:k})};export{f as Modal};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import{styled as n,css as e}from"styled-components";const t=n=>e`
|
|
2
|
-
${({theme:e})=>{switch(n){case"h1":return`\n font-weight: 700;\n font-size: 46px;\n line-height: 60px;\n --skeleton-height: 60px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 40px;\n line-height: 52px;\n --skeleton-height: 52px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 28px;\n line-height: 36px;\n --skeleton-height: 36px;\n }\n `;case"h2":return`\n font-weight: 600;\n font-size: 34px;\n line-height: 44px;\n --skeleton-height: 44px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 30px;\n line-height: 40px;\n --skeleton-height: 40px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 24px;\n line-height: 32px;\n --skeleton-height: 32px;\n }\n `;case"h3":return`\n font-weight: 600;\n font-size: 30px;\n line-height: 40px;\n --skeleton-height: 40px;\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 22px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n `;case"body-xxxl-regular":return`\n font-size: 46px;\n font-weight: 400;\n line-height: 60px;\n --skeleton-height: 60px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 30px;\n line-height: 40px;\n --skeleton-height: 40px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 24px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n `;case"banner-h1-bold":return`\n font-size: 128px;\n font-weight: 700;\n line-height: 110px;\n --skeleton-height: 110px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 76px;\n line-height: 70px;\n --skeleton-height: 70px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 36px;\n line-height: 40px;\n --skeleton-height: 40px;\n }\n `;case"body-h1-regular":return`\n font-weight: 400;\n font-size: 46px;\n line-height: 60px;\n --skeleton-height: 60px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 40px;\n line-height: 52px;\n --skeleton-height: 52px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 28px;\n line-height: 36px;\n --skeleton-height: 36px;\n }\n `;case"body-xxl-regular":return`\n font-weight: 400;\n font-size: 26px;\n line-height: 34px;\n --skeleton-height: 34px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 22px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 20px;\n line-height: 26px;\n --skeleton-height: 26px;\n }\n `;case"body-xxl-semibold":return`\n font-weight: 600;\n font-size: 26px;\n line-height: 34px;\n --skeleton-height: 34px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 22px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 20px;\n line-height: 26px;\n --skeleton-height: 26px;\n }\n `;case"body-xl-semibold":return`\n font-weight: 600;\n font-size: 22px;\n line-height: 29px;\n --skeleton-height: 29px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 20px;\n line-height: 26px;\n --skeleton-height: 26px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n }\n `;case"body-m-semibold":return`\n font-weight: 600;\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n }\n `;case"body-m-medium":return`\n font-weight: 500;\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n }\n `;case"body-m-regular":return`\n font-weight: 400;\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n }\n `;case"body-s-medium":return`\n font-weight: 500;\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 12px;\n line-height: 16px;\n --skeleton-height: 16px;\n }\n `;case"body-s-semibold":return`\n font-weight: 600;\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 12px;\n line-height: 16px;\n --skeleton-height: 16px;\n }\n `;case"body-s-regular":return`\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 12px;\n line-height: 16px;\n --skeleton-height: 16px;\n }\n `;case"body-xs-regular":return`\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n --skeleton-height: 16px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 10px;\n line-height: 16px;\n --skeleton-height: 16px;\n }\n `;case"body-l-semibold":return`\n font-weight: 600;\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n }\n `;case"body-l-medium":return`\n font-weight: 500;\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n }\n `;case"body-l-medium-italic":return`\n font-weight: 500;\n font-style: italic;\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n }\n `;case"button-sm":return"\n font-weight: 500;\n font-size: 15px;\n line-height: 20px;\n --skeleton-height: 20px;\n ";case"button-md":return"\n font-weight: 500;\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n ";case"input-md":return"\n font-weight: 400;\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n ";case"input-sm":return"\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n ";case"body-xl-regular":return`\n font-size: 24px;\n font-weight: 400;\n line-height: 31.2px;\n --skeleton-height: 31.2px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 22px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n }\n `;default:return""}}}
|
|
2
|
+
${({theme:e})=>{switch(n){case"h1":return`\n font-weight: 700;\n font-size: 46px;\n line-height: 60px;\n --skeleton-height: 60px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 40px;\n line-height: 52px;\n --skeleton-height: 52px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 28px;\n line-height: 36px;\n --skeleton-height: 36px;\n }\n `;case"h2":return`\n font-weight: 600;\n font-size: 34px;\n line-height: 44px;\n --skeleton-height: 44px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 30px;\n line-height: 40px;\n --skeleton-height: 40px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 24px;\n line-height: 32px;\n --skeleton-height: 32px;\n }\n `;case"h3":return`\n font-weight: 600;\n font-size: 30px;\n line-height: 40px;\n --skeleton-height: 40px;\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 22px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n `;case"body-xxxl-regular":return`\n font-size: 46px;\n font-weight: 400;\n line-height: 60px;\n --skeleton-height: 60px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 30px;\n line-height: 40px;\n --skeleton-height: 40px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 24px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n `;case"banner-h1-bold":return`\n font-size: 128px;\n font-weight: 700;\n line-height: 110px;\n --skeleton-height: 110px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 76px;\n line-height: 70px;\n --skeleton-height: 70px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 36px;\n line-height: 40px;\n --skeleton-height: 40px;\n }\n `;case"banner-h3-black":return`\n font-weight: 900;\n font-size: 40px;\n line-height: 40px;\n --skeleton-height: 40px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 24px;\n line-height: 24px;\n --skeleton-height: 24px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 20px;\n line-height: 24px;\n --skeleton-height: 24px;\n }\n `;case"body-h1-regular":return`\n font-weight: 400;\n font-size: 46px;\n line-height: 60px;\n --skeleton-height: 60px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 40px;\n line-height: 52px;\n --skeleton-height: 52px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 28px;\n line-height: 36px;\n --skeleton-height: 36px;\n }\n `;case"body-xxl-regular":return`\n font-weight: 400;\n font-size: 26px;\n line-height: 34px;\n --skeleton-height: 34px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 22px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 20px;\n line-height: 26px;\n --skeleton-height: 26px;\n }\n `;case"body-xxl-semibold":return`\n font-weight: 600;\n font-size: 26px;\n line-height: 34px;\n --skeleton-height: 34px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 22px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 20px;\n line-height: 26px;\n --skeleton-height: 26px;\n }\n `;case"body-xl-semibold":return`\n font-weight: 600;\n font-size: 22px;\n line-height: 29px;\n --skeleton-height: 29px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 20px;\n line-height: 26px;\n --skeleton-height: 26px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n }\n `;case"body-m-semibold":return`\n font-weight: 600;\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n }\n `;case"body-m-medium":return`\n font-weight: 500;\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n }\n `;case"body-m-regular":return`\n font-weight: 400;\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n }\n `;case"body-s-medium":return`\n font-weight: 500;\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 12px;\n line-height: 16px;\n --skeleton-height: 16px;\n }\n `;case"body-s-semibold":return`\n font-weight: 600;\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 12px;\n line-height: 16px;\n --skeleton-height: 16px;\n }\n `;case"body-s-regular":return`\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 12px;\n line-height: 16px;\n --skeleton-height: 16px;\n }\n `;case"body-xs-regular":return`\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n --skeleton-height: 16px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 10px;\n line-height: 16px;\n --skeleton-height: 16px;\n }\n `;case"body-l-semibold":return`\n font-weight: 600;\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n }\n `;case"body-l-medium":return`\n font-weight: 500;\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n }\n `;case"body-l-medium-italic":return`\n font-weight: 500;\n font-style: italic;\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n }\n `;case"button-sm":return"\n font-weight: 500;\n font-size: 15px;\n line-height: 20px;\n --skeleton-height: 20px;\n ";case"button-md":return"\n font-weight: 500;\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n ";case"input-md":return"\n font-weight: 400;\n font-size: 16px;\n line-height: 22px;\n --skeleton-height: 22px;\n ";case"input-sm":return"\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n --skeleton-height: 18px;\n ";case"body-xl-regular":return`\n font-size: 24px;\n font-weight: 400;\n line-height: 31.2px;\n --skeleton-height: 31.2px;\n @media (max-width: ${e.tablet.maxWidth}) {\n font-size: 22px;\n line-height: 30px;\n --skeleton-height: 30px;\n }\n @media (max-width: ${e.mobile.maxWidth}) {\n font-size: 18px;\n line-height: 24px;\n --skeleton-height: 24px;\n }\n `;default:return""}}}
|
|
3
3
|
`,i=n.span.withConfig({displayName:"styled__TypographyStyled",componentId:"sc-6o5m6z-0"})(["margin:0px;color:",";font-weight:normal;text-decoration:none;text-align:",";--skeleton-width:200px;"," ",""],(({theme:n})=>n.colors.base.white),(({$align:n})=>n),(({$fullWidth:n})=>n&&"\n width: 100%;\n "),(({$variant:n})=>t(n)));export{i as TypographyStyled,t as getTypographyStyles};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body-xxxl-regular' | 'banner-h1-bold' | 'body-xxl-regular' | 'body-h1-regular' | 'body-xxl-semibold' | 'body-xl-semibold' | 'body-xl-regular' | 'body-m-semibold' | 'body-m-medium' | 'body-m-regular' | 'body-s-medium' | 'body-s-semibold' | 'body-l-medium' | 'body-l-medium-italic' | 'body-s-regular' | 'body-xs-regular' | 'body-l-semibold' | 'button-sm' | 'button-md' | 'input-md' | 'input-sm';
|
|
2
|
+
export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body-xxxl-regular' | 'banner-h1-bold' | 'banner-h3-black' | 'body-xxl-regular' | 'body-h1-regular' | 'body-xxl-semibold' | 'body-xl-semibold' | 'body-xl-regular' | 'body-m-semibold' | 'body-m-medium' | 'body-m-regular' | 'body-s-medium' | 'body-s-semibold' | 'body-l-medium' | 'body-l-medium-italic' | 'body-s-regular' | 'body-xs-regular' | 'body-l-semibold' | 'button-sm' | 'button-md' | 'input-md' | 'input-sm';
|
|
3
3
|
export type TypographyComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'div' | 'a' | 'code' | 'strong' | 'b' | 'em' | 'i' | 'li' | 'blockquote' | 'figcaption' | React.FC;
|
|
4
4
|
export type TypographyAlign = 'left' | 'center' | 'right';
|
|
Binary file
|