@salutejs/plasma-new-hope 0.317.0-canary.1886.14214080050.0 → 0.317.0-canary.1888.14214679698.0

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

@@ -23,22 +23,6 @@ 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
@@ -52,15 +36,12 @@ 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>
     );
 }
@@ -77,23 +58,18 @@ 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>
     );
 }
@@ -110,24 +86,19 @@ export function App() {
     return (
         <div style=\{{ display: 'block' }}>
             <BodyL>BodyL</BodyL>
-            <BodyL bold>BodyL Bold</BodyL>
-            <BodyL medium>BodyL Medium</BodyL>
+            <BodyL bold>BodyL полужирный</BodyL>
 
             <BodyM>BodyM</BodyM>
-            <BodyM bold>BodyM Bold</BodyM>
-            <BodyM medium>BodyM Medium</BodyM>
+            <BodyM bold>BodyM полужирный</BodyM>
 
             <BodyS>BodyS</BodyS>
-            <BodyS bold>BodyS Bold</BodyS>
-            <BodyS medium>BodyS Medium</BodyS>
+            <BodyS bold>BodyS полужирный</BodyS>
 
             <BodyXS>BodyXS</BodyXS>
-            <BodyXS bold>BodyXS Bold</BodyXS>
-            <BodyXS medium>BodyXS Medium</BodyXS>
+            <BodyXS bold>BodyXS полужирный</BodyXS>
 
             <BodyXXS>BodyXXS</BodyXXS>
-            <BodyXXS bold>BodyXXS Bold</BodyXXS>
-            <BodyXXS medium>BodyXXS Medium</BodyXXS>
+            <BodyXXS bold>BodyXXS полужирный</BodyXXS>
         </div>
     );
 }
@@ -144,20 +115,16 @@ export function App() {
     return (
         <div style=\{{ display: 'block' }}>
             <TextL>TextL</TextL>
-            <TextL bold>TextL Bold</TextL>
-            <TextL medium>TextL Medium</TextL>
+            <TextL bold>TextL полужирный</TextL>
 
             <TextM>TextM</TextM>
-            <TextM bold>TextM Bold</TextM>
-            <TextM medium>TextM Medium</TextM>
+            <TextM bold>TextM полужирный</TextM>
 
             <TextS>TextS</TextS>
-            <TextS bold>TextS Bold</TextS>
-            <TextS medium>TextS Medium</TextS>
+            <TextS bold>TextS полужирный</TextS>
 
             <TextXS>TextXS</TextXS>
-            <TextXS bold>TextXS Bold</TextXS>
-            <TextXS medium>TextXS Medium</TextXS>
+            <TextXS bold>TextXS полужирный</TextXS>
         </div>
     );
 }

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

@@ -7,8 +7,7 @@ exports.tokens = exports.classes = void 0;
 var classes = exports.classes = {
   typoWithNoWrap: 'with-no-wrap',
   typoWithBreakWord: 'with-break-word',
-  typoBold: 'typography-bold',
-  typoMedium: 'typography-medium'
+  typoBold: 'typography-bold'
 };
 var tokens = exports.tokens = {
   typoFontFamily: '--typo-font-family',
@@ -16,7 +15,6 @@ 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/plasma_b2c/components/Table/Table.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, ComponentProps, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
@@ -8,12 +9,12 @@ import { IconButton } from '../IconButton/IconButton';
 import { IconEditOutline } from '../../../../components/_Icon';
 import { Dropdown } from '../Dropdown/Dropdown';
 
+import { config } from './Table.config';
 import { Table } from './Table';
 
 type StoryTableProps = ComponentProps<typeof Table>;
 
-const view = ['default', 'clear'];
-const size = ['s', 'm', 'l'];
+const { views, sizes } = getConfigVariations(config);
 const borderVariant = ['rows', 'header', 'all'];
 
 const meta: Meta<StoryTableProps> = {
@@ -23,11 +24,11 @@ const meta: Meta<StoryTableProps> = {
     argTypes: {
         view: {
             control: 'select',
-            options: view,
+            options: views,
         },
         size: {
             control: 'select',
-            options: size,
+            options: sizes,
         },
         borderVariant: {
             control: 'select',
@@ -514,8 +515,8 @@ const StoryComplex = (args: StoryTableProps) => {
                 <Button text="Очистить выбранные" view="warning" size="xs" onClick={clearSelected} />
                 <Button text="Убрать сортировку" view="warning" size="xs" onClick={clearSorted} />
                 <Button text="Очистить фильтры" view="warning" size="xs" onClick={clearFiltered} />
-                <Button text="Очистить все" view="critical" size="xs" onClick={clearAll} />
-                <Button text="Добавить строку" view="success" size="xs" onClick={addRow} />
+                <Button text="Очистить все" view="negative" size="xs" onClick={clearAll} />
+                <Button text="Добавить строку" view="positive" size="xs" onClick={addRow} />
             </ButtonGroup>
 
             <br />

package/styled-components/cjs/examples/plasma_web/components/Table/Table.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, ComponentProps, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
@@ -7,13 +8,13 @@ import { Button } from '../Button/Button';
 import { IconButton } from '../IconButton/IconButton';
 import { IconEditOutline } from '../../../../components/_Icon';
 import { Dropdown } from '../Dropdown/Dropdown';
+import { config } from '../../../plasma_b2c/components/Table/Table.config';
 
 import { Table } from './Table';
 
 type StoryTableProps = ComponentProps<typeof Table>;
 
-const view = ['default', 'clear'];
-const size = ['s', 'm', 'l'];
+const { views, sizes } = getConfigVariations(config);
 const borderVariant = ['rows', 'header', 'all'];
 
 const meta: Meta<StoryTableProps> = {
@@ -23,11 +24,11 @@ const meta: Meta<StoryTableProps> = {
     argTypes: {
         view: {
             control: 'select',
-            options: view,
+            options: views,
         },
         size: {
             control: 'select',
-            options: size,
+            options: sizes,
         },
         borderVariant: {
             control: 'select',
@@ -514,8 +515,8 @@ const StoryComplex = (args: StoryTableProps) => {
                 <Button text="Очистить выбранные" view="warning" size="xs" onClick={clearSelected} />
                 <Button text="Убрать сортировку" view="warning" size="xs" onClick={clearSorted} />
                 <Button text="Очистить фильтры" view="warning" size="xs" onClick={clearFiltered} />
-                <Button text="Очистить все" view="critical" size="xs" onClick={clearAll} />
-                <Button text="Добавить строку" view="success" size="xs" onClick={addRow} />
+                <Button text="Очистить все" view="negative" size="xs" onClick={clearAll} />
+                <Button text="Добавить строку" view="positive" size="xs" onClick={addRow} />
             </ButtonGroup>
 
             <br />

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-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)
+      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)
     }
   }
 };

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: 'typography/Body',
+    title: 'Data Display/Typography/Body',
     decorators: [WithTheme],
     component: Body,
     argTypes: {
@@ -19,27 +19,11 @@ 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-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)
+      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)
     }
   }
 };

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: 'typography/Dspl',
+    title: 'Data Display/Typography/Dspl',
     decorators: [WithTheme],
     component: Dspl,
     argTypes: {
@@ -19,27 +19,11 @@ 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-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)
+      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)
     }
   }
 };

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: 'typography/Heading',
+    title: 'Data Display/Typography/Heading',
     decorators: [WithTheme],
     component: Heading,
     argTypes: {
@@ -19,27 +19,11 @@ 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/Old/Body/Body.config.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _tokens = /*#__PURE__*/require("../../../../../components/Typography/tokens");
+var config = exports.config = {
+  defaults: {
+    size: 'body1'
+  },
+  variations: {
+    size: {
+      body1: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-letter-spacing);", ":var(--plasma-typo-body1-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      body2: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body2-font-family);", ":var(--plasma-typo-body2-font-size);", ":var(--plasma-typo-body2-font-style);", ":var(--plasma-typo-body2-font-weight);", ":var(--plasma-typo-body2-letter-spacing);", ":var(--plasma-typo-body2-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      body3: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body3-font-family);", ":var(--plasma-typo-body3-font-size);", ":var(--plasma-typo-body3-font-style);", ":var(--plasma-typo-body3-font-weight);", ":var(--plasma-typo-body3-letter-spacing);", ":var(--plasma-typo-body3-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OldBody = void 0;
+var _Typography = /*#__PURE__*/require("../../../../../components/Typography");
+var _engines = /*#__PURE__*/require("../../../../../engines");
+var _Body = /*#__PURE__*/require("./Body.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Typography.oldBodyConfig, _Body.config);
+var OldBody = exports.OldBody = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
+import { mergeConfig } from '../../../../../engines';
+import { oldBodyConfig } from '../../../../../components/Typography';
+
+import { OldBody } from './Body';
+import { config } from './Body.config';
+
+const meta: Meta<typeof OldBody> = {
+    title: 'Data Display/Typography/Old/Body',
+    decorators: [WithTheme],
+    component: OldBody,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(oldBodyConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+    args: {
+        noWrap: false,
+        breakWord: true,
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof OldBody> = {
+    render: (props) => {
+        return (
+            <OldBody {...props}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt nihil non ut animi
+                distinctio modi quo, provident quod.
+            </OldBody>
+        );
+    },
+};

package/styled-components/cjs/examples/typography/components/Old/Button/Button.config.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _tokens = /*#__PURE__*/require("../../../../../components/Typography/tokens");
+var config = exports.config = {
+  defaults: {
+    size: 'button1'
+  },
+  variations: {
+    size: {
+      button1: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-button1-font-family);", ":var(--plasma-typo-button1-font-size);", ":var(--plasma-typo-button1-font-style);", ":var(--plasma-typo-button1-font-weight);", ":var(--plasma-typo-button1-letter-spacing);", ":var(--plasma-typo-button1-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight),
+      button2: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-button2-font-family);", ":var(--plasma-typo-button2-font-size);", ":var(--plasma-typo-button2-font-style);", ":var(--plasma-typo-button2-font-weight);", ":var(--plasma-typo-button2-letter-spacing);", ":var(--plasma-typo-button2-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
+    }
+  }
+};

package/styled-components/cjs/examples/typography/components/Old/Button/Button.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var _Typography = /*#__PURE__*/require("../../../../../components/Typography");
+var _engines = /*#__PURE__*/require("../../../../../engines");
+var _Button = /*#__PURE__*/require("./Button.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Typography.buttonTypographyConfig, _Button.config);
+var Button = exports.Button = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/typography/components/Old/Button/Button.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
+import { mergeConfig } from '../../../../../engines';
+import { buttonTypographyConfig } from '../../../../../components/Typography';
+
+import { Button } from './Button';
+import { config } from './Button.config';
+
+const meta: Meta<typeof Button> = {
+    title: 'Data Display/Typography/Old/Button',
+    decorators: [WithTheme],
+    component: Button,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(buttonTypographyConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+    args: {
+        noWrap: false,
+        breakWord: true,
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Button> = {
+    render: (props) => {
+        return (
+            <Button {...props}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt nihil non ut animi
+                distinctio modi quo, provident quod.
+            </Button>
+        );
+    },
+};

package/styled-components/cjs/examples/typography/components/Old/Caption/Caption.config.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _tokens = /*#__PURE__*/require("../../../../../components/Typography/tokens");
+var config = exports.config = {
+  defaults: {
+    size: 'm'
+  },
+  variations: {
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-caption-font-family);", ":var(--plasma-typo-caption-font-size);", ":var(--plasma-typo-caption-font-style);", ":var(--plasma-typo-caption-font-weight);", ":var(--plasma-typo-caption-letter-spacing);", ":var(--plasma-typo-caption-line-height);"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontWeight, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight)
+    }
+  }
+};

package/styled-components/cjs/examples/typography/components/Old/Caption/Caption.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Caption = void 0;
+var _Typography = /*#__PURE__*/require("../../../../../components/Typography");
+var _engines = /*#__PURE__*/require("../../../../../engines");
+var _Caption = /*#__PURE__*/require("./Caption.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Typography.captionConfig, _Caption.config);
+var Caption = exports.Caption = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/typography/components/Old/Caption/Caption.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
+import { mergeConfig } from '../../../../../engines';
+import { captionConfig } from '../../../../../components/Typography';
+
+import { Caption } from './Caption';
+import { config } from './Caption.config';
+
+const meta: Meta<typeof Caption> = {
+    title: 'Data Display/Typography/Old/Caption',
+    decorators: [WithTheme],
+    component: Caption,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(captionConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+    args: {
+        noWrap: false,
+        breakWord: true,
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Caption> = {
+    render: (props) => {
+        return (
+            <Caption {...props}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt nihil non ut animi
+                distinctio modi quo, provident quod.
+            </Caption>
+        );
+    },
+};