@salutejs/plasma-new-hope 0.69.0-canary.1155.8506197081.0 → 0.70.0-canary.1160.8541256541.0

package/styled-components/es/examples/plasma_web/components/Cell/Cell.stories.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import styled from 'styled-components';
+
+import { WithTheme } from '../../../_helpers';
+import { Avatar } from '../Avatar/Avatar';
+import { IconChevronLeft } from '../../../../components/_Icon';
+
+import { Cell, CellTextbox, CellTextboxTitle } from './Cell';
+
+type StoryProps = ComponentProps<typeof Cell> & {
+    itemsCount?: number;
+    disableLeftContent?: boolean;
+    disableRightContent?: boolean;
+};
+type Story = StoryObj<StoryProps>;
+
+const sizes = ['l', 'm', 's', 'xs'];
+const stretchingValues = ['fixed', 'filled', 'auto'];
+const alignLeft = ['top', 'center', 'bottom'];
+const alignRight = ['top', 'center', 'bottom'];
+
+type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined;
+type SizesAvatar = 'l' | 'm' | 's';
+
+const getSize = (size: SizesCell): SizesAvatar => {
+    if (size === 'xs' || !size) {
+        return 's';
+    }
+
+    return size;
+};
+
+const meta: Meta<typeof Cell> = {
+    title: 'plasma_web/Cell',
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        stretching: {
+            options: stretchingValues,
+            control: {
+                type: 'select',
+            },
+        },
+        alignContentLeft: {
+            options: alignLeft,
+            control: {
+                type: 'select',
+            },
+        },
+        alignContentRight: {
+            options: alignRight,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const ChevronRight = styled(IconChevronLeft)`
+    transform: rotate(180deg);
+    color: var(--text-secondary);
+`;
+
+export const Default: Story = {
+    args: {
+        size: 'm',
+        stretching: 'filled',
+        disableLeftContent: false,
+        disableRightContent: false,
+        alignContentLeft: 'center',
+        alignContentRight: 'center',
+        title: 'Title',
+        subtitle: 'Subtitle',
+        label: 'Label',
+    },
+    render: ({ ...args }: StoryProps) => {
+        return (
+            <Cell
+                contentLeft={
+                    !args.disableLeftContent && (
+                        <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    )
+                }
+                contentRight={!args.disableRightContent && <ChevronRight color="inherit" size="xs" />}
+                {...args}
+            />
+        );
+    },
+};
+
+export const WithContentTextboxCustom: Story = {
+    args: {
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        const MyStyledText = styled.div`
+            font-size: 12px;
+            font-weight: 600;
+            opacity: 0.5;
+        `;
+        return (
+            <Cell
+                view="default"
+                size={args.size}
+                stretching={args.stretching}
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inherit" size="xs" />}
+            >
+                <CellTextbox>
+                    <CellTextboxTitle>Title</CellTextboxTitle>
+                    <MyStyledText>My styled Text</MyStyledText>
+                </CellTextbox>
+            </Cell>
+        );
+    },
+};

package/styled-components/es/examples/plasma_web/components/Chip/Chip.config.js

@@ -2,13 +2,12 @@ import { css } from 'styled-components';
 import { chipTokens } from '../../../../components/Chip';
 export var config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     focused: 'true',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
       primary: /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
       secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
       positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)

package/styled-components/es/examples/plasma_web/components/Pagination/Pagination.config.js

@@ -18,10 +18,10 @@ export var config = {
       clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 95%);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 90%);"], paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor)
     },
     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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":3rem;", ":2.25rem;", ":0.875rem;", ":1.2rem;", ":1.45rem;", ":6.375rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":6.375rem;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":1.875rem;", ":transparent;", ":1rem;", ":6.375rem;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.875rem;", ":4rem;", ":3.5rem;", ":0 0.625rem;", ":0.125rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
