@salutejs/plasma-new-hope 0.66.0-dev.0 → 0.67.0-canary.1148.8443817650.0

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

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

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

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

package/styled-components/es/components/Cell/Textbox/ui/TextLabel.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { tokens } from '../../Cell.tokens';
+var StyledTextLabel = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-6e2num-0"
+})(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], tokens.cellLabelColor, tokens.cellLabelFontSize, tokens.cellLabelFontWeight, tokens.cellLabelFontFamily, tokens.cellLabelFontStyle, tokens.cellLabelLineHeight, tokens.cellLabelLetterSpacing);
+export var TextLabel = function TextLabel(props) {
+  return /*#__PURE__*/React.createElement(StyledTextLabel, null, props.children);
+};

package/styled-components/es/components/Cell/Textbox/ui/TextSubtitle.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { tokens } from '../../Cell.tokens';
+var StyledTextSubtitle = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-jj01ut-0"
+})(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], tokens.cellSubtitleColor, tokens.cellSubtitleFontSize, tokens.cellSubtitleFontWeight, tokens.cellSubtitleFontFamily, tokens.cellSubtitleFontStyle, tokens.cellSubtitleLineHeight, tokens.cellSubtitleLetterSpacing);
+export var TextSubtitle = function TextSubtitle(props) {
+  return /*#__PURE__*/React.createElement(StyledTextSubtitle, null, props.children);
+};

package/styled-components/es/components/Cell/Textbox/ui/TextTitle.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { tokens } from '../../Cell.tokens';
+var StyledTextTitle = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1mxjeba-0"
+})(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], tokens.cellTitleColor, tokens.cellTitleFontSize, tokens.cellTitleFontWeight, tokens.cellTitleFontFamily, tokens.cellTitleFontStyle, tokens.cellTitleLineHeight, tokens.cellTitleLetterSpacing);
+export var TextTitle = function TextTitle(props) {
+  return /*#__PURE__*/React.createElement(StyledTextTitle, null, props.children);
+};

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

@@ -0,0 +1,6 @@
+export { TextLabel } from './Textbox/ui/TextLabel';
+export { TextTitle } from './Textbox/ui/TextTitle';
+export { TextSubtitle } from './Textbox/ui/TextSubtitle';
+export { cellRoot, cellConfig } from './Cell';
+export { tokens as cellTokens, classes as cellClasses } from './Cell.tokens';
+export { Textbox } from './Textbox/Textbox';

package/styled-components/es/components/Cell/variations/_size/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Cell/variations/_size/tokens.json

@@ -0,0 +1 @@
+["--plasma-cell-left-height", "--plasma-cell-right-height", "--plasma-cell-height"]

package/styled-components/es/components/Cell/variations/_stretching/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../Cell.tokens';
+export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], classes.fixedStretching, tokens.cellWidth, classes.filledStretching, classes.autoStretching);

package/styled-components/es/components/Cell/variations/_stretching/tokens.json

@@ -0,0 +1 @@
+["--plasma-button-width"]

package/styled-components/es/components/Cell/variations/_view/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { tokens } from '../../Cell.tokens';
+export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");"], tokens.cellColor, tokens.cellBackgroundColor);

package/styled-components/es/components/Cell/variations/_view/tokens.json

@@ -0,0 +1 @@
+["--plasma-cell-color", "--plasma-cell-background-color"]

package/styled-components/es/examples/plasma_b2c/components/Cell/Cell.config.js

