@salutejs/plasma-new-hope 0.316.0-dev.0 → 0.317.0-canary.1886.14214080050.0

package/styled-components/cjs/components/Typography/Typography.template-doc.mdx

@@ -23,6 +23,22 @@ title: Typography
 По умолчанию в типографике если текст превышает ширину элемента, то слова будут переноситься по пробелам.
 Чтобы запретить перенос по пробелам, необходимо установить свойство `noWrap` в значении `true`.
 
+## Смена тега
+Если при использовании компонентов необходимо сменить тег, то можно использовать свойство `as`:
+
+```tsx live
+import React from 'react';
+import { BodyM } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <BodyM as="h3">
+            BodyM
+        </BodyM>
+    );
+}
+```
+
 ## Состав
 
 ### Hero unit
@@ -36,12 +52,15 @@ export function App() {
         <div style=\{{ display: 'block' }}>
             <DsplL bold={false}>DsplL</DsplL>
             <DsplL>DsplL Bold</DsplL>
+            <DsplL medium>DsplL Medium</DsplL>
 
             <DsplM bold={false}>DsplM</DsplM>
             <DsplM>DsplM Bold</DsplM>
+            <DsplM medium>DsplM Medium</DsplM>
 
             <DsplS bold={false}>DsplS</DsplS>
             <DsplS>DsplS Bold</DsplS>
+            <DsplS medium>DsplS Medium</DsplS>
         </div>
     );
 }
@@ -58,18 +77,23 @@ export function App() {
         <div style=\{{ display: 'block' }}>
             <H1 bold={false}>H1</H1>
             <H1>H1 Bold</H1>
+            <H1 medium>H1 Medium</H1>
 
             <H2 bold={false}>H2</H2>
             <H2>H2 Bold</H2>
+            <H2 medium>H2 Medium</H2>
 
             <H3 bold={false}>H3</H3>
             <H3>H3 Bold</H3>
+            <H3 medium>H3 Medium</H3>
 
             <H4 bold={false}>H4</H4>
             <H4>H4 Bold</H4>
+            <H4 medium>H4 Medium</H4>
 
             <H5 bold={false}>H5</H5>
             <H5>H5 Bold</H5>
+            <H5 medium>H5 Medium</H5>
         </div>
     );
 }
@@ -86,19 +110,24 @@ export function App() {
     return (
         <div style=\{{ display: 'block' }}>
             <BodyL>BodyL</BodyL>
-            <BodyL bold>BodyL полужирный</BodyL>
+            <BodyL bold>BodyL Bold</BodyL>
+            <BodyL medium>BodyL Medium</BodyL>
 
             <BodyM>BodyM</BodyM>
-            <BodyM bold>BodyM полужирный</BodyM>
+            <BodyM bold>BodyM Bold</BodyM>
+            <BodyM medium>BodyM Medium</BodyM>
 
             <BodyS>BodyS</BodyS>
-            <BodyS bold>BodyS полужирный</BodyS>
+            <BodyS bold>BodyS Bold</BodyS>
+            <BodyS medium>BodyS Medium</BodyS>
 
             <BodyXS>BodyXS</BodyXS>
-            <BodyXS bold>BodyXS полужирный</BodyXS>
+            <BodyXS bold>BodyXS Bold</BodyXS>
+            <BodyXS medium>BodyXS Medium</BodyXS>
 
             <BodyXXS>BodyXXS</BodyXXS>
-            <BodyXXS bold>BodyXXS полужирный</BodyXXS>
+            <BodyXXS bold>BodyXXS Bold</BodyXXS>
+            <BodyXXS medium>BodyXXS Medium</BodyXXS>
         </div>
     );
 }
@@ -115,16 +144,20 @@ export function App() {
     return (
         <div style=\{{ display: 'block' }}>
             <TextL>TextL</TextL>
-            <TextL bold>TextL полужирный</TextL>
+            <TextL bold>TextL Bold</TextL>
+            <TextL medium>TextL Medium</TextL>
 
             <TextM>TextM</TextM>
-            <TextM bold>TextM полужирный</TextM>
+            <TextM bold>TextM Bold</TextM>
+            <TextM medium>TextM Medium</TextM>
 
             <TextS>TextS</TextS>
-            <TextS bold>TextS полужирный</TextS>
+            <TextS bold>TextS Bold</TextS>
+            <TextS medium>TextS Medium</TextS>
 
             <TextXS>TextXS</TextXS>
-            <TextXS bold>TextXS полужирный</TextXS>
+            <TextXS bold>TextXS Bold</TextXS>
+            <TextXS medium>TextXS Medium</TextXS>
         </div>
     );
 }

