@salutejs/plasma-new-hope 0.69.0-canary.1155.8506197081.0 → 0.69.1-canary.1161.8560768609.0

package/styled-components/cjs/examples/plasma_b2c/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',
@@ -71,12 +71,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 (
@@ -103,7 +109,8 @@ const PaginationContent = (agrs) => {
                         Next
                     </Button>
                 }
-                onChangeValue={handleChange}
+                onChangePageValue={handleChangePage}
+                onChangePerPageValue={handleChangePerpage}
             />
         </>
     );
@@ -111,7 +118,7 @@ const PaginationContent = (agrs) => {
 
 export const Content: Story = {
     args: {
-        count: 20,
+        count: 2000,
         value: 1,
         slots: 9,
         type: 'default',

package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx

@@ -33,12 +33,6 @@ const meta: Meta<typeof Popover> = {
             },
             table: { defaultValue: { summary: true } },
         },
-        closeOnBeyondTargetHover: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
         closeOnEsc: {
             control: {
                 type: 'boolean',
@@ -68,7 +62,6 @@ const meta: Meta<typeof Popover> = {
         placement: 'bottom',
         trigger: 'click',
         closeOnOverlayClick: true,
-        closeOnBeyondTargetHover: true,
         closeOnEsc: true,
         isFocusTrapped: true,
         skidding: 0,

package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.config.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Cell = /*#__PURE__*/require("../../../../components/Cell");
+var config = exports.config = {
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], _Cell.cellTokens.cellColor, _Cell.cellTokens.cellLabelColor, _Cell.cellTokens.cellTitleColor, _Cell.cellTokens.cellSubtitleColor, _Cell.cellTokens.cellBackgroundColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":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);", ":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);", ":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);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":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);", ":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);", ":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);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":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);", ":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);", ":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);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":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);", ":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);", ":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);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Cell = void 0;
+Object.defineProperty(exports, "CellTextbox", {
+  enumerable: true,
+  get: function get() {
+    return _Cell.CellTextbox;
+  }
+});
+Object.defineProperty(exports, "CellTextboxLabel", {
+  enumerable: true,
+  get: function get() {
+    return _Cell.CellTextboxLabel;
+  }
+});
+Object.defineProperty(exports, "CellTextboxSubtitle", {
+  enumerable: true,
+  get: function get() {
+    return _Cell.CellTextboxSubtitle;
+  }
+});
+Object.defineProperty(exports, "CellTextboxTitle", {
+  enumerable: true,
+  get: function get() {
+    return _Cell.CellTextboxTitle;
+  }
+});
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Cell = /*#__PURE__*/require("../../../../components/Cell");
+var _Cell2 = /*#__PURE__*/require("./Cell.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Cell.cellConfig, _Cell2.config);
+var Cell = exports.Cell = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/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/cjs/examples/plasma_web/components/Chip/Chip.config.js

@@ -8,13 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Chip = /*#__PURE__*/require("../../../../components/Chip");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     focused: 'true',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.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);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
       primary: /*#__PURE__*/(0, _styledComponents.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);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
       secondary: /*#__PURE__*/(0, _styledComponents.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);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
       positive: /*#__PURE__*/(0, _styledComponents.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);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover)

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