@@ -0,0 +1,25 @@
+import { css } from 'styled-components';
+import { cellTokens } from '../../../../components/Cell';
+export var config = {
+  defaults: {
+    view: 'primary',
+    size: 'm',
+    stretching: 'filled'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], cellTokens.cellColor, cellTokens.cellLabelColor, cellTokens.cellTitleColor, cellTokens.cellSubtitleColor, cellTokens.cellBackgroundColor)
+    },
+    size: {
+      l: /*#__PURE__*/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-regular-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-regular-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-regular-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      m: /*#__PURE__*/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-regular-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-regular-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-regular-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      s: /*#__PURE__*/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-regular-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-regular-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-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      xs: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":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-regular-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-regular-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-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight)
+    },
+    stretching: {
+      auto: /*#__PURE__*/css([""]),
+      filled: /*#__PURE__*/css([""]),
+      fixed: /*#__PURE__*/css([""])
+    }
+  }
+};

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

@@ -0,0 +1,6 @@
+import { cellConfig, Textbox, TextLabel, TextSubtitle, TextTitle } from '../../../../components/Cell';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Cell.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(cellConfig, config);
+export var Cell = /*#__PURE__*/component(mergedConfig);
+export { Textbox, TextLabel, TextSubtitle, TextTitle };

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

@@ -0,0 +1,157 @@
+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, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell';
+
+type StoryProps = ComponentProps<typeof Cell> & { itemsCount?: number };
+type Story = StoryObj<StoryProps>;
+
+const views = ['default'];
+const sizes = ['l', 'm', 's', 'xs'];
+const stretchingValues = ['fixed', 'filled'];
+
+type sizesCell = 'xs' | 'l' | 'm' | 's';
+type sizesAvatar = 'l' | 'm' | 's';
+
+const getSize = (size: sizesCell): sizesAvatar => {
+    if (size === 'xs') {
+        return 's';
+    }
+
+    return size;
+};
+
+const meta: Meta<typeof Cell> = {
+    title: 'plasma_b2c/Cell',
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        stretching: {
+            options: stretchingValues,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const ChevronRight = styled(IconChevronLeft)`
+    transform: rotate(180deg);
+    color: var(--text-secondary);
+`;
+
+export const Default: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        return (
+            <Cell
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inherit" size="xs" />}
+                title="Title"
+                subtitle="Subtitle"
+                label="Label"
+                {...args}
+            />
+        );
+    },
+};
+
+export const WithContentTextbox: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        return (
+            <Cell
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inherit" size="xs" />}
+                {...args}
+            >
+                <Textbox title="Title" subtitle="Subtitle" label="Label" />
+            </Cell>
+        );
+    },
+};
+
+export const WithContentTextboxWithTags: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        return (
+            <Cell
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inherit" size="xs" />}
+                {...args}
+            >
+                <Textbox>
+                    <TextLabel>Label</TextLabel>
+                    <TextTitle>Title</TextTitle>
+                    <TextSubtitle>Subtitle</TextSubtitle>
+                </Textbox>
+            </Cell>
+        );
+    },
+};
+
+export const WithContentTextboxCustom: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        const MyStyledText = styled.div`
+            font-size: 12px;
+            font-weight: 600;
+            opacity: 0.5;
+        `;
+        return (
+            <Cell
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inherit" size="xs" />}
+                {...args}
+            >
+                <Textbox>
+                    <TextTitle>Title</TextTitle>
+                    <MyStyledText>My styled Text</MyStyledText>
+                </Textbox>
+            </Cell>
+        );
+    },
+};

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

@@ -0,0 +1,25 @@
+import { css } from 'styled-components';
+import { cellTokens } from '../../../../components/Cell';
+export var config = {
+  defaults: {
+    view: 'primary',
+    size: 'm',
+    stretching: 'filled'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], cellTokens.cellColor, cellTokens.cellLabelColor, cellTokens.cellTitleColor, cellTokens.cellSubtitleColor, cellTokens.cellBackgroundColor)
+    },
+    size: {
+      l: /*#__PURE__*/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-regular-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-regular-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-regular-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      m: /*#__PURE__*/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-regular-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-regular-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-regular-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      s: /*#__PURE__*/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-regular-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-regular-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-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
+      xs: /*#__PURE__*/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-regular-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-regular-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-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight)
+    },
+    stretching: {
+      auto: /*#__PURE__*/css([""]),
+      filled: /*#__PURE__*/css([""]),
+      fixed: /*#__PURE__*/css([""])
+    }
+  }
+};

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