-      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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":3rem;", ":2rem;", ":0.75rem;", ":1.05rem;", ":1.3rem;", ":5.875rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":5.875rem;", ":1.5rem;", ":0.75rem;", ":0.75rem;", ":0.75rem;", ":0.75rem;", ":1.75rem;", ":transparent;", ":0.875rem;", ":5.875rem;", ":0 3.25rem 0 1.25rem;", ":0 3.375rem 0 0.375rem;", ":0 3.375rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":0 0.625rem;", ":0.125rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
-      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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":2.5rem;", ":1.75rem;", ":3rem;", ":0.625rem;", ":0.9rem;", ":1.15rem;", ":5.375rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":5.375rem;", ":1.5rem;", ":0.5rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":1.75rem;", ":transparent;", ":0.75rem;", ":5.375rem;", ":0 3rem 0 1rem;", ":0 3.125rem 0 0.375rem;", ":0 3.125rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.625rem;", ":3rem;", ":2.5rem;", ":0 0.625rem;", ":0.125rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
-      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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":2rem;", ":2.5rem;", ":0.5rem;", ":2rem;", ":1.5rem;", ":0.75rem;", ":1rem;", ":4.625rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":4.625rem;", ":1rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":1.25rem;", ":transparent;", ":0.5rem;", ":4.625rem;", ":0 2.5rem 0 0.75rem;", ":0 2.625rem 0 0.375rem;", ":0 2.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":2.5rem;", ":2rem;", ":0 0.625rem;", ":0.125rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth)
+      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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":3rem;", ":2.25rem;", ":0.875rem;", ":1.2rem;", ":1.45rem;", ":6.375rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":6.375rem;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":1.875rem;", ":transparent;", ":1rem;", ":6.375rem;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.875rem;", ":4rem;", ":3.5rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+      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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":3rem;", ":2rem;", ":0.75rem;", ":1.05rem;", ":1.3rem;", ":5.875rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":5.875rem;", ":1.5rem;", ":0.75rem;", ":0.75rem;", ":0.75rem;", ":0.75rem;", ":1.75rem;", ":transparent;", ":0.875rem;", ":5.875rem;", ":0 3.25rem 0 1.25rem;", ":0 3.375rem 0 0.375rem;", ":0 3.375rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+      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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":2.5rem;", ":1.75rem;", ":3rem;", ":0.625rem;", ":0.9rem;", ":1.15rem;", ":5.375rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":5.375rem;", ":1.5rem;", ":0.5rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":1.75rem;", ":transparent;", ":0.75rem;", ":5.375rem;", ":0 3rem 0 1rem;", ":0 3.125rem 0 0.375rem;", ":0 3.125rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.625rem;", ":3rem;", ":2.5rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+      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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":2rem;", ":2.5rem;", ":0.5rem;", ":2rem;", ":1.5rem;", ":0.75rem;", ":1rem;", ":4.625rem;", ":auto;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":4.625rem;", ":1rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":1.25rem;", ":transparent;", ":0.5rem;", ":4.625rem;", ":0 2.5rem 0 0.75rem;", ":0 2.625rem 0 0.375rem;", ":0 2.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":2.5rem;", ":2rem;", ":0 0.625rem;", ":0.0625rem;"], paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth)
     },
     type: {
       compact: /*#__PURE__*/css([""]),

package/styled-components/es/examples/plasma_web/components/Pagination/Pagination.stories.tsx

@@ -53,7 +53,7 @@ type Story = StoryObj<typeof Pagination>;
 
 export const Default: Story = {
     args: {
-        count: 20,
+        count: 2000,
         value: 1,
         slots: 9,
         type: 'default',
@@ -72,12 +72,18 @@ const PaginationContent = (agrs) => {
     const [pageValue, setPageValue] = useState(agrs.value);
     const [perPageValue, setPerPageValue] = useState(agrs.perPage);
 
-    const handleChange = useCallback(
-        (page: number, perPage: number) => {
-            setPerPageValue(perPage);
+    const handleChangePage = useCallback(
+        (page: number) => {
             setPageValue(page);
         },
-        [pageValue, perPageValue, setPageValue, setPerPageValue],
+        [pageValue, setPageValue],
+    );
+
+    const handleChangePerpage = useCallback(
+        (perPage: number) => {
+            setPerPageValue(perPage);
+        },
+        [perPageValue, setPerPageValue],
     );
 
     return (
@@ -104,7 +110,8 @@ const PaginationContent = (agrs) => {
                         Next
                     </Button>
                 }
-                onChangeValue={handleChange}
+                onChangePageValue={handleChangePage}
+                onChangePerPageValue={handleChangePerpage}
             />
         </>
     );
@@ -112,7 +119,7 @@ const PaginationContent = (agrs) => {
 
 export const Content: Story = {
     args: {
-        count: 20,
+        count: 2000,
         value: 1,
         slots: 9,
         type: 'default',

package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js

@@ -0,0 +1,34 @@
+import { css } from 'styled-components';
+import { textFieldTokens as tokens, textField_labelPlacement_inner as labelPlacement_inner, textField_labelPlacement_outer as labelPlacement_outer } from '../../../../components/TextField';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l',
+    labelPlacement: 'outer'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-tertiary);", ":var(--plasma-colors-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem 0 -0.0625rem 0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 0.875rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem 0 -0.125rem 0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":0.875rem 0.75rem 0.875rem 0.6875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem 0 -0.1875rem 0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.5rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem 0 -0.0625rem 0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight)
+    },
+    labelPlacement: {
+      inner: [labelPlacement_inner, /*#__PURE__*/css(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);}"], labelPlacement_inner, tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight)],
+      outer: [labelPlacement_outer, /*#__PURE__*/css(["&.", "{}"], labelPlacement_outer)]
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
+    },
+    // TODO заменить --surface-transparent-primary на корректный токен
+    readOnly: {
+      "true": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.borderColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColorReadOnly)
+    }
+  }
+};

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

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

package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx

@@ -0,0 +1,123 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { TextField } from './TextField';
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+const onSearch = action('onSearch');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default', 'positive', 'warning', 'negative'];
+const enumerationTypes = ['plain', 'chip'];
+
+const meta: Meta<typeof TextField> = {
+    title: 'plasma_web/TextField',
+    component: TextField,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        maxLength: {
+            control: {
+                type: 'number',
+            },
+        },
+        enumerationType: {
+            options: enumerationTypes,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = Omit<
+    ComponentProps<typeof TextField>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'value'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'required'
+> & {
+    'storybook:contentLeft': boolean;
+    'storybook:contentRight': boolean;
+};
+
+const StoryDefault = ({
+    'storybook:contentLeft': enableContentLeft,
+    'storybook:contentRight': enableContentRight,
+    view,
+    ...rest
+}: StoryPropsDefault) => {
+    const [text, setText] = useState('Значение поля');
+
+    return (
+        <TextField
+            {...rest}
+            value={text}
+            contentLeft={enableContentLeft ? <IconPlaceholder /> : undefined}
+            contentRight={enableContentRight ? <IconPlaceholder /> : undefined}
+            view={view}
+            onChange={(_, value) => {
+                setText(value);
+                onChange(value);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onSearch={onSearch}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    argTypes: {
+        labelPlacement: {
+            options: ['outer', 'inner'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        id: 'example-text-field',
+        size: 'l',
+        view: 'default',
+        label: 'Лейбл',
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        leftHelper: 'Подсказка к полю',
+        enumerationType: 'plain',
+        disabled: false,
+        readOnly: false,
+        'storybook:contentLeft': true,
+        'storybook:contentRight': true,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

package/styled-components/es/examples/sds_engineer/components/TextField/TextField.config.js

@@ -0,0 +1,37 @@
+import { css } from 'styled-components';
+import { textFieldTokens as tokens, textField_labelPlacement_inner as labelPlacement_inner, textField_labelPlacement_outer as labelPlacement_outer } from '../../../../components/TextField';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l',
+    labelPlacement: 'outer'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      // TODO заменить --surface-transparent-positive на корректный токен
+      positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      // // TODO заменить --surface-transparent-warning на корректный токен
+      warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      // // TODO заменить --surface-transparent-negative на корректный токен
+      negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem 0 -0.0625rem 0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 0.875rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem 0 -0.125rem 0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":0.875rem 0.75rem 0.875rem 0.6875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem 0 -0.1875rem 0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.5rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem 0 -0.0625rem 0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight)
+    },
+    labelPlacement: {
+      inner: [labelPlacement_inner, /*#__PURE__*/css(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":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-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);}"], labelPlacement_inner, tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight)],
+      outer: [labelPlacement_outer, /*#__PURE__*/css(["&.", "{}"], labelPlacement_outer)]
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
+    },
+    // TODO заменить --surface-transparent-primary на корректный токен
+    readOnly: {
+      "true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColorReadOnly)
+    }
+  }
+};

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

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