package/styled-components/cjs/components/Typography/tokens.js

@@ -7,7 +7,8 @@ exports.tokens = exports.classes = void 0;
 var classes = exports.classes = {
   typoWithNoWrap: 'with-no-wrap',
   typoWithBreakWord: 'with-break-word',
-  typoBold: 'typography-bold'
+  typoBold: 'typography-bold',
+  typoMedium: 'typography-medium'
 };
 var tokens = exports.tokens = {
   typoFontFamily: '--typo-font-family',
@@ -15,6 +16,7 @@ var tokens = exports.tokens = {
   typoFontStyle: '--typo-font-style',
   typoFontWeight: '--typo-font-weight',
   typoFontWeightBold: '--typo-font-weight-bold',
+  typoFontWeightMedium: '--typo-font-weight-medium',
   typoFontLetterSpacing: '--typo-font-letter-spacing',
   typoFontLineHeight: '--typo-font-line-height'
 };

package/styled-components/cjs/examples/typography/components/Body/Body.config.js

@@ -12,11 +12,11 @@ var config = exports.config = {
   },
   variations: {
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-bold-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-medium-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-medium-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-medium-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-medium-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-bold-font-weight);", ":var(--plasma-typo-body-xxs-medium-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
     }
   }
 };

package/styled-components/cjs/examples/typography/components/Body/Body.stories.tsx

@@ -9,7 +9,7 @@ import { Body } from './Body';
 import { config } from './Body.config';
 
 const meta: Meta<typeof Body> = {
-    title: 'Data Display/Typography/Body',
+    title: 'typography/Body',
     decorators: [WithTheme],
     component: Body,
     argTypes: {
@@ -19,11 +19,27 @@ const meta: Meta<typeof Body> = {
                 type: 'color',
             },
         },
+        as: {
+            control: 'text',
+        },
+        bold: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'medium', truthy: false },
+        },
+        medium: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'bold', truthy: false },
+        },
     },
     args: {
         noWrap: false,
         breakWord: true,
         bold: false,
+        medium: false,
     },
 };
 

package/styled-components/cjs/examples/typography/components/Dspl/Dspl.config.js

@@ -12,9 +12,9 @@ var config = exports.config = {
   },
   variations: {
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-size);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-font-weight);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":var(--plasma-typo-dspl-l-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-dspl-m-font-size);", ":var(--plasma-typo-dspl-m-font-style);", ":var(--plasma-typo-dspl-m-font-weight);", ":var(--plasma-typo-dspl-m-bold-font-weight);", ":var(--plasma-typo-dspl-m-letter-spacing);", ":var(--plasma-typo-dspl-m-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-dspl-s-font-size);", ":var(--plasma-typo-dspl-s-font-style);", ":var(--plasma-typo-dspl-s-font-weight);", ":var(--plasma-typo-dspl-s-bold-font-weight);", ":var(--plasma-typo-dspl-s-letter-spacing);", ":var(--plasma-typo-dspl-s-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-size);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-font-weight);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-medium-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":var(--plasma-typo-dspl-l-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-dspl-m-font-size);", ":var(--plasma-typo-dspl-m-font-style);", ":var(--plasma-typo-dspl-m-font-weight);", ":var(--plasma-typo-dspl-m-bold-font-weight);", ":var(--plasma-typo-dspl-m-medium-font-weight);", ":var(--plasma-typo-dspl-m-letter-spacing);", ":var(--plasma-typo-dspl-m-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-dspl-s-font-size);", ":var(--plasma-typo-dspl-s-font-style);", ":var(--plasma-typo-dspl-s-font-weight);", ":var(--plasma-typo-dspl-s-bold-font-weight);", ":var(--plasma-typo-dspl-s-medium-font-weight);", ":var(--plasma-typo-dspl-s-letter-spacing);", ":var(--plasma-typo-dspl-s-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
     }
   }
 };

package/styled-components/cjs/examples/typography/components/Dspl/Dspl.stories.tsx

@@ -9,7 +9,7 @@ import { Dspl } from './Dspl';
 import { config } from './Dspl.config';
 
 const meta: Meta<typeof Dspl> = {
-    title: 'Data Display/Typography/Dspl',
+    title: 'typography/Dspl',
     decorators: [WithTheme],
     component: Dspl,
     argTypes: {
@@ -19,11 +19,27 @@ const meta: Meta<typeof Dspl> = {
                 type: 'color',
             },
         },
+        as: {
+            control: 'text',
+        },
+        bold: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'medium', truthy: false },
+        },
+        medium: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'bold', truthy: false },
+        },
     },
     args: {
         noWrap: false,
         breakWord: true,
         bold: false,
+        medium: false,
     },
 };
 