@@ -0,0 +1,6 @@
+import { cellConfig, Textbox, TextLabel, TextSubtitle, TextTitle } from '../../../../components/Cell';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Cell.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(cellConfig, config);
+export var Cell = /*#__PURE__*/component(mergedConfig);
+export { Textbox, TextLabel, TextSubtitle, TextTitle };

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

@@ -0,0 +1,157 @@
+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, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell';
+
+type StoryProps = ComponentProps<typeof Cell> & { itemsCount?: number };
+type Story = StoryObj<StoryProps>;
+
+const views = ['default'];
+const sizes = ['l', 'm', 's', 'xs'];
+const stretchingValues = ['fixed', 'filled'];
+
+type sizesCell = 'xs' | 'l' | 'm' | 's';
+type sizesAvatar = 'l' | 'm' | 's';
+
+const getSize = (size: sizesCell): sizesAvatar => {
+    if (size === 'xs') {
+        return 's';
+    }
+
+    return size;
+};
+
+const meta: Meta<typeof Cell> = {
+    title: 'plasma_web/Cell',
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        stretching: {
+            options: stretchingValues,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const ChevronRight = styled(IconChevronLeft)`
+    transform: rotate(180deg);
+    color: var(--text-secondary);
+`;
+
+export const Default: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        return (
+            <Cell
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inherit" size="xs" />}
+                title="Title"
+                subtitle="Subtitle"
+                label="Label"
+                {...args}
+            />
+        );
+    },
+};
+
+export const WithContentTextbox: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        return (
+            <Cell
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inherit" size="xs" />}
+                {...args}
+            >
+                <Textbox title="Title" subtitle="Subtitle" label="Label" />
+            </Cell>
+        );
+    },
+};
+
+export const WithContentTextboxWithTags: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        return (
+            <Cell
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inherit" size="xs" />}
+                {...args}
+            >
+                <Textbox>
+                    <TextLabel>Label</TextLabel>
+                    <TextTitle>Title</TextTitle>
+                    <TextSubtitle>Subtitle</TextSubtitle>
+                </Textbox>
+            </Cell>
+        );
+    },
+};
+
+export const WithContentTextboxCustom: Story = {
+    args: {
+        view: 'default',
+        size: 'm',
+        stretching: 'filled',
+    },
+    render: ({ ...args }: StoryProps) => {
+        const MyStyledText = styled.div`
+            font-size: 12px;
+            font-weight: 600;
+            opacity: 0.5;
+        `;
+        return (
+            <Cell
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inherit" size="xs" />}
+                {...args}
+            >
+                <Textbox>
+                    <TextTitle>Title</TextTitle>
+                    <MyStyledText>My styled Text</MyStyledText>
+                </Textbox>
+            </Cell>
+        );
+    },
+};

package/styled-components/es/index.js

@@ -6,6 +6,7 @@ export * from './hooks';
 export * from './components/Button';
 export * from './components/ButtonGroup';
 export * from './components/Chip';
+export * from './components/Cell';
 export * from './components/Link';
 export * from './components/Spinner';
 export * from './components/Checkbox';