@@ -24,10 +24,10 @@ var config = exports.config = {
       clear: /*#__PURE__*/(0, _styledComponents.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%);"], _Pagination.paginationTokens.paginationCurrentButtonColor, _Pagination.paginationTokens.paginationCurrentButtonBackgroundColor, _Pagination.paginationTokens.paginationCurrentButtonHoverColor, _Pagination.paginationTokens.paginationCurrentButtonHoverBackgroundColor, _Pagination.paginationTokens.paginationCurrentButtonActiveColor, _Pagination.paginationTokens.paginationCurrentButtonActiveBackgroundColor)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-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;"], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.selectWidth, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemWidth, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPaddingTop, _Pagination.paginationTokens.selectItemPaddingRight, _Pagination.paginationTokens.selectItemPaddingBottom, _Pagination.paginationTokens.selectItemPaddingLeft, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetWidth, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetPaddingHasChips, _Pagination.paginationTokens.selectTargetPaddingWithInput, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-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;"], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.selectWidth, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemWidth, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPaddingTop, _Pagination.paginationTokens.selectItemPaddingRight, _Pagination.paginationTokens.selectItemPaddingBottom, _Pagination.paginationTokens.selectItemPaddingLeft, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetWidth, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetPaddingHasChips, _Pagination.paginationTokens.selectTargetPaddingWithInput, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-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;"], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.selectWidth, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemWidth, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPaddingTop, _Pagination.paginationTokens.selectItemPaddingRight, _Pagination.paginationTokens.selectItemPaddingBottom, _Pagination.paginationTokens.selectItemPaddingLeft, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetWidth, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetPaddingHasChips, _Pagination.paginationTokens.selectTargetPaddingWithInput, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-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;"], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.selectWidth, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemWidth, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPaddingTop, _Pagination.paginationTokens.selectItemPaddingRight, _Pagination.paginationTokens.selectItemPaddingBottom, _Pagination.paginationTokens.selectItemPaddingLeft, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetWidth, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetPaddingHasChips, _Pagination.paginationTokens.selectTargetPaddingWithInput, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-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;"], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.selectWidth, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemWidth, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPaddingTop, _Pagination.paginationTokens.selectItemPaddingRight, _Pagination.paginationTokens.selectItemPaddingBottom, _Pagination.paginationTokens.selectItemPaddingLeft, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetWidth, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetPaddingHasChips, _Pagination.paginationTokens.selectTargetPaddingWithInput, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-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;"], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.selectWidth, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemWidth, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPaddingTop, _Pagination.paginationTokens.selectItemPaddingRight, _Pagination.paginationTokens.selectItemPaddingBottom, _Pagination.paginationTokens.selectItemPaddingLeft, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetWidth, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetPaddingHasChips, _Pagination.paginationTokens.selectTargetPaddingWithInput, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-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;"], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.selectWidth, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemWidth, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPaddingTop, _Pagination.paginationTokens.selectItemPaddingRight, _Pagination.paginationTokens.selectItemPaddingBottom, _Pagination.paginationTokens.selectItemPaddingLeft, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetWidth, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetPaddingHasChips, _Pagination.paginationTokens.selectTargetPaddingWithInput, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-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;"], _Pagination.paginationTokens.paginationFontFamily, _Pagination.paginationTokens.paginationFontSize, _Pagination.paginationTokens.paginationFontStyle, _Pagination.paginationTokens.paginationFontWeight, _Pagination.paginationTokens.paginationLetterSpacing, _Pagination.paginationTokens.paginationLineHeight, _Pagination.paginationTokens.buttonHeight, _Pagination.paginationTokens.paginationInputWidth, _Pagination.paginationTokens.buttonRadius, _Pagination.paginationTokens.buttonWidth, _Pagination.paginationTokens.buttonWidthShorter, _Pagination.paginationTokens.paginationIconSize, _Pagination.paginationTokens.paginationIconDoubleSize, _Pagination.paginationTokens.selectWidth, _Pagination.paginationTokens.selectHeight, _Pagination.paginationTokens.selectPaddingTop, _Pagination.paginationTokens.selectPaddingRight, _Pagination.paginationTokens.selectPaddingBottom, _Pagination.paginationTokens.selectPaddingLeft, _Pagination.paginationTokens.selectItemWidth, _Pagination.paginationTokens.selectItemHeight, _Pagination.paginationTokens.selectItemPaddingTop, _Pagination.paginationTokens.selectItemPaddingRight, _Pagination.paginationTokens.selectItemPaddingBottom, _Pagination.paginationTokens.selectItemPaddingLeft, _Pagination.paginationTokens.selectItemContentLeftWidth, _Pagination.paginationTokens.selectItemBackground, _Pagination.paginationTokens.selectTargetArrowRight, _Pagination.paginationTokens.selectTargetWidth, _Pagination.paginationTokens.selectTargetPadding, _Pagination.paginationTokens.selectTargetPaddingHasChips, _Pagination.paginationTokens.selectTargetPaddingWithInput, _Pagination.paginationTokens.selectTargetInnerTop, _Pagination.paginationTokens.selectTargetLabelInnerTop, _Pagination.paginationTokens.inputBorderRadius, _Pagination.paginationTokens.inputWidth, _Pagination.paginationTokens.inputHeight, _Pagination.paginationTokens.inputPadding, _Pagination.paginationTokens.inputBorderWidth)
     },
     type: {
       compact: /*#__PURE__*/(0, _styledComponents.css)([""]),

package/styled-components/cjs/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/cjs/index.js

@@ -36,6 +36,17 @@ Object.keys(_hooks).forEach(function (key) {
     }
   });
 });