package/styled-components/cjs/examples/typography/components/Heading/Heading.config.js

@@ -12,11 +12,11 @@ var config = exports.config = {
   },
   variations: {
     size: {
-      h1: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-bold-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-bold-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-bold-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-bold-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
+      h1: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-bold-font-weight);", ":var(--plasma-typo-h1-medium-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-bold-font-weight);", ":var(--plasma-typo-h2-medium-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-bold-font-weight);", ":var(--plasma-typo-h3-medium-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-h4-medium-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-bold-font-weight);", ":var(--plasma-typo-h5-medium-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
     }
   }
 };

package/styled-components/cjs/examples/typography/components/Heading/Heading.stories.tsx

@@ -9,7 +9,7 @@ import { Heading } from './Heading';
 import { config } from './Heading.config';
 
 const meta: Meta<typeof Heading> = {
-    title: 'Data Display/Typography/Heading',
+    title: 'typography/Heading',
     decorators: [WithTheme],
     component: Heading,
     argTypes: {
@@ -19,11 +19,27 @@ const meta: Meta<typeof Heading> = {
                 type: 'color',
             },
         },
+        as: {
+            control: 'text',
+        },
+        bold: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'medium', truthy: false },
+        },
+        medium: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'bold', truthy: false },
+        },
     },
     args: {
         noWrap: false,
         breakWord: true,
         bold: false,
+        medium: false,
     },
 };
 

package/styled-components/cjs/examples/typography/components/Text/Text.config.js

@@ -12,10 +12,10 @@ var config = exports.config = {
   },
   variations: {
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-font-weight);", ":var(--plasma-typo-text-l-bold-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-font-weight);", ":var(--plasma-typo-text-m-bold-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-bold-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-bold-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-text-l-font-family);", ":var(--plasma-typo-text-l-font-size);", ":var(--plasma-typo-text-l-font-style);", ":var(--plasma-typo-text-l-font-weight);", ":var(--plasma-typo-text-l-bold-font-weight);", ":var(--plasma-typo-text-l-medium-font-weight);", ":var(--plasma-typo-text-l-letter-spacing);", ":var(--plasma-typo-text-l-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-text-m-font-family);", ":var(--plasma-typo-text-m-font-size);", ":var(--plasma-typo-text-m-font-style);", ":var(--plasma-typo-text-m-font-weight);", ":var(--plasma-typo-text-m-bold-font-weight);", ":var(--plasma-typo-text-m-medium-font-weight);", ":var(--plasma-typo-text-m-letter-spacing);", ":var(--plasma-typo-text-m-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-bold-font-weight);", ":var(--plasma-typo-text-s-medium-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-bold-font-weight);", ":var(--plasma-typo-text-xs-medium-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontWeightBold, _tokens.tokens.typoFontWeightMedium, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
     }
   }
 };

package/styled-components/cjs/examples/typography/components/Text/Text.stories.tsx

@@ -9,7 +9,7 @@ import { Text } from './Text';
 import { config } from './Text.config';
 
 const meta: Meta<typeof Text> = {
-    title: 'Data Display/Typography/Text',
+    title: 'typography/Text',
     decorators: [WithTheme],
     component: Text,
     argTypes: {
@@ -19,11 +19,27 @@ const meta: Meta<typeof Text> = {
                 type: 'color',
             },
         },
+        as: {
+            control: 'text',
+        },
+        bold: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'medium', truthy: false },
+        },
+        medium: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'bold', truthy: false },
+        },
     },
     args: {
         noWrap: false,
         breakWord: true,
         bold: false,
+        medium: false,
     },
 };
 

package/styled-components/es/components/Button/Button.js

