@salutejs/plasma-new-hope 0.67.0-canary.1148.8443817650.0 → 0.67.0-canary.1148.8449317874.0

package/cjs/components/Cell/Cell.js

@@ -18,6 +18,8 @@ var cellRoot = function cellRoot(Root) {
   return /*#__PURE__*/React.forwardRef(function (props, outerRootRef) {
     var _props$size = props.size,
       size = _props$size === void 0 ? 'm' : _props$size,
+      _props$view = props.view,
+      view = _props$view === void 0 ? 'default' : _props$view,
       left = props.contentLeft,
       right = props.contentRight,
       _props$alignLeft = props.alignLeft,
@@ -34,6 +36,7 @@ var cellRoot = function cellRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, {
       ref: outerRootRef,
       size: size,
+      view: view,
       className: index.cx(stretchingClass)
     }, /*#__PURE__*/React.createElement(Cell_styles.CellRoot, {
       className: Cell_tokens.classes.cellRoot

package/cjs/components/Cell/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { CellProps } from './Cell.types';\nimport { CellRoot, CellLeft, CellRight, CellContentWrapper, CellContent } from './Cell.styles';\nimport { classes } from './Cell.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as stretchingCSS } from './variations/_stretching/base';\nimport { Textbox } from './Textbox/Textbox';\nimport { TextLabel } from './Textbox/ui/TextLabel';\nimport { TextTitle } from './Textbox/ui/TextTitle';\nimport { TextSubtitle } from './Textbox/ui/TextSubtitle';\n\nexport const cellRoot = (Root: RootProps<HTMLSelectElement, CellProps>) =>\n    forwardRef<HTMLSelectElement, CellProps>((props, outerRootRef) => {\n        const {\n            size = 'm',\n            contentLeft: left,\n            contentRight: right,\n            alignLeft = 'center',\n            alignRight = 'center',\n            stretching = 'filled',\n            children,\n            title,\n            subtitle,\n            label,\n        } = props;\n\n        const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes];\n\n        return (\n            <Root ref={outerRootRef} size={size} className={cx(stretchingClass)}>\n                <CellRoot className={classes.cellRoot}>\n                    {left && <CellLeft align={alignLeft}>{left}</CellLeft>}\n                    <CellContentWrapper>\n                        <CellContent>\n                            {title || subtitle || label ? (\n                                <Textbox>\n                                    {label && <TextLabel>{label}</TextLabel>}\n                                    {title && <TextTitle>{title}</TextTitle>}\n                                    {subtitle && <TextSubtitle>{subtitle}</TextSubtitle>}\n                                </Textbox>\n                            ) : (\n                                children && children\n                            )}\n                        </CellContent>\n                        {right && <CellRight align={alignRight}>{right}</CellRight>}\n                    </CellContentWrapper>\n                </CellRoot>\n            </Root>\n        );\n    });\n\nexport const cellConfig = {\n    name: 'Cell',\n    tag: 'div',\n    layout: cellRoot,\n    base: '',\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        stretching: {\n            css: stretchingCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n        stretching: 'filled',\n    },\n};\n"],"names":["cellRoot","Root","forwardRef","props","outerRootRef","_props$size","size","left","contentLeft","right","contentRight","_props$alignLeft","alignLeft","_props$alignRight","alignRight","_props$stretching","stretching","children","title","subtitle","label","stretchingClass","classes","concat","React","createElement","ref","className","cx","CellRoot","CellLeft","align","CellContentWrapper","CellContent","Textbox","TextLabel","TextTitle","TextSubtitle","CellRight","cellConfig","name","tag","layout","base","variations","view","css","viewCSS","sizeCSS","stretchingCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Cell.js","sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { CellProps } from './Cell.types';\nimport { CellRoot, CellLeft, CellRight, CellContentWrapper, CellContent } from './Cell.styles';\nimport { classes } from './Cell.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as stretchingCSS } from './variations/_stretching/base';\nimport { Textbox } from './Textbox/Textbox';\nimport { TextLabel } from './Textbox/ui/TextLabel';\nimport { TextTitle } from './Textbox/ui/TextTitle';\nimport { TextSubtitle } from './Textbox/ui/TextSubtitle';\n\nexport const cellRoot = (Root: RootProps<HTMLSelectElement, CellProps>) =>\n    forwardRef<HTMLSelectElement, CellProps>((props, outerRootRef) => {\n        const {\n            size = 'm',\n            view = 'default',\n            contentLeft: left,\n            contentRight: right,\n            alignLeft = 'center',\n            alignRight = 'center',\n            stretching = 'filled',\n            children,\n            title,\n            subtitle,\n            label,\n        } = props;\n\n        const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes];\n\n        return (\n            <Root ref={outerRootRef} size={size} view={view} className={cx(stretchingClass)}>\n                <CellRoot className={classes.cellRoot}>\n                    {left && <CellLeft align={alignLeft}>{left}</CellLeft>}\n                    <CellContentWrapper>\n                        <CellContent>\n                            {title || subtitle || label ? (\n                                <Textbox>\n                                    {label && <TextLabel>{label}</TextLabel>}\n                                    {title && <TextTitle>{title}</TextTitle>}\n                                    {subtitle && <TextSubtitle>{subtitle}</TextSubtitle>}\n                                </Textbox>\n                            ) : (\n                                children && children\n                            )}\n                        </CellContent>\n                        {right && <CellRight align={alignRight}>{right}</CellRight>}\n                    </CellContentWrapper>\n                </CellRoot>\n            </Root>\n        );\n    });\n\nexport const cellConfig = {\n    name: 'Cell',\n    tag: 'div',\n    layout: cellRoot,\n    base: '',\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        stretching: {\n            css: stretchingCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n        stretching: 'filled',\n    },\n};\n"],"names":["cellRoot","Root","forwardRef","props","outerRootRef","_props$size","size","_props$view","view","left","contentLeft","right","contentRight","_props$alignLeft","alignLeft","_props$alignRight","alignRight","_props$stretching","stretching","children","title","subtitle","label","stretchingClass","classes","concat","React","createElement","ref","className","cx","CellRoot","CellLeft","align","CellContentWrapper","CellContent","Textbox","TextLabel","TextTitle","TextSubtitle","CellRight","cellConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","stretchingCSS","defaults"],"mappings":"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"}

package/cjs/components/Cell/Cell.tokens.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tokens = {
   cellColor: '--plasma-cell-color',
   cellBackgroundColor: '--plasma-cell-background-color',
-  cellPadding: '--plasma-cell-padding',
+  cellPadding: '--plasma-cell-content-padding',
   cellPaddingLeftContent: '--plasma-cell-left-padding',
-  cellPaddingContent: '--plasma-cell-padding',
+  cellPaddingContent: '--plasma-cell-content-padding',
   cellPaddingRightContent: '--plasma-cell-right-padding',
   cellTextboxGap: '--plasma-cell-textbox-gap',
   cellGap: '--plasma-cell-gap',
@@ -35,7 +35,6 @@ var tokens = {
   cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height'
 };
 var classes = {
-  cellStretch: 'cell-stretch',
   autoStretching: 'cell-stretching-auto',
   filledStretching: 'cell-stretching-filled',
   fixedStretching: 'cell-stretching-fixed',

package/cjs/components/Cell/Cell.tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.tokens.js","sources":["../../../src/components/Cell/Cell.tokens.ts"],"sourcesContent":["export const tokens = {\n    cellColor: '--plasma-cell-color',\n    cellBackgroundColor: '--plasma-cell-background-color',\n\n    cellPadding: '--plasma-cell-padding',\n    cellPaddingLeftContent: '--plasma-cell-left-padding',\n    cellPaddingContent: '--plasma-cell-padding',\n    cellPaddingRightContent: '--plasma-cell-right-padding',\n\n    cellTextboxGap: '--plasma-cell-textbox-gap',\n    cellGap: '--plasma-cell-gap',\n\n    cellWidth: '--plasma-cell-width',\n\n    cellLabelColor: '--plasma-cell-label-color',\n    cellLabelFontFamily: '--plasma-cell-label-font-family',\n    cellLabelFontSize: '--plasma-cell-label-font-size',\n    cellLabelFontStyle: '--plasma-cell-label-font-style',\n    cellLabelFontWeight: '--plasma-cell-label-font-weight',\n    cellLabelLetterSpacing: '--plasma-cell-label-letter-spacing',\n    cellLabelLineHeight: '--plasma-cell-label-line-height',\n\n    cellTitleColor: '--plasma-cell-title-color',\n    cellTitleFontFamily: '--plasma-cell-title-font-family',\n    cellTitleFontSize: '--plasma-cell-title-font-size',\n    cellTitleFontStyle: '--plasma-cell-title-font-style',\n    cellTitleFontWeight: '--plasma-cell-title-font-weight',\n    cellTitleLetterSpacing: '--plasma-cell-title-letter-spacing',\n    cellTitleLineHeight: '--plasma-cell-title-line-height',\n\n    cellSubtitleColor: '--plasma-cell-subtitle-color',\n    cellSubtitleFontFamily: '--plasma-cell-subtitle-font-family',\n    cellSubtitleFontSize: '--plasma-cell-subtitle-font-size',\n    cellSubtitleFontStyle: '--plasma-cell-subtitle-font-style',\n    cellSubtitleFontWeight: '--plasma-cell-subtitle-font-weight',\n    cellSubtitleLetterSpacing: '--plasma-cell-subtitle-letter-spacing',\n    cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height',\n};\n\nexport const classes = {\n    cellStretch: 'cell-stretch',\n    autoStretching: 'cell-stretching-auto',\n    filledStretching: 'cell-stretching-filled',\n    fixedStretching: 'cell-stretching-fixed',\n\n    cellWrapper: 'cell-wrapper',\n    cellRoot: 'cell-root',\n    cellContent: 'cell-content',\n    cellLeftContent: 'cell-left-content',\n    cellRightContent: 'cell-right-content',\n};\n"],"names":["tokens","cellColor","cellBackgroundColor","cellPadding","cellPaddingLeftContent","cellPaddingContent","cellPaddingRightContent","cellTextboxGap","cellGap","cellWidth","cellLabelColor","cellLabelFontFamily","cellLabelFontSize","cellLabelFontStyle","cellLabelFontWeight","cellLabelLetterSpacing","cellLabelLineHeight","cellTitleColor","cellTitleFontFamily","cellTitleFontSize","cellTitleFontStyle","cellTitleFontWeight","cellTitleLetterSpacing","cellTitleLineHeight","cellSubtitleColor","cellSubtitleFontFamily","cellSubtitleFontSize","cellSubtitleFontStyle","cellSubtitleFontWeight","cellSubtitleLetterSpacing","cellSubtitleLineHeight","classes","cellStretch","autoStretching","filledStretching","fixedStretching","cellWrapper","cellRoot","cellContent","cellLeftContent","cellRightContent"],"mappings":";;;;AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,SAAS,EAAE,qBAAqB;AAChCC,EAAAA,mBAAmB,EAAE,gCAAgC;AAErDC,EAAAA,WAAW,EAAE,uBAAuB;AACpCC,EAAAA,sBAAsB,EAAE,4BAA4B;AACpDC,EAAAA,kBAAkB,EAAE,uBAAuB;AAC3CC,EAAAA,uBAAuB,EAAE,6BAA6B;AAEtDC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,OAAO,EAAE,mBAAmB;AAE5BC,EAAAA,SAAS,EAAE,qBAAqB;AAEhCC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,iBAAiB,EAAE,+BAA+B;AAClDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,mBAAmB,EAAE,iCAAiC;AAEtDC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,iBAAiB,EAAE,+BAA+B;AAClDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,mBAAmB,EAAE,iCAAiC;AAEtDC,EAAAA,iBAAiB,EAAE,8BAA8B;AACjDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,qBAAqB,EAAE,mCAAmC;AAC1DC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,sBAAsB,EAAE,oCAAA;AAC5B,EAAC;AAEM,IAAMC,OAAO,GAAG;AACnBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,cAAc,EAAE,sBAAsB;AACtCC,EAAAA,gBAAgB,EAAE,wBAAwB;AAC1CC,EAAAA,eAAe,EAAE,uBAAuB;AAExCC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,eAAe,EAAE,mBAAmB;AACpCC,EAAAA,gBAAgB,EAAE,oBAAA;AACtB;;;;;"}
+{"version":3,"file":"Cell.tokens.js","sources":["../../../src/components/Cell/Cell.tokens.ts"],"sourcesContent":["export const tokens = {\n    cellColor: '--plasma-cell-color',\n    cellBackgroundColor: '--plasma-cell-background-color',\n\n    cellPadding: '--plasma-cell-content-padding',\n    cellPaddingLeftContent: '--plasma-cell-left-padding',\n    cellPaddingContent: '--plasma-cell-content-padding',\n    cellPaddingRightContent: '--plasma-cell-right-padding',\n\n    cellTextboxGap: '--plasma-cell-textbox-gap',\n    cellGap: '--plasma-cell-gap',\n\n    cellWidth: '--plasma-cell-width',\n\n    cellLabelColor: '--plasma-cell-label-color',\n    cellLabelFontFamily: '--plasma-cell-label-font-family',\n    cellLabelFontSize: '--plasma-cell-label-font-size',\n    cellLabelFontStyle: '--plasma-cell-label-font-style',\n    cellLabelFontWeight: '--plasma-cell-label-font-weight',\n    cellLabelLetterSpacing: '--plasma-cell-label-letter-spacing',\n    cellLabelLineHeight: '--plasma-cell-label-line-height',\n\n    cellTitleColor: '--plasma-cell-title-color',\n    cellTitleFontFamily: '--plasma-cell-title-font-family',\n    cellTitleFontSize: '--plasma-cell-title-font-size',\n    cellTitleFontStyle: '--plasma-cell-title-font-style',\n    cellTitleFontWeight: '--plasma-cell-title-font-weight',\n    cellTitleLetterSpacing: '--plasma-cell-title-letter-spacing',\n    cellTitleLineHeight: '--plasma-cell-title-line-height',\n\n    cellSubtitleColor: '--plasma-cell-subtitle-color',\n    cellSubtitleFontFamily: '--plasma-cell-subtitle-font-family',\n    cellSubtitleFontSize: '--plasma-cell-subtitle-font-size',\n    cellSubtitleFontStyle: '--plasma-cell-subtitle-font-style',\n    cellSubtitleFontWeight: '--plasma-cell-subtitle-font-weight',\n    cellSubtitleLetterSpacing: '--plasma-cell-subtitle-letter-spacing',\n    cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height',\n};\n\nexport const classes = {\n    autoStretching: 'cell-stretching-auto',\n    filledStretching: 'cell-stretching-filled',\n    fixedStretching: 'cell-stretching-fixed',\n\n    cellWrapper: 'cell-wrapper',\n    cellRoot: 'cell-root',\n    cellContent: 'cell-content',\n    cellLeftContent: 'cell-left-content',\n    cellRightContent: 'cell-right-content',\n};\n"],"names":["tokens","cellColor","cellBackgroundColor","cellPadding","cellPaddingLeftContent","cellPaddingContent","cellPaddingRightContent","cellTextboxGap","cellGap","cellWidth","cellLabelColor","cellLabelFontFamily","cellLabelFontSize","cellLabelFontStyle","cellLabelFontWeight","cellLabelLetterSpacing","cellLabelLineHeight","cellTitleColor","cellTitleFontFamily","cellTitleFontSize","cellTitleFontStyle","cellTitleFontWeight","cellTitleLetterSpacing","cellTitleLineHeight","cellSubtitleColor","cellSubtitleFontFamily","cellSubtitleFontSize","cellSubtitleFontStyle","cellSubtitleFontWeight","cellSubtitleLetterSpacing","cellSubtitleLineHeight","classes","autoStretching","filledStretching","fixedStretching","cellWrapper","cellRoot","cellContent","cellLeftContent","cellRightContent"],"mappings":";;;;AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,SAAS,EAAE,qBAAqB;AAChCC,EAAAA,mBAAmB,EAAE,gCAAgC;AAErDC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,sBAAsB,EAAE,4BAA4B;AACpDC,EAAAA,kBAAkB,EAAE,+BAA+B;AACnDC,EAAAA,uBAAuB,EAAE,6BAA6B;AAEtDC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,OAAO,EAAE,mBAAmB;AAE5BC,EAAAA,SAAS,EAAE,qBAAqB;AAEhCC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,iBAAiB,EAAE,+BAA+B;AAClDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,mBAAmB,EAAE,iCAAiC;AAEtDC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,iBAAiB,EAAE,+BAA+B;AAClDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,mBAAmB,EAAE,iCAAiC;AAEtDC,EAAAA,iBAAiB,EAAE,8BAA8B;AACjDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,qBAAqB,EAAE,mCAAmC;AAC1DC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,sBAAsB,EAAE,oCAAA;AAC5B,EAAC;AAEM,IAAMC,OAAO,GAAG;AACnBC,EAAAA,cAAc,EAAE,sBAAsB;AACtCC,EAAAA,gBAAgB,EAAE,wBAAwB;AAC1CC,EAAAA,eAAe,EAAE,uBAAuB;AAExCC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,eAAe,EAAE,mBAAmB;AACpCC,EAAAA,gBAAgB,EAAE,oBAAA;AACtB;;;;;"}

package/es/components/Cell/Cell.js

@@ -14,6 +14,8 @@ var cellRoot = function cellRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRootRef) {
     var _props$size = props.size,
       size = _props$size === void 0 ? 'm' : _props$size,
+      _props$view = props.view,
+      view = _props$view === void 0 ? 'default' : _props$view,
       left = props.contentLeft,
       right = props.contentRight,
       _props$alignLeft = props.alignLeft,
@@ -30,6 +32,7 @@ var cellRoot = function cellRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, {
       ref: outerRootRef,
       size: size,
+      view: view,
       className: cx(stretchingClass)
     }, /*#__PURE__*/React.createElement(CellRoot, {
       className: classes.cellRoot

package/es/components/Cell/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { CellProps } from './Cell.types';\nimport { CellRoot, CellLeft, CellRight, CellContentWrapper, CellContent } from './Cell.styles';\nimport { classes } from './Cell.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as stretchingCSS } from './variations/_stretching/base';\nimport { Textbox } from './Textbox/Textbox';\nimport { TextLabel } from './Textbox/ui/TextLabel';\nimport { TextTitle } from './Textbox/ui/TextTitle';\nimport { TextSubtitle } from './Textbox/ui/TextSubtitle';\n\nexport const cellRoot = (Root: RootProps<HTMLSelectElement, CellProps>) =>\n    forwardRef<HTMLSelectElement, CellProps>((props, outerRootRef) => {\n        const {\n            size = 'm',\n            contentLeft: left,\n            contentRight: right,\n            alignLeft = 'center',\n            alignRight = 'center',\n            stretching = 'filled',\n            children,\n            title,\n            subtitle,\n            label,\n        } = props;\n\n        const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes];\n\n        return (\n            <Root ref={outerRootRef} size={size} className={cx(stretchingClass)}>\n                <CellRoot className={classes.cellRoot}>\n                    {left && <CellLeft align={alignLeft}>{left}</CellLeft>}\n                    <CellContentWrapper>\n                        <CellContent>\n                            {title || subtitle || label ? (\n                                <Textbox>\n                                    {label && <TextLabel>{label}</TextLabel>}\n                                    {title && <TextTitle>{title}</TextTitle>}\n                                    {subtitle && <TextSubtitle>{subtitle}</TextSubtitle>}\n                                </Textbox>\n                            ) : (\n                                children && children\n                            )}\n                        </CellContent>\n                        {right && <CellRight align={alignRight}>{right}</CellRight>}\n                    </CellContentWrapper>\n                </CellRoot>\n            </Root>\n        );\n    });\n\nexport const cellConfig = {\n    name: 'Cell',\n    tag: 'div',\n    layout: cellRoot,\n    base: '',\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        stretching: {\n            css: stretchingCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n        stretching: 'filled',\n    },\n};\n"],"names":["cellRoot","Root","forwardRef","props","outerRootRef","_props$size","size","left","contentLeft","right","contentRight","_props$alignLeft","alignLeft","_props$alignRight","alignRight","_props$stretching","stretching","children","title","subtitle","label","stretchingClass","classes","concat","React","createElement","ref","className","cx","CellRoot","CellLeft","align","CellContentWrapper","CellContent","Textbox","TextLabel","TextTitle","TextSubtitle","CellRight","cellConfig","name","tag","layout","base","variations","view","css","viewCSS","sizeCSS","stretchingCSS","defaults"],"mappings":";;;;;;;;;;;;IAgBaA,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,IAA6C,EAAA;AAAA,EAAA,oBAClEC,UAAU,CAA+B,UAACC,KAAK,EAAEC,YAAY,EAAK;AAC9D,IAAA,IAAAC,WAAA,GAWIF,KAAK,CAVLG,IAAI;AAAJA,MAAAA,IAAI,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,GAAG,GAAAA,WAAA;MACGE,IAAI,GASjBJ,KAAK,CATLK,WAAW;MACGC,KAAK,GAQnBN,KAAK,CARLO,YAAY;MAAAC,gBAAA,GAQZR,KAAK,CAPLS,SAAS;AAATA,MAAAA,SAAS,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,gBAAA;MAAAE,iBAAA,GAOpBV,KAAK,CANLW,UAAU;AAAVA,MAAAA,UAAU,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,iBAAA;MAAAE,iBAAA,GAMrBZ,KAAK,CALLa,UAAU;AAAVA,MAAAA,UAAU,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,iBAAA;MACrBE,QAAQ,GAIRd,KAAK,CAJLc,QAAQ;MACRC,KAAK,GAGLf,KAAK,CAHLe,KAAK;MACLC,QAAQ,GAERhB,KAAK,CAFLgB,QAAQ;MACRC,KAAK,GACLjB,KAAK,CADLiB,KAAK,CAAA;AAGT,IAAA,IAAMC,eAAe,GAAGC,OAAO,IAAAC,MAAA,CAAIP,UAAU,EAAqC,YAAA,CAAA,CAAA,CAAA;AAElF,IAAA,oBACIQ,KAAA,CAAAC,aAAA,CAACxB,IAAI,EAAA;AAACyB,MAAAA,GAAG,EAAEtB,YAAa;AAACE,MAAAA,IAAI,EAAEA,IAAK;MAACqB,SAAS,EAAEC,EAAE,CAACP,eAAe,CAAA;AAAE,KAAA,eAChEG,KAAA,CAAAC,aAAA,CAACI,QAAQ,EAAA;MAACF,SAAS,EAAEL,OAAO,CAACtB,QAAAA;AAAS,KAAA,EACjCO,IAAI,iBAAIiB,KAAA,CAAAC,aAAA,CAACK,QAAQ,EAAA;AAACC,MAAAA,KAAK,EAAEnB,SAAAA;AAAU,KAAA,EAAEL,IAAe,CAAC,eACtDiB,KAAA,CAAAC,aAAA,CAACO,kBAAkB,EAAA,IAAA,eACfR,KAAA,CAAAC,aAAA,CAACQ,WAAW,QACPf,KAAK,IAAIC,QAAQ,IAAIC,KAAK,gBACvBI,KAAA,CAAAC,aAAA,CAACS,OAAO,EACHd,IAAAA,EAAAA,KAAK,iBAAII,KAAA,CAAAC,aAAA,CAACU,SAAS,EAAEf,IAAAA,EAAAA,KAAiB,CAAC,EACvCF,KAAK,iBAAIM,KAAA,CAAAC,aAAA,CAACW,SAAS,EAAElB,IAAAA,EAAAA,KAAiB,CAAC,EACvCC,QAAQ,iBAAIK,KAAA,CAAAC,aAAA,CAACY,YAAY,EAAA,IAAA,EAAElB,QAAuB,CAC9C,CAAC,GAEVF,QAAQ,IAAIA,QAEP,CAAC,EACbR,KAAK,iBAAIe,KAAA,CAAAC,aAAA,CAACa,SAAS,EAAA;AAACP,MAAAA,KAAK,EAAEjB,UAAAA;AAAW,KAAA,EAAEL,KAAiB,CAC1C,CACd,CACR,CAAC,CAAA;AAEf,GAAC,CAAC,CAAA;AAAA,EAAA;AAEC,IAAM8B,UAAU,GAAG;AACtBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE1C,QAAQ;AAChB2C,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,IAAAA;KACR;AACDzC,IAAAA,IAAI,EAAE;AACFwC,MAAAA,GAAG,EAAEE,MAAAA;KACR;AACDhC,IAAAA,UAAU,EAAE;AACR8B,MAAAA,GAAG,EAAEG,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNL,IAAAA,IAAI,EAAE,SAAS;AACfvC,IAAAA,IAAI,EAAE,GAAG;AACTU,IAAAA,UAAU,EAAE,QAAA;AAChB,GAAA;AACJ;;;;"}
+{"version":3,"file":"Cell.js","sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { CellProps } from './Cell.types';\nimport { CellRoot, CellLeft, CellRight, CellContentWrapper, CellContent } from './Cell.styles';\nimport { classes } from './Cell.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as stretchingCSS } from './variations/_stretching/base';\nimport { Textbox } from './Textbox/Textbox';\nimport { TextLabel } from './Textbox/ui/TextLabel';\nimport { TextTitle } from './Textbox/ui/TextTitle';\nimport { TextSubtitle } from './Textbox/ui/TextSubtitle';\n\nexport const cellRoot = (Root: RootProps<HTMLSelectElement, CellProps>) =>\n    forwardRef<HTMLSelectElement, CellProps>((props, outerRootRef) => {\n        const {\n            size = 'm',\n            view = 'default',\n            contentLeft: left,\n            contentRight: right,\n            alignLeft = 'center',\n            alignRight = 'center',\n            stretching = 'filled',\n            children,\n            title,\n            subtitle,\n            label,\n        } = props;\n\n        const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes];\n\n        return (\n            <Root ref={outerRootRef} size={size} view={view} className={cx(stretchingClass)}>\n                <CellRoot className={classes.cellRoot}>\n                    {left && <CellLeft align={alignLeft}>{left}</CellLeft>}\n                    <CellContentWrapper>\n                        <CellContent>\n                            {title || subtitle || label ? (\n                                <Textbox>\n                                    {label && <TextLabel>{label}</TextLabel>}\n                                    {title && <TextTitle>{title}</TextTitle>}\n                                    {subtitle && <TextSubtitle>{subtitle}</TextSubtitle>}\n                                </Textbox>\n                            ) : (\n                                children && children\n                            )}\n                        </CellContent>\n                        {right && <CellRight align={alignRight}>{right}</CellRight>}\n                    </CellContentWrapper>\n                </CellRoot>\n            </Root>\n        );\n    });\n\nexport const cellConfig = {\n    name: 'Cell',\n    tag: 'div',\n    layout: cellRoot,\n    base: '',\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        stretching: {\n            css: stretchingCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n        stretching: 'filled',\n    },\n};\n"],"names":["cellRoot","Root","forwardRef","props","outerRootRef","_props$size","size","_props$view","view","left","contentLeft","right","contentRight","_props$alignLeft","alignLeft","_props$alignRight","alignRight","_props$stretching","stretching","children","title","subtitle","label","stretchingClass","classes","concat","React","createElement","ref","className","cx","CellRoot","CellLeft","align","CellContentWrapper","CellContent","Textbox","TextLabel","TextTitle","TextSubtitle","CellRight","cellConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","stretchingCSS","defaults"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 var tokens = {
   cellColor: '--plasma-cell-color',
   cellBackgroundColor: '--plasma-cell-background-color',
-  cellPadding: '--plasma-cell-padding',
+  cellPadding: '--plasma-cell-content-padding',
   cellPaddingLeftContent: '--plasma-cell-left-padding',
-  cellPaddingContent: '--plasma-cell-padding',
+  cellPaddingContent: '--plasma-cell-content-padding',
   cellPaddingRightContent: '--plasma-cell-right-padding',
   cellTextboxGap: '--plasma-cell-textbox-gap',
   cellGap: '--plasma-cell-gap',
@@ -31,7 +31,6 @@ var tokens = {
   cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height'
 };
 var classes = {
-  cellStretch: 'cell-stretch',
   autoStretching: 'cell-stretching-auto',
   filledStretching: 'cell-stretching-filled',
   fixedStretching: 'cell-stretching-fixed',

package/es/components/Cell/Cell.tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.tokens.js","sources":["../../../src/components/Cell/Cell.tokens.ts"],"sourcesContent":["export const tokens = {\n    cellColor: '--plasma-cell-color',\n    cellBackgroundColor: '--plasma-cell-background-color',\n\n    cellPadding: '--plasma-cell-padding',\n    cellPaddingLeftContent: '--plasma-cell-left-padding',\n    cellPaddingContent: '--plasma-cell-padding',\n    cellPaddingRightContent: '--plasma-cell-right-padding',\n\n    cellTextboxGap: '--plasma-cell-textbox-gap',\n    cellGap: '--plasma-cell-gap',\n\n    cellWidth: '--plasma-cell-width',\n\n    cellLabelColor: '--plasma-cell-label-color',\n    cellLabelFontFamily: '--plasma-cell-label-font-family',\n    cellLabelFontSize: '--plasma-cell-label-font-size',\n    cellLabelFontStyle: '--plasma-cell-label-font-style',\n    cellLabelFontWeight: '--plasma-cell-label-font-weight',\n    cellLabelLetterSpacing: '--plasma-cell-label-letter-spacing',\n    cellLabelLineHeight: '--plasma-cell-label-line-height',\n\n    cellTitleColor: '--plasma-cell-title-color',\n    cellTitleFontFamily: '--plasma-cell-title-font-family',\n    cellTitleFontSize: '--plasma-cell-title-font-size',\n    cellTitleFontStyle: '--plasma-cell-title-font-style',\n    cellTitleFontWeight: '--plasma-cell-title-font-weight',\n    cellTitleLetterSpacing: '--plasma-cell-title-letter-spacing',\n    cellTitleLineHeight: '--plasma-cell-title-line-height',\n\n    cellSubtitleColor: '--plasma-cell-subtitle-color',\n    cellSubtitleFontFamily: '--plasma-cell-subtitle-font-family',\n    cellSubtitleFontSize: '--plasma-cell-subtitle-font-size',\n    cellSubtitleFontStyle: '--plasma-cell-subtitle-font-style',\n    cellSubtitleFontWeight: '--plasma-cell-subtitle-font-weight',\n    cellSubtitleLetterSpacing: '--plasma-cell-subtitle-letter-spacing',\n    cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height',\n};\n\nexport const classes = {\n    cellStretch: 'cell-stretch',\n    autoStretching: 'cell-stretching-auto',\n    filledStretching: 'cell-stretching-filled',\n    fixedStretching: 'cell-stretching-fixed',\n\n    cellWrapper: 'cell-wrapper',\n    cellRoot: 'cell-root',\n    cellContent: 'cell-content',\n    cellLeftContent: 'cell-left-content',\n    cellRightContent: 'cell-right-content',\n};\n"],"names":["tokens","cellColor","cellBackgroundColor","cellPadding","cellPaddingLeftContent","cellPaddingContent","cellPaddingRightContent","cellTextboxGap","cellGap","cellWidth","cellLabelColor","cellLabelFontFamily","cellLabelFontSize","cellLabelFontStyle","cellLabelFontWeight","cellLabelLetterSpacing","cellLabelLineHeight","cellTitleColor","cellTitleFontFamily","cellTitleFontSize","cellTitleFontStyle","cellTitleFontWeight","cellTitleLetterSpacing","cellTitleLineHeight","cellSubtitleColor","cellSubtitleFontFamily","cellSubtitleFontSize","cellSubtitleFontStyle","cellSubtitleFontWeight","cellSubtitleLetterSpacing","cellSubtitleLineHeight","classes","cellStretch","autoStretching","filledStretching","fixedStretching","cellWrapper","cellRoot","cellContent","cellLeftContent","cellRightContent"],"mappings":"AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,SAAS,EAAE,qBAAqB;AAChCC,EAAAA,mBAAmB,EAAE,gCAAgC;AAErDC,EAAAA,WAAW,EAAE,uBAAuB;AACpCC,EAAAA,sBAAsB,EAAE,4BAA4B;AACpDC,EAAAA,kBAAkB,EAAE,uBAAuB;AAC3CC,EAAAA,uBAAuB,EAAE,6BAA6B;AAEtDC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,OAAO,EAAE,mBAAmB;AAE5BC,EAAAA,SAAS,EAAE,qBAAqB;AAEhCC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,iBAAiB,EAAE,+BAA+B;AAClDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,mBAAmB,EAAE,iCAAiC;AAEtDC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,iBAAiB,EAAE,+BAA+B;AAClDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,mBAAmB,EAAE,iCAAiC;AAEtDC,EAAAA,iBAAiB,EAAE,8BAA8B;AACjDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,qBAAqB,EAAE,mCAAmC;AAC1DC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,sBAAsB,EAAE,oCAAA;AAC5B,EAAC;AAEM,IAAMC,OAAO,GAAG;AACnBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,cAAc,EAAE,sBAAsB;AACtCC,EAAAA,gBAAgB,EAAE,wBAAwB;AAC1CC,EAAAA,eAAe,EAAE,uBAAuB;AAExCC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,eAAe,EAAE,mBAAmB;AACpCC,EAAAA,gBAAgB,EAAE,oBAAA;AACtB;;;;"}
+{"version":3,"file":"Cell.tokens.js","sources":["../../../src/components/Cell/Cell.tokens.ts"],"sourcesContent":["export const tokens = {\n    cellColor: '--plasma-cell-color',\n    cellBackgroundColor: '--plasma-cell-background-color',\n\n    cellPadding: '--plasma-cell-content-padding',\n    cellPaddingLeftContent: '--plasma-cell-left-padding',\n    cellPaddingContent: '--plasma-cell-content-padding',\n    cellPaddingRightContent: '--plasma-cell-right-padding',\n\n    cellTextboxGap: '--plasma-cell-textbox-gap',\n    cellGap: '--plasma-cell-gap',\n\n    cellWidth: '--plasma-cell-width',\n\n    cellLabelColor: '--plasma-cell-label-color',\n    cellLabelFontFamily: '--plasma-cell-label-font-family',\n    cellLabelFontSize: '--plasma-cell-label-font-size',\n    cellLabelFontStyle: '--plasma-cell-label-font-style',\n    cellLabelFontWeight: '--plasma-cell-label-font-weight',\n    cellLabelLetterSpacing: '--plasma-cell-label-letter-spacing',\n    cellLabelLineHeight: '--plasma-cell-label-line-height',\n\n    cellTitleColor: '--plasma-cell-title-color',\n    cellTitleFontFamily: '--plasma-cell-title-font-family',\n    cellTitleFontSize: '--plasma-cell-title-font-size',\n    cellTitleFontStyle: '--plasma-cell-title-font-style',\n    cellTitleFontWeight: '--plasma-cell-title-font-weight',\n    cellTitleLetterSpacing: '--plasma-cell-title-letter-spacing',\n    cellTitleLineHeight: '--plasma-cell-title-line-height',\n\n    cellSubtitleColor: '--plasma-cell-subtitle-color',\n    cellSubtitleFontFamily: '--plasma-cell-subtitle-font-family',\n    cellSubtitleFontSize: '--plasma-cell-subtitle-font-size',\n    cellSubtitleFontStyle: '--plasma-cell-subtitle-font-style',\n    cellSubtitleFontWeight: '--plasma-cell-subtitle-font-weight',\n    cellSubtitleLetterSpacing: '--plasma-cell-subtitle-letter-spacing',\n    cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height',\n};\n\nexport const classes = {\n    autoStretching: 'cell-stretching-auto',\n    filledStretching: 'cell-stretching-filled',\n    fixedStretching: 'cell-stretching-fixed',\n\n    cellWrapper: 'cell-wrapper',\n    cellRoot: 'cell-root',\n    cellContent: 'cell-content',\n    cellLeftContent: 'cell-left-content',\n    cellRightContent: 'cell-right-content',\n};\n"],"names":["tokens","cellColor","cellBackgroundColor","cellPadding","cellPaddingLeftContent","cellPaddingContent","cellPaddingRightContent","cellTextboxGap","cellGap","cellWidth","cellLabelColor","cellLabelFontFamily","cellLabelFontSize","cellLabelFontStyle","cellLabelFontWeight","cellLabelLetterSpacing","cellLabelLineHeight","cellTitleColor","cellTitleFontFamily","cellTitleFontSize","cellTitleFontStyle","cellTitleFontWeight","cellTitleLetterSpacing","cellTitleLineHeight","cellSubtitleColor","cellSubtitleFontFamily","cellSubtitleFontSize","cellSubtitleFontStyle","cellSubtitleFontWeight","cellSubtitleLetterSpacing","cellSubtitleLineHeight","classes","autoStretching","filledStretching","fixedStretching","cellWrapper","cellRoot","cellContent","cellLeftContent","cellRightContent"],"mappings":"AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,SAAS,EAAE,qBAAqB;AAChCC,EAAAA,mBAAmB,EAAE,gCAAgC;AAErDC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,sBAAsB,EAAE,4BAA4B;AACpDC,EAAAA,kBAAkB,EAAE,+BAA+B;AACnDC,EAAAA,uBAAuB,EAAE,6BAA6B;AAEtDC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,OAAO,EAAE,mBAAmB;AAE5BC,EAAAA,SAAS,EAAE,qBAAqB;AAEhCC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,iBAAiB,EAAE,+BAA+B;AAClDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,mBAAmB,EAAE,iCAAiC;AAEtDC,EAAAA,cAAc,EAAE,2BAA2B;AAC3CC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,iBAAiB,EAAE,+BAA+B;AAClDC,EAAAA,kBAAkB,EAAE,gCAAgC;AACpDC,EAAAA,mBAAmB,EAAE,iCAAiC;AACtDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,mBAAmB,EAAE,iCAAiC;AAEtDC,EAAAA,iBAAiB,EAAE,8BAA8B;AACjDC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,oBAAoB,EAAE,kCAAkC;AACxDC,EAAAA,qBAAqB,EAAE,mCAAmC;AAC1DC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,sBAAsB,EAAE,oCAAA;AAC5B,EAAC;AAEM,IAAMC,OAAO,GAAG;AACnBC,EAAAA,cAAc,EAAE,sBAAsB;AACtCC,EAAAA,gBAAgB,EAAE,wBAAwB;AAC1CC,EAAAA,eAAe,EAAE,uBAAuB;AAExCC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,QAAQ,EAAE,WAAW;AACrBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,eAAe,EAAE,mBAAmB;AACpCC,EAAAA,gBAAgB,EAAE,oBAAA;AACtB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.67.0-canary.1148.8443817650.0",
+  "version": "0.67.0-canary.1148.8449317874.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -102,5 +102,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "d66ea6472bcec01bda9245ea17faff9f2b85adc7"
+  "gitHead": "76e991bbea95116af0bc1340f1ad92fb40b197d5"
 }

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

@@ -0,0 +1,97 @@
+---
+id: avatar
+title: Avatar
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Avatar
+<Description name="Avatar" />
+<PropsTable name="Avatar" exclude={['css']} />
+
+
+## Примеры
+
+### Размер аватара
+Размер задается с помощью свойства `size`. Возможные значения свойства: `"xxl"`, `"l"`, `"m"`, `"s"`, `"fit"`.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar size="xxl" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+            <Avatar size="l" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+            <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+            <Avatar size="s" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+        </>
+    );
+}
+```
+
+### Инициалы вместо фотографии
+Инициалы можно задать с помощью свойства `name`. Желательный формат строки - "Имя Фамилия". Также не должно быть свойства url.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar name="Иван Фадеев" />
+        </>
+    );
+}
+```
+
+### Статус аватара
+Статус задается с помощью свойства `status`. Возможные значения: `"active"`, `"inactive"`.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar status="active" name="Иван Фадеев" />
+            <Avatar status="inactive" name="Иван Фадеев" />
+        </>
+    );
+}
+```
+
+### Увеличение при наведении
+Опциональное свойство `"isScalable"`.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar isScalable name="Иван Фадеев" />
+        </>
+    );
+}
+```
+
+### Доступность
+Добавляем `"role"` и `"tabIndex"`.
+
+```tsx live
+import React from 'react';
+import { Avatar } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <>
+            <Avatar role="button" tabIndex="0" name="Иван Фадеев" />
+        </>
+    );
+}
+```

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

@@ -0,0 +1,29 @@
+---
+id: avatarGroup
+title: AvatarGroup
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# AvatarGroup
+<Description name="AvatarGroup" />
+<PropsTable name="AvatarGroup" exclude={['css']} />
+
+AvatarGroup это обертка для Avatar. Принимает в себя группу из avatar's.
+
+```tsx live
+import React from 'react';
+import { Avatar, AvatarGroup } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <AvatarGroup>
+                {
+                    Array(5).fill(true).map(() => (
+                        <Avatar size="xxl" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    ))
+                }
+            </AvatarGroup>
+    );
+}
+```

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

@@ -0,0 +1,131 @@
+---
+id: badge
+title: Badge
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Badge
+<Description name="Badge" />
+<PropsTable name="Badge"  exclude={['css']} />
+
+## Примеры
+
+### Размер бейджа
+Размер задается с помощью свойства `size`.
+
+Возможные значения свойства: `"l"`, `"m"`, `"s"`.
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" />
+            <Badge text="Бейдж" size="m" />
+            <Badge text="Бейдж" size="s" />
+        </div>
+    );
+}
+```
+
+### Скругленность бейджа
+Скругленность задается с помощью свойства `pilled`:
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" pilled />
+            <Badge text="Бейдж" size="m" pilled />
+            <Badge text="Бейдж" size="s" pilled />
+        </div>
+    );
+}
+```
+
+### Вид бейджа
+Вид бейджа задается с помощью свойства `view`. Возможные значения свойства `view`:
+
++ `"primary"` – основной бейдж;
++ `"accent"` – бейдж акцентного цвета;
++ `"positive"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"negative"` – ошибка;
++ `"dark"` – темный бэйдж;
++ `"light"` – светлый бэйдж.
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" view="primary" />
+            <Badge text="Бейдж" size="l" view="accent" />
+            <Badge text="Бейдж" size="l" view="positive" />
+            <Badge text="Бейдж" size="l" view="warning" />
+            <Badge text="Бейдж" size="l" view="negative" />
+            <Badge text="Бейдж" size="l" view="dark" />
+            <Badge text="Бейдж" size="l" view="light" />
+        </div>
+    );
+}
+```
+
+так же на вид бейджа влияет свойство `transparent`:
+
+```tsx live 
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge text="Бейдж" size="l" view="primary" transparent />
+            <Badge text="Бейдж" size="l" view="accent" transparent />
+            <Badge text="Бейдж" size="l" view="positive" transparent />
+            <Badge text="Бейдж" size="l" view="warning" transparent />
+            <Badge text="Бейдж" size="l" view="negative" transparent />
+            <Badge text="Бейдж" size="l" view="dark" transparent />
+            <Badge text="Бейдж" size="l" view="light" transparent />
+        </div>
+    );
+}
+```
+
+### Иконка слева / справа
+В левой и/или правой части бейджа можно отобразить иконку:
+
+```tsx live
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+import { IconEye } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Badge 
+                text="Бейдж" 
+                size="l"   
+                view="primary" 
+                contentLeft={
+                    <IconEye color="inherit" size="xs" />
+                } />
+            <Badge 
+                text="Бейдж" 
+                size="l"   
+                view="primary" 
+                contentRight={
+                    <IconEye color="inherit" size="xs" />
+                } />
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,162 @@
+---
+id: button
+title: Button
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Button
+Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
+
+## Button
+<Description name="Button" />
+<PropsTable name="Button" />
+
+## Использование
+Компонент `Button` может содержать текст, который указывается в
+свойстве `text`, или любой контент напрямую через `children`.
+
+Свойство text можно использовать вместе со свойствами `contentLeft` и `contentRight`.
+С их помощью можно размещать **иконку** слева или справа от текста.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Button text="Текст" />
+
+            <Button text="Текст" contentLeft={<IconDownload />} />
+
+            <Button text="Текст" contentRight={<IconDownload />} />
+
+            <Button contentLeft={<IconDownload />} />
+
+            <Button text="Текст" isLoading />
+
+            <Button text="Текст" isLoading loader={<div>Loader...</div>} />
+
+            <Button>
+                <IconDownload />
+                <span>Текст</span>
+            </Button>
+        </div>
+    );
+}
+```
+
+## Примеры
+
+### Размер кнопки
+Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div>
+            <Button text="Button" size="l" />
+            <Button text="Button" size="m" />
+            <Button text="Button" size="s" />
+        </div>
+    );
+}
+```
+
+### Вид кнопки
+Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"primary"` – основная;
++ `"secondary"` – вторичная;
++ `"success"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"critical"` – ошибка;
++ `"checked"` – выбранное состояние;
++ `"clear"` – без цветового сопровождения.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div>
+            <Button text="Кнопка" size="s" view="primary" />
+            <Button text="Кнопка" size="s" view="secondary" />
+            <Button text="Кнопка" size="s" view="success" />
+            <Button text="Кнопка" size="s" view="warning" />
+            <Button text="Кнопка" size="s" view="critical" />
+            <Button text="Кнопка" size="s" view="checked" />
+            <Button text="Кнопка" size="s" view="overlay" />
+            <Button text="Кнопка" size="s" view="clear" />
+        </div>
+    );
+}
+```
+
+### Границы кнопки
+Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`:
++ `square` – обычное скругление;
++ `circle` – сильное скругление;
++ `clear` – нет скругления.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div>
+            <Button pin="square-square">Button</Button>
+            <Button pin="square-clear">Button</Button>
+            <Button pin="clear-square">Button</Button>
+            <Button pin="clear-clear">Button</Button>
+            <Button pin="clear-circle">Button</Button>
+            <Button pin="circle-clear">Button</Button>
+            <Button pin="circle-circle">Button</Button>
+        </div>
+    );
+}
+```
+
+### Квадратные и круглые кнопки
+Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**,
+используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение.
+
+По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`.
+**Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Button contentLeft={<IconDownload />} />
+
+            <Button contentLeft={<IconDownload />} pin="circle-circle" />
+        </div>
+    );
+}
+```
+
+### Гиперссылка
+Компонент поддерживает вывод в виде тега `<a>`, для этого необходимо указать свойство `as`:
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <Button as="a" text="Гиперссылка" />
+    );
+}
+```