+var _utils = /*#__PURE__*/require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils[key];
+    }
+  });
+});
 var _Button = /*#__PURE__*/require("./components/Button");
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -69,6 +80,17 @@ Object.keys(_Chip).forEach(function (key) {
     }
   });
 });
+var _Cell = /*#__PURE__*/require("./components/Cell");
+Object.keys(_Cell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Cell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Cell[key];
+    }
+  });
+});
 var _Link = /*#__PURE__*/require("./components/Link");
 Object.keys(_Link).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -443,6 +465,17 @@ Object.keys(_Progress).forEach(function (key) {
     }
   });
 });
+var _Select = /*#__PURE__*/require("./components/Select");
+Object.keys(_Select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Select[key];
+    }
+  });
+});
 var _Divider = /*#__PURE__*/require("./components/Divider");
 Object.keys(_Divider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,62 @@
+import React, { forwardRef } from 'react';
+import { cx } from '../../utils';
+import { base, CellLeft, CellRight, CellContentWrapper, CellContent } from './Cell.styles';
+import { classes } from './Cell.tokens';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { CellTextbox } from './ui/CellTextbox/CellTextbox';
+export var cellRoot = function cellRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
+    var size = _ref.size,
+      view = _ref.view,
+      contentLeft = _ref.contentLeft,
+      contentRight = _ref.contentRight,
+      _ref$alignContentLeft = _ref.alignContentLeft,
+      alignContentLeft = _ref$alignContentLeft === void 0 ? 'center' : _ref$alignContentLeft,
+      _ref$alignContentRigh = _ref.alignContentRight,
+      alignContentRight = _ref$alignContentRigh === void 0 ? 'center' : _ref$alignContentRigh,
+      children = _ref.children,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      label = _ref.label,
+      description = _ref.description,
+      content = _ref.content,
+      _ref$stretching = _ref.stretching,
+      stretching = _ref$stretching === void 0 ? 'filled' : _ref$stretching;
+    var stretchingClass = classes["".concat(stretching, "Stretching")];
+    var titleText = title || description;
+    var contentLeftDeprecated = contentLeft || content;
+    return /*#__PURE__*/React.createElement(Root, {
+      ref: outerRootRef,
+      size: size,
+      view: view,
+      className: cx(stretchingClass, classes.cellRoot)
+    }, contentLeftDeprecated && /*#__PURE__*/React.createElement(CellLeft, {
+      align: alignContentLeft
+    }, contentLeftDeprecated), /*#__PURE__*/React.createElement(CellContentWrapper, null, /*#__PURE__*/React.createElement(CellContent, null, titleText || subtitle || label ? /*#__PURE__*/React.createElement(CellTextbox, {
+      label: label,
+      title: titleText,
+      subtitle: subtitle
+    }) : children), contentRight && /*#__PURE__*/React.createElement(CellRight, {
+      align: alignContentRight
+    }, contentRight)));
+  });
+};
+export var cellConfig = {
+  name: 'Cell',
+  tag: 'div',
+  layout: cellRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

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

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+import { tokens, classes } from './Cell.tokens';
+var alignToFlex = {
+  center: 'center',
+  top: 'flex-start',
+  bottom: 'flex-end'
+};
+export var base = /*#__PURE__*/css(["&&.", "{width:var(", ");}&&.", "{width:100%;}&&.", "{width:auto;}"], classes.fixedStretching, tokens.cellWidth, classes.filledStretching, classes.autoStretching);
+export var CellContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-16emz3n-0"
+})(["display:flex;flex:auto;align-items:stretch;justify-content:space-between;gap:var(", ");height:auto;"], tokens.cellGap);
+export var CellContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-16emz3n-1"
+})(["display:flex;align-items:center;height:auto;"]);
+export var CellLeft = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-16emz3n-2"
+})(["display:flex;align-items:", ";"], function (_ref) {
+  var align = _ref.align;
+  return alignToFlex[align];
+});
+export var CellRight = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-16emz3n-3"
+})(["display:flex;align-items:", ";text-align:right;"], function (_ref2) {
+  var align = _ref2.align;
+  return alignToFlex[align];
+});

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