@@ -66,7 +66,6 @@ export var buttonRoot = function buttonRoot(Root) {
       value: value,
       disabled: disabled,
       focused: focused || outlined,
-      contentPlacing: contentPlacing,
       className: cx(squareClass, stretchingClass, classes.buttonItem, isLoadingClass, className),
       style: _objectSpread(_objectSpread({}, style), {}, {
         '--plasma_computed-btn-br': buttonBorderRadius,

package/styled-components/es/components/Chip/Chip.js

@@ -59,7 +59,6 @@ export var chipRoot = function chipRoot(Root) {
       tabIndex: readOnly ? -1 : 0,
       onClick: handleClick,
       disabled: disabled,
-      pilled: pilled,
       readOnly: !disabled && readOnly,
       size: size
     }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), hasClear && (contentClearButton || /*#__PURE__*/React.createElement(StyledContentClear, {

package/styled-components/es/components/TextArea/TextArea.js

@@ -244,7 +244,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
       size: size,
       disabled: disabled,
       readOnly: readOnly,
-      clear: clear,
       style: _objectSpread({
         width: helperWidth
       }, style),

package/styled-components/es/components/TextField/TextField.js

@@ -290,9 +290,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
       size: size,
       disabled: disabled,
       readOnly: !disabled && readOnly,
-      clear: clear,
       labelPlacement: innerLabelPlacementValue,
-      chipView: chipView,
       onClick: handleInputFocus,
       className: cx(labelPlacementClass, clearClass, hasDividerClass, hasInnerHintClass, classes.textFieldGroupItem, className),
       style: style

package/styled-components/es/components/Typography/Typography.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["size", "children", "breakWord", "noWrap", "bold", "color", "className", "style"];
+var _excluded = ["size", "children", "breakWord", "noWrap", "bold", "medium", "color", "className", "style"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,6 +21,7 @@ export var typographyRootCompose = function typographyRootCompose(defaultArgs) {
         noWrap = props.noWrap,
         _props$bold = props.bold,
         bold = _props$bold === void 0 ? defaultArgs === null || defaultArgs === void 0 ? void 0 : defaultArgs.defaultBold : _props$bold,
+        medium = props.medium,
         color = props.color,
         className = props.className,
         style = props.style,
@@ -28,11 +29,10 @@ export var typographyRootCompose = function typographyRootCompose(defaultArgs) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         size: size,
         ref: ref,
-        className: cx(noWrap && classes.typoWithNoWrap, breakWord && classes.typoWithBreakWord, bold && classes.typoBold, className),
+        className: cx(noWrap && classes.typoWithNoWrap, breakWord && classes.typoWithBreakWord, bold && classes.typoBold, medium && classes.typoMedium, className),
         style: _objectSpread(_objectSpread({
           color: color
-        }, style), applySpacing(rest)),
-        bold: bold
+        }, style), applySpacing(rest))
       }, rest), children);
     });
   };

package/styled-components/es/components/Typography/Typography.styles.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { applyHyphens, applyHyphensNormal } from '../../mixins';
 import { classes, tokens } from './tokens';
-export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{font-weight:var(", ");}&.", "{white-space:nowrap;}", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, classes.typoBold, tokens.typoFontWeightBold, classes.typoWithNoWrap, applyHyphensNormal, classes.typoWithBreakWord, applyHyphens);
+export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{font-weight:var(", ");}&.", "{font-weight:var(", ");}&.", "{white-space:nowrap;}", ";&.", "{", ";}"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight, tokens.typoFontWeight, classes.typoBold, tokens.typoFontWeightBold, classes.typoMedium, tokens.typoFontWeightMedium, classes.typoWithNoWrap, applyHyphensNormal, classes.typoWithBreakWord, applyHyphens);

package/styled-components/es/components/Typography/Typography.template-doc.mdx

@@ -23,6 +23,22 @@ title: Typography
 По умолчанию в типографике если текст превышает ширину элемента, то слова будут переноситься по пробелам.
 Чтобы запретить перенос по пробелам, необходимо установить свойство `noWrap` в значении `true`.
 
+## Смена тега
+Если при использовании компонентов необходимо сменить тег, то можно использовать свойство `as`:
+
+```tsx live
+import React from 'react';
+import { BodyM } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <BodyM as="h3">
+            BodyM
+        </BodyM>
+    );
+}
+```
+
 ## Состав
 
 ### Hero unit
@@ -36,12 +52,15 @@ export function App() {
         <div style=\{{ display: 'block' }}>
             <DsplL bold={false}>DsplL</DsplL>
             <DsplL>DsplL Bold</DsplL>
+            <DsplL medium>DsplL Medium</DsplL>
 
             <DsplM bold={false}>DsplM</DsplM>
             <DsplM>DsplM Bold</DsplM>
+            <DsplM medium>DsplM Medium</DsplM>
 
             <DsplS bold={false}>DsplS</DsplS>
             <DsplS>DsplS Bold</DsplS>
+            <DsplS medium>DsplS Medium</DsplS>
         </div>
     );
 }