package/types/components/Cell/Cell.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { RootProps } from '../../engines';
+import type { CellProps } from './Cell.types';
+export declare const cellRoot: (Root: RootProps<HTMLSelectElement, CellProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    size: import("./Cell.types").Sizes;
+    contentLeft?: React.ReactNode;
+    contentRight?: React.ReactNode;
+    content?: React.ReactNode;
+    alignLeft?: import("./Cell.types").AlignLeftProp | undefined;
+    alignRight?: import("./Cell.types").AlignRightProp | undefined;
+    stretching?: "fixed" | "auto" | "filled" | undefined;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    label?: React.ReactNode;
+} & React.RefAttributes<HTMLSelectElement>>;
+export declare const cellConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLSelectElement, CellProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        size: import("./Cell.types").Sizes;
+        contentLeft?: React.ReactNode;
+        contentRight?: React.ReactNode;
+        content?: React.ReactNode;
+        alignLeft?: import("./Cell.types").AlignLeftProp | undefined;
+        alignRight?: import("./Cell.types").AlignRightProp | undefined;
+        stretching?: "fixed" | "auto" | "filled" | undefined;
+        title?: React.ReactNode;
+        subtitle?: React.ReactNode;
+        label?: React.ReactNode;
+    } & React.RefAttributes<HTMLSelectElement>>;
+    base: string;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        stretching: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+        stretching: string;
+    };
+};
+//# sourceMappingURL=Cell.d.ts.map

package/types/components/Cell/Cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAW9C,eAAO,MAAM,QAAQ,SAAU,UAAU,iBAAiB,EAAE,SAAS,CAAC;;;;;;;;;;;2CAsChE,CAAC;AAEP,eAAO,MAAM,UAAU;;;mBAxCQ,UAAU,iBAAiB,EAAE,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DrE,CAAC"}

package/types/components/Cell/Cell.styles.d.ts

@@ -0,0 +1,11 @@
+import type { AlignLeftProp, AlignRightProp } from './Cell.types';
+export declare const CellRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CellContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CellContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CellLeft: import("styled-components").StyledComponent<"div", any, {
+    align: AlignLeftProp;
+}, never>;
+export declare const CellRight: import("styled-components").StyledComponent<"div", any, {
+    align: AlignRightProp;
+}, never>;
+//# sourceMappingURL=Cell.styles.d.ts.map

package/types/components/Cell/Cell.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AASlE,eAAO,MAAM,QAAQ,oEAQpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oEAK9B,CAAC;AAEF,eAAO,MAAM,WAAW,oEAGvB,CAAC;AAEF,eAAO,MAAM,QAAQ;WAAuB,aAAa;SAGxD,CAAC;AAEF,eAAO,MAAM,SAAS;WAAuB,cAAc;SAI1D,CAAC"}

package/types/components/Cell/Cell.tokens.d.ts

@@ -0,0 +1,44 @@
+export declare const tokens: {
+    cellColor: string;
+    cellBackgroundColor: string;
+    cellPadding: string;
+    cellPaddingLeftContent: string;
+    cellPaddingContent: string;
+    cellPaddingRightContent: string;
+    cellTextboxGap: string;
+    cellGap: string;
+    cellWidth: string;
+    cellLabelColor: string;
+    cellLabelFontFamily: string;
+    cellLabelFontSize: string;
+    cellLabelFontStyle: string;
+    cellLabelFontWeight: string;
+    cellLabelLetterSpacing: string;
+    cellLabelLineHeight: string;
+    cellTitleColor: string;
+    cellTitleFontFamily: string;
+    cellTitleFontSize: string;
+    cellTitleFontStyle: string;
+    cellTitleFontWeight: string;
+    cellTitleLetterSpacing: string;
+    cellTitleLineHeight: string;
+    cellSubtitleColor: string;
+    cellSubtitleFontFamily: string;
+    cellSubtitleFontSize: string;
+    cellSubtitleFontStyle: string;
+    cellSubtitleFontWeight: string;
+    cellSubtitleLetterSpacing: string;
+    cellSubtitleLineHeight: string;
+};
+export declare const classes: {
+    cellStretch: string;
+    autoStretching: string;
+    filledStretching: string;
+    fixedStretching: string;
+    cellWrapper: string;
+    cellRoot: string;
+    cellContent: string;
+    cellLeftContent: string;
+    cellRightContent: string;
+};
+//# sourceMappingURL=Cell.tokens.d.ts.map

package/types/components/Cell/Cell.tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqClB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;CAWnB,CAAC"}