@@ -0,0 +1,42 @@
+export var tokens = {
+  cellColor: '--plasma-cell-color',
+  cellBackgroundColor: '--plasma-cell-background-color',
+  cellPadding: '--plasma-cell-padding',
+  cellPaddingLeftContent: '--plasma-cell-padding-left-content',
+  cellPaddingContent: '--plasma-cell-padding-content',
+  cellPaddingRightContent: '--plasma-cell-padding-right-content',
+  cellTextboxGap: '--plasma-cell-textbox-gap',
+  cellGap: '--plasma-cell-gap',
+  cellWidth: '--plasma-cell-width',
+  cellLabelColor: '--plasma-cell-label-color',
+  cellLabelFontFamily: '--plasma-cell-label-font-family',
+  cellLabelFontSize: '--plasma-cell-label-font-size',
+  cellLabelFontStyle: '--plasma-cell-label-font-style',
+  cellLabelFontWeight: '--plasma-cell-label-font-weight',
+  cellLabelLetterSpacing: '--plasma-cell-label-letter-spacing',
+  cellLabelLineHeight: '--plasma-cell-label-line-height',
+  cellTitleColor: '--plasma-cell-title-color',
+  cellTitleFontFamily: '--plasma-cell-title-font-family',
+  cellTitleFontSize: '--plasma-cell-title-font-size',
+  cellTitleFontStyle: '--plasma-cell-title-font-style',
+  cellTitleFontWeight: '--plasma-cell-title-font-weight',
+  cellTitleLetterSpacing: '--plasma-cell-title-letter-spacing',
+  cellTitleLineHeight: '--plasma-cell-title-line-height',
+  cellSubtitleColor: '--plasma-cell-subtitle-color',
+  cellSubtitleFontFamily: '--plasma-cell-subtitle-font-family',
+  cellSubtitleFontSize: '--plasma-cell-subtitle-font-size',
+  cellSubtitleFontStyle: '--plasma-cell-subtitle-font-style',
+  cellSubtitleFontWeight: '--plasma-cell-subtitle-font-weight',
+  cellSubtitleLetterSpacing: '--plasma-cell-subtitle-letter-spacing',
+  cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height'
+};
+export var classes = {
+  autoStretching: 'cell-stretching-auto',
+  filledStretching: 'cell-stretching-filled',
+  fixedStretching: 'cell-stretching-fixed',
+  cellWrapper: 'cell-wrapper',
+  cellRoot: 'cell-root',
+  cellContent: 'cell-content',
+  cellLeftContent: 'cell-left-content',
+  cellRightContent: 'cell-right-content'
+};

package/styled-components/es/components/Cell/Cell.types.js

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/Cell/index.js

@@ -0,0 +1,6 @@
+export { CellTextboxLabel } from './ui/CellTextboxLabel/CellTextboxLabel';
+export { CellTextboxTitle } from './ui/CellTextboxTitle/CellTextboxTitle';
+export { CellTextboxSubtitle } from './ui/CellTextboxSubtitle/CellTextboxSubtitle';
+export { cellRoot, cellConfig } from './Cell';
+export { tokens as cellTokens, classes as cellClasses } from './Cell.tokens';
+export { CellTextbox } from './ui/CellTextbox/CellTextbox';

package/styled-components/es/components/Cell/ui/CellTextbox/CellTextbox.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CellTextboxLabel } from '../CellTextboxLabel/CellTextboxLabel';
+import { CellTextboxTitle } from '../CellTextboxTitle/CellTextboxTitle';
+import { CellTextboxSubtitle } from '../CellTextboxSubtitle/CellTextboxSubtitle';
+import { CellTextboxStyled } from './CellTextbox.styles';
+export var CellTextbox = function CellTextbox(_ref) {
+  var label = _ref.label,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(CellTextboxStyled, null, label || title || subtitle ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(CellTextboxLabel, null, label), title && /*#__PURE__*/React.createElement(CellTextboxTitle, null, title), subtitle && /*#__PURE__*/React.createElement(CellTextboxSubtitle, null, subtitle)) : children);
+};

package/styled-components/es/components/Cell/ui/CellTextbox/CellTextbox.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+import { tokens } from '../../Cell.tokens';
+export var CellTextboxStyled = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-w4g41u-0"
+})(["display:flex;flex-direction:column;gap:var(", ");"], tokens.cellTextboxGap);

package/styled-components/es/components/Cell/ui/CellTextbox/CellTextbox.types.js

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StyledTextboxLabel } from './CellTextboxLabel.styles';
+export var CellTextboxLabel = function CellTextboxLabel(props) {
+  return /*#__PURE__*/React.createElement(StyledTextboxLabel, null, props.children);
+};