@@ -58,18 +77,23 @@ export function App() {
         <div style=\{{ display: 'block' }}>
             <H1 bold={false}>H1</H1>
             <H1>H1 Bold</H1>
+            <H1 medium>H1 Medium</H1>
 
             <H2 bold={false}>H2</H2>
             <H2>H2 Bold</H2>
+            <H2 medium>H2 Medium</H2>
 
             <H3 bold={false}>H3</H3>
             <H3>H3 Bold</H3>
+            <H3 medium>H3 Medium</H3>
 
             <H4 bold={false}>H4</H4>
             <H4>H4 Bold</H4>
+            <H4 medium>H4 Medium</H4>
 
             <H5 bold={false}>H5</H5>
             <H5>H5 Bold</H5>
+            <H5 medium>H5 Medium</H5>
         </div>
     );
 }
@@ -86,19 +110,24 @@ export function App() {
     return (
         <div style=\{{ display: 'block' }}>
             <BodyL>BodyL</BodyL>
-            <BodyL bold>BodyL полужирный</BodyL>
+            <BodyL bold>BodyL Bold</BodyL>
+            <BodyL medium>BodyL Medium</BodyL>
 
             <BodyM>BodyM</BodyM>
-            <BodyM bold>BodyM полужирный</BodyM>
+            <BodyM bold>BodyM Bold</BodyM>
+            <BodyM medium>BodyM Medium</BodyM>
 
             <BodyS>BodyS</BodyS>
-            <BodyS bold>BodyS полужирный</BodyS>
+            <BodyS bold>BodyS Bold</BodyS>
+            <BodyS medium>BodyS Medium</BodyS>
 
             <BodyXS>BodyXS</BodyXS>
-            <BodyXS bold>BodyXS полужирный</BodyXS>
+            <BodyXS bold>BodyXS Bold</BodyXS>
+            <BodyXS medium>BodyXS Medium</BodyXS>
 
             <BodyXXS>BodyXXS</BodyXXS>
-            <BodyXXS bold>BodyXXS полужирный</BodyXXS>
+            <BodyXXS bold>BodyXXS Bold</BodyXXS>
+            <BodyXXS medium>BodyXXS Medium</BodyXXS>
         </div>
     );
 }
@@ -115,16 +144,20 @@ export function App() {
     return (
         <div style=\{{ display: 'block' }}>
             <TextL>TextL</TextL>
-            <TextL bold>TextL полужирный</TextL>
+            <TextL bold>TextL Bold</TextL>
+            <TextL medium>TextL Medium</TextL>
 
             <TextM>TextM</TextM>
-            <TextM bold>TextM полужирный</TextM>
+            <TextM bold>TextM Bold</TextM>
+            <TextM medium>TextM Medium</TextM>
 
             <TextS>TextS</TextS>
-            <TextS bold>TextS полужирный</TextS>
+            <TextS bold>TextS Bold</TextS>
+            <TextS medium>TextS Medium</TextS>
 
             <TextXS>TextXS</TextXS>
-            <TextXS bold>TextXS полужирный</TextXS>
+            <TextXS bold>TextXS Bold</TextXS>
+            <TextXS medium>TextXS Medium</TextXS>
         </div>
     );
 }

package/styled-components/es/components/Typography/tokens.js

@@ -1,7 +1,8 @@
 export var classes = {
   typoWithNoWrap: 'with-no-wrap',
   typoWithBreakWord: 'with-break-word',
-  typoBold: 'typography-bold'
+  typoBold: 'typography-bold',
+  typoMedium: 'typography-medium'
 };
 export var tokens = {
   typoFontFamily: '--typo-font-family',
@@ -9,6 +10,7 @@ export var tokens = {
   typoFontStyle: '--typo-font-style',
   typoFontWeight: '--typo-font-weight',
   typoFontWeightBold: '--typo-font-weight-bold',
+  typoFontWeightMedium: '--typo-font-weight-medium',
   typoFontLetterSpacing: '--typo-font-letter-spacing',
   typoFontLineHeight: '--typo-font-line-height'
 };

package/styled-components/es/examples/typography/components/Body/Body.config.js

@@ -6,11 +6,11 @@ export var config = {
   },
   variations: {
     size: {
-      l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
-      m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
-      s: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
-      xs: /*#__PURE__*/css(["", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
-      xxs: /*#__PURE__*/css(["", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-bold-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+      l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-medium-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-medium-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      s: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-medium-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      xs: /*#__PURE__*/css(["", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-medium-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      xxs: /*#__PURE__*/css(["", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-bold-font-weight);", ":var(--plasma-typo-body-xxs-medium-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
     }
   }
 };