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

package/styled-components/es/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/es/examples/typography/components/Heading/Heading.config.js

@@ -6,11 +6,11 @@ export var config = {
   },
   variations: {
     size: {
-      h1: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
-      h2: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
-      h3: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
-      h4: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
-      h5: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontWeightMedium, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+      h1: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      h2: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      h3: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      h4: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      h5: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontWeightBold, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
     }
   }
 };

package/styled-components/es/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/es/examples/typography/components/Old/Body/Body.config.js

@@ -0,0 +1,14 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../components/Typography/tokens';
+export var config = {
+  defaults: {
+    size: 'body1'
+  },
+  variations: {
+    size: {
+      body1: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      body2: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      body3: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+import { oldBodyConfig } from '../../../../../components/Typography';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Body.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(oldBodyConfig, config);
+export var OldBody = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/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/es/examples/typography/components/Old/Button/Button.config.js

@@ -0,0 +1,13 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../components/Typography/tokens';
+export var config = {
+  defaults: {
+    size: 'button1'
+  },
+  variations: {
+    size: {
+      button1: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      button2: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+import { buttonTypographyConfig } from '../../../../../components/Typography';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Button.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(buttonTypographyConfig, config);
+export var Button = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/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/es/examples/typography/components/Old/Caption/Caption.config.js

@@ -0,0 +1,12 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../components/Typography/tokens';
+export var config = {
+  defaults: {
+    size: 'm'
+  },
+  variations: {
+    size: {
+      m: /*#__PURE__*/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.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+import { captionConfig } from '../../../../../components/Typography';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Caption.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(captionConfig, config);
+export var Caption = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/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>
+        );
+    },
+};

package/styled-components/es/examples/typography/components/Old/Display/Display.config.js

@@ -0,0 +1,14 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../components/Typography/tokens';
+export var config = {
+  defaults: {
+    size: 'display1'
+  },
+  variations: {
+    size: {
+      display1: /*#__PURE__*/css(["", ":var(--plasma-typo-display1-font-family);", ":var(--plasma-typo-display1-font-size);", ":var(--plasma-typo-display1-font-style);", ":var(--plasma-typo-display1-font-weight);", ":var(--plasma-typo-display1-letter-spacing);", ":var(--plasma-typo-display1-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      display2: /*#__PURE__*/css(["", ":var(--plasma-typo-display2-font-family);", ":var(--plasma-typo-display2-font-size);", ":var(--plasma-typo-display2-font-style);", ":var(--plasma-typo-display2-font-weight);", ":var(--plasma-typo-display2-letter-spacing);", ":var(--plasma-typo-display2-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      display3: /*#__PURE__*/css(["", ":var(--plasma-typo-display3-font-family);", ":var(--plasma-typo-display3-font-size);", ":var(--plasma-typo-display3-font-style);", ":var(--plasma-typo-display3-font-weight);", ":var(--plasma-typo-display3-letter-spacing);", ":var(--plasma-typo-display3-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+    }
+  }
+};

package/styled-components/es/examples/typography/components/Old/Display/Display.js

@@ -0,0 +1,5 @@
+import { displayConfig } from '../../../../../components/Typography';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Display.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(displayConfig, config);
+export var Display = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/typography/components/Old/Display/Display.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 { displayConfig } from '../../../../../components/Typography';
+
+import { Display } from './Display';
+import { config } from './Display.config';
+
+const meta: Meta<typeof Display> = {
+    title: 'Data Display/Typography/Old/Display',
+    decorators: [WithTheme],
+    component: Display,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(displayConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+    args: {
+        noWrap: false,
+        breakWord: true,
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Display> = {
+    render: (props) => {
+        return (
+            <Display {...props}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt nihil non ut animi
+                distinctio modi quo, provident quod.
+            </Display>
+        );
+    },
+};

package/styled-components/es/examples/typography/components/Old/Footnote/Footnote.config.js

@@ -0,0 +1,13 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../components/Typography/tokens';
+export var config = {
+  defaults: {
+    size: 'footnote1'
+  },
+  variations: {
+    size: {
+      footnote1: /*#__PURE__*/css(["", ":var(--plasma-typo-footnote1-font-family);", ":var(--plasma-typo-footnote1-font-size);", ":var(--plasma-typo-footnote1-font-style);", ":var(--plasma-typo-footnote1-font-weight);", ":var(--plasma-typo-footnote1-letter-spacing);", ":var(--plasma-typo-footnote1-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      footnote2: /*#__PURE__*/css(["", ":var(--plasma-typo-footnote2-font-family);", ":var(--plasma-typo-footnote2-font-size);", ":var(--plasma-typo-footnote2-font-style);", ":var(--plasma-typo-footnote2-font-weight);", ":var(--plasma-typo-footnote2-letter-spacing);", ":var(--plasma-typo-footnote2-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+    }
+  }
+};

package/styled-components/es/examples/typography/components/Old/Footnote/Footnote.js

@@ -0,0 +1,5 @@
+import { footnoteConfig } from '../../../../../components/Typography';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Footnote.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(footnoteConfig, config);
+export var Footnote = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/typography/components/Old/Footnote/Footnote.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 { footnoteConfig } from '../../../../../components/Typography';
+
+import { Footnote } from './Footnote';
+import { config } from './Footnote.config';
+
+const meta: Meta<typeof Footnote> = {
+    title: 'Data Display/Typography/Old/Footnote',
+    decorators: [WithTheme],
+    component: Footnote,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(footnoteConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+    args: {
+        noWrap: false,
+        breakWord: true,
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Footnote> = {
+    render: (props) => {
+        return (
+            <Footnote {...props}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt nihil non ut animi
+                distinctio modi quo, provident quod.
+            </Footnote>
+        );
+    },
+};

package/styled-components/es/examples/typography/components/Old/Headline/Headline.config.js

@@ -0,0 +1,15 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../components/Typography/tokens';
+export var config = {
+  defaults: {
+    size: 'headline1'
+  },
+  variations: {
+    size: {
+      headline1: /*#__PURE__*/css(["", ":var(--plasma-typo-headline1-font-family);", ":var(--plasma-typo-headline1-font-size);", ":var(--plasma-typo-headline1-font-style);", ":var(--plasma-typo-headline1-font-weight);", ":var(--plasma-typo-headline1-letter-spacing);", ":var(--plasma-typo-headline1-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      headline2: /*#__PURE__*/css(["", ":var(--plasma-typo-headline2-font-family);", ":var(--plasma-typo-headline2-font-size);", ":var(--plasma-typo-headline2-font-style);", ":var(--plasma-typo-headline2-font-weight);", ":var(--plasma-typo-headline2-letter-spacing);", ":var(--plasma-typo-headline2-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      headline3: /*#__PURE__*/css(["", ":var(--plasma-typo-headline3-font-family);", ":var(--plasma-typo-headline3-font-size);", ":var(--plasma-typo-headline3-font-style);", ":var(--plasma-typo-headline3-font-weight);", ":var(--plasma-typo-headline3-letter-spacing);", ":var(--plasma-typo-headline3-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      headline4: /*#__PURE__*/css(["", ":var(--plasma-typo-headline4-font-family);", ":var(--plasma-typo-headline4-font-size);", ":var(--plasma-typo-headline4-font-style);", ":var(--plasma-typo-headline4-font-weight);", ":var(--plasma-typo-headline4-letter-spacing);", ":var(--plasma-typo-headline4-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+    }
+  }
+};

package/styled-components/es/examples/typography/components/Old/Headline/Headline.js

@@ -0,0 +1,5 @@
+import { headlineConfig } from '../../../../../components/Typography';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Headline.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(headlineConfig, config);
+export var Headline = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/typography/components/Old/Headline/Headline.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 { headlineConfig } from '../../../../../components/Typography';
+
+import { Headline } from './Headline';
+import { config } from './Headline.config';
+
+const meta: Meta<typeof Headline> = {
+    title: 'Data Display/Typography/Old/Headline',
+    decorators: [WithTheme],
+    component: Headline,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(headlineConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+    args: {
+        noWrap: false,
+        breakWord: true,
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Headline> = {
+    render: (props) => {
+        return (
+            <Headline {...props}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt nihil non ut animi
+                distinctio modi quo, provident quod.
+            </Headline>
+        );
+    },
+};

package/styled-components/es/examples/typography/components/Old/Paragraph/Paragraph.config.js

@@ -0,0 +1,13 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../components/Typography/tokens';
+export var config = {
+  defaults: {
+    size: 'paragraph1'
+  },
+  variations: {
+    size: {
+      paragraph1: /*#__PURE__*/css(["", ":var(--plasma-typo-paragraph1-font-family);", ":var(--plasma-typo-paragraph1-font-size);", ":var(--plasma-typo-paragraph1-font-style);", ":var(--plasma-typo-paragraph1-font-weight);", ":var(--plasma-typo-paragraph1-letter-spacing);", ":var(--plasma-typo-paragraph1-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight),
+      paragraph2: /*#__PURE__*/css(["", ":var(--plasma-typo-paragraph2-font-family);", ":var(--plasma-typo-paragraph2-font-size);", ":var(--plasma-typo-paragraph2-font-style);", ":var(--plasma-typo-paragraph2-font-weight);", ":var(--plasma-typo-paragraph2-letter-spacing);", ":var(--plasma-typo-paragraph2-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+    }
+  }
+};

package/styled-components/es/examples/typography/components/Old/Paragraph/Paragraph.js

@@ -0,0 +1,5 @@
+import { paragraphConfig } from '../../../../../components/Typography';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Paragraph.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(paragraphConfig, config);
+export var Paragraph = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/typography/components/Old/Paragraph/Paragraph.stories.tsx

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

package/styled-components/es/examples/typography/components/Old/Subtitle/Subtitle.config.js

@@ -0,0 +1,12 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../components/Typography/tokens';
+export var config = {
+  defaults: {
+    size: 'm'
+  },
+  variations: {
+    size: {
+      m: /*#__PURE__*/css(["", ":var(--plasma-typo-subtitle-font-family);", ":var(--plasma-typo-subtitle-font-size);", ":var(--plasma-typo-subtitle-font-style);", ":var(--plasma-typo-subtitle-font-weight);", ":var(--plasma-typo-subtitle-letter-spacing);", ":var(--plasma-typo-subtitle-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+    }
+  }
+};

package/styled-components/es/examples/typography/components/Old/Subtitle/Subtitle.js

@@ -0,0 +1,5 @@
+import { subtitleConfig } from '../../../../../components/Typography';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Subtitle.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(subtitleConfig, config);
+export var Subtitle = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/typography/components/Old/Subtitle/Subtitle.stories.tsx

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

package/styled-components/es/examples/typography/components/Old/Underline/Underline.config.js

@@ -0,0 +1,12 @@
+import { css } from 'styled-components';
+import { tokens } from '../../../../../components/Typography/tokens';
+export var config = {
+  defaults: {
+    size: 'm'
+  },
+  variations: {
+    size: {
+      m: /*#__PURE__*/css(["", ":var(--plasma-typo-underline-font-family);", ":var(--plasma-typo-underline-font-size);", ":var(--plasma-typo-underline-font-style);", ":var(--plasma-typo-underline-font-weight);", ":var(--plasma-typo-underline-letter-spacing);", ":var(--plasma-typo-underline-line-height);"], tokens.typoFontFamily, tokens.typoFontSize, tokens.typoFontStyle, tokens.typoFontWeight, tokens.typoFontLetterSpacing, tokens.typoFontLineHeight)
+    }
+  }
+};

package/styled-components/es/examples/typography/components/Old/Underline/Underline.js

@@ -0,0 +1,5 @@
+import { underlineConfig } from '../../../../../components/Typography';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Underline.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(underlineConfig, config);
+export var Underline = /*#__PURE__*/component(mergedConfig);