@salutejs/plasma-new-hope 0.152.0-canary.1451.11029152908.0 → 0.152.0-dev.0

package/emotion/es/components/TextArea/TextArea.tokens.js

@@ -16,10 +16,7 @@ export var classes = {
   /** Класс для компонента `StyledHelpers` */
   styledHelpers: 'textarea-helpers',
   innerLabelPlacement: 'label-placement-inner',
-  outerLabelPlacement: 'label-placement-outer',
-  /** Класс для view `clear` */
-  clear: 'textfield-clear',
-  hasDivider: 'hasDivider'
+  outerLabelPlacement: 'label-placement-outer'
 };
 export var tokens = {
   /** Цвет фона для элемента textarea */
@@ -48,14 +45,12 @@ export var tokens = {
   helpersBackgroundColorFocus: '--plasma-textarea-helpers-background-color-focus',
   /** Цвет текста для элемента textarea */
   inputColor: '--plasma-textarea-input-color',
-  clearInputColor: '--plasma-textarea-input-clear-color',
   /** Цвет текста для элемента textarea в состоянии focus */
   inputColorFocus: '--plasma-textarea-input-color-focus',
   /** Цвет каретки для элемента textarea */
   inputCaretColor: '--plasma-textarea-input-caret-color',
   /** Цвет элемента placeholder */
   placeholderColor: '--plasma-textarea-placeholder-color',
-  clearPlaceholderColor: '--plasma-textfield__clear-placeholder-color',
   /** Цвет элемента placeholder в состоянии focus */
   placeholderColorFocus: '--plasma-textarea-placeholder-color-focus',
   /** Цвет элемента optional */
@@ -96,7 +91,6 @@ export var tokens = {
   inputPaddingLeft: '--plasma-textarea-input-padding-left',
   /** Отступ сверху для блока подписей */
   helpersPaddingTop: '--plasma-textarea-helpers-padding-top',
-  clearHelpersPaddingTop: '--plasma-textarea-clear-helpers-padding-top',
   /** Отступ справа для блока подписей */
   helpersPaddingRight: '--plasma-textarea-helpers-padding-right',
   /** Отступ снизу для блока подписей */
@@ -127,7 +121,6 @@ export var tokens = {
   labelOuterLineHeight: '--plasma-textarea-label-outer-line-height',
   /** Отступ сверху для элемента label, когда он внутри и уменьшен */
   labelMarginBottom: '--plasma-textarea-label-margin-bottom',
-  clearLabelMarginBottom: '--plasma-textarea-clear-label-margin-bottom',
   /** Шрифт для элемента label, когда он внутри и уменьшен */
   labelInnerFontFamily: '--plasma-textarea-label-inner-font-family',
   /** Размер шрифта для элемента label, когда он внутри и уменьшен */
@@ -179,9 +172,5 @@ export var tokens = {
   indicatorLabelPlacementInner: '--plasma-textarea-indicator-placement-inner',
   indicatorLabelPlacementOuter: '--plasma-textarea-indicator-placement-outer',
   indicatorLabelPlacementInnerRight: '--plasma-textarea-indicator-placement-inner-right',
-  indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right',
-  dividerColor: '--plasma-textfield-divider-color',
-  dividerColorHover: '--plasma-textfield-divider-color-hover',
-  dividerColorFocus: '--plasma-textfield-divider-color-focus',
-  dividerColorReadOnly: '--plasma-textfield-divider-color-readonly'
+  indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
 };

package/emotion/es/components/TextArea/variations/_view/base.js

@@ -3,5 +3,5 @@ import { tokens, classes } from '../../TextArea.tokens';
 var styledContainer = classes.styledContainer,
   styledTextAreaWrapper = classes.styledTextAreaWrapper,
   styledHelpers = classes.styledHelpers;
-var exclusionSelectors = /*#__PURE__*/"not(.".concat(classes.clear, "):not([disabled]):not([readonly]):not(:focus-within)");
-export var base = /*#__PURE__*/css(".", /*#__PURE__*/String(styledContainer), "{transition:box-shadow 0.1s ease-in-out;border-radius:var(", tokens.borderRadius, ");border:var(", tokens.borderSize, ") solid var(", tokens.borderColor, ");}.", /*#__PURE__*/String(styledTextAreaWrapper), "{transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;box-shadow:inset 0 0 0 var(", tokens.borderSize, ", 1px) var(", tokens.inputBorderColor, ");}&:focus-within:not([readonly]) .", /*#__PURE__*/String(styledTextAreaWrapper), "{background-color:var(", tokens.inputBackgroundColorFocus, ");box-shadow:inset 0 0 0 var(", tokens.borderSize, ", 1px) var(", tokens.inputBorderColorFocus, ");}&:focus-within:not([readonly]) .", /*#__PURE__*/String(styledContainer), "{border:var(", tokens.borderSize, ") solid var(", tokens.borderColorFocus, ");}&:focus-within:not([readonly]) .", /*#__PURE__*/String(styledHelpers), "{background-color:var(", tokens.helpersBackgroundColorFocus, ");}&:hover:", exclusionSelectors, " .", /*#__PURE__*/String(styledContainer), "{border:var(", tokens.borderSize, ") solid var(", tokens.borderColorHover, ");}&:hover:", exclusionSelectors, " .", /*#__PURE__*/String(styledTextAreaWrapper), "{box-shadow:inset 0 0 0 var(", tokens.borderSize, ", 1px) var(", tokens.inputBorderColorHover, ");background-color:var(", tokens.inputBackgroundColorHover, ");}&:hover:", exclusionSelectors, " .", /*#__PURE__*/String(styledTextAreaWrapper), "+.", /*#__PURE__*/String(styledHelpers), "{background-color:var(", tokens.helpersBackgroundColorHover, ");}&:active:", exclusionSelectors, " .", /*#__PURE__*/String(styledTextAreaWrapper), "{box-shadow:inset 0 0 0 var(", tokens.borderSize, ", 1px) var(", tokens.inputBorderColorActive, ");background-color:var(", tokens.inputBackgroundColorActive, ");}&:active:", exclusionSelectors, " .", /*#__PURE__*/String(styledTextAreaWrapper), "+.", /*#__PURE__*/String(styledHelpers), "{background-color:var(", tokens.helpersBackgroundColorActive, ");};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVGV4dEFyZWEvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVF1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1RleHRBcmVhL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgdG9rZW5zLCBjbGFzc2VzIH0gZnJvbSAnLi4vLi4vVGV4dEFyZWEudG9rZW5zJztcblxuY29uc3QgeyBzdHlsZWRDb250YWluZXIsIHN0eWxlZFRleHRBcmVhV3JhcHBlciwgc3R5bGVkSGVscGVycyB9ID0gY2xhc3NlcztcblxuY29uc3QgZXhjbHVzaW9uU2VsZWN0b3JzID0gYG5vdCguJHtjbGFzc2VzLmNsZWFyfSk6bm90KFtkaXNhYmxlZF0pOm5vdChbcmVhZG9ubHldKTpub3QoOmZvY3VzLXdpdGhpbilgO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICAuJHtTdHJpbmcoc3R5bGVkQ29udGFpbmVyKX0ge1xuICAgICAgICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuMXMgZWFzZS1pbi1vdXQ7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KTtcbiAgICAgICAgYm9yZGVyOiB2YXIoJHt0b2tlbnMuYm9yZGVyU2l6ZX0pIHNvbGlkIHZhcigke3Rva2Vucy5ib3JkZXJDb2xvcn0pO1xuICAgIH1cblxuICAgIC4ke1N0cmluZyhzdHlsZWRUZXh0QXJlYVdyYXBwZXIpfSB7XG4gICAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4xcyBlYXNlLWluLW91dCwgYm94LXNoYWRvdyAwLjFzIGVhc2UtaW4tb3V0O1xuICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCB2YXIoJHt0b2tlbnMuYm9yZGVyU2l6ZX0sIDFweCkgdmFyKCR7dG9rZW5zLmlucHV0Qm9yZGVyQ29sb3J9KTtcbiAgICB9XG5cbiAgICAmOmZvY3VzLXdpdGhpbjpub3QoW3JlYWRvbmx5XSkgLiR7U3RyaW5nKHN0eWxlZFRleHRBcmVhV3JhcHBlcil9IHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmlucHV0QmFja2dyb3VuZENvbG9yRm9jdXN9KTtcbiAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmJvcmRlclNpemV9LCAxcHgpIHZhcigke3Rva2Vucy5pbnB1dEJvcmRlckNvbG9yRm9jdXN9KTtcbiAgICB9XG5cbiAgICAmOmZvY3VzLXdpdGhpbjpub3QoW3JlYWRvbmx5XSkgLiR7U3RyaW5nKHN0eWxlZENvbnRhaW5lcil9IHtcbiAgICAgICAgYm9yZGVyOiB2YXIoJHt0b2tlbnMuYm9yZGVyU2l6ZX0pIHNvbGlkIHZhcigke3Rva2Vucy5ib3JkZXJDb2xvckZvY3VzfSk7XG4gICAgfVxuXG4gICAgJjpmb2N1cy13aXRoaW46bm90KFtyZWFkb25seV0pIC4ke1N0cmluZyhzdHlsZWRIZWxwZXJzKX0ge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMuaGVscGVyc0JhY2tncm91bmRDb2xvckZvY3VzfSk7XG4gICAgfVxuXG4gICAgJjpob3Zlcjoke2V4Y2x1c2lvblNlbGVjdG9yc30gLiR7U3RyaW5nKHN0eWxlZENvbnRhaW5lcil9IHtcbiAgICAgICAgYm9yZGVyOiB2YXIoJHt0b2tlbnMuYm9yZGVyU2l6ZX0pIHNvbGlkIHZhcigke3Rva2Vucy5ib3JkZXJDb2xvckhvdmVyfSk7XG4gICAgfVxuXG4gICAgJjpob3Zlcjoke2V4Y2x1c2lvblNlbGVjdG9yc30gLiR7U3RyaW5nKHN0eWxlZFRleHRBcmVhV3JhcHBlcil9IHtcbiAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmJvcmRlclNpemV9LCAxcHgpIHZhcigke3Rva2Vucy5pbnB1dEJvcmRlckNvbG9ySG92ZXJ9KTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmlucHV0QmFja2dyb3VuZENvbG9ySG92ZXJ9KTtcbiAgICB9XG5cbiAgICAmOmhvdmVyOiR7ZXhjbHVzaW9uU2VsZWN0b3JzfSAuJHtTdHJpbmcoc3R5bGVkVGV4dEFyZWFXcmFwcGVyKX0gKyAuJHtTdHJpbmcoc3R5bGVkSGVscGVycyl9IHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmhlbHBlcnNCYWNrZ3JvdW5kQ29sb3JIb3Zlcn0pO1xuICAgIH1cblxuICAgICY6YWN0aXZlOiR7ZXhjbHVzaW9uU2VsZWN0b3JzfSAuJHtTdHJpbmcoc3R5bGVkVGV4dEFyZWFXcmFwcGVyKX0ge1xuICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCB2YXIoJHt0b2tlbnMuYm9yZGVyU2l6ZX0sIDFweCkgdmFyKCR7dG9rZW5zLmlucHV0Qm9yZGVyQ29sb3JBY3RpdmV9KTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmlucHV0QmFja2dyb3VuZENvbG9yQWN0aXZlfSk7XG4gICAgfVxuXG4gICAgJjphY3RpdmU6JHtleGNsdXNpb25TZWxlY3RvcnN9IC4ke1N0cmluZyhzdHlsZWRUZXh0QXJlYVdyYXBwZXIpfSArIC4ke1N0cmluZyhzdHlsZWRIZWxwZXJzKX0ge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMuaGVscGVyc0JhY2tncm91bmRDb2xvckFjdGl2ZX0pO1xuICAgIH1cbmA7XG4iXX0= */"));
+var exclusionSelectors = 'not([disabled]):not([readonly]):not(:focus-within)';
+export var base = /*#__PURE__*/css(".", /*#__PURE__*/String(styledContainer), "{transition:box-shadow 0.1s ease-in-out;border-radius:var(", tokens.borderRadius, ");border:var(", tokens.borderSize, ") solid var(", tokens.borderColor, ");}.", /*#__PURE__*/String(styledTextAreaWrapper), "{transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;box-shadow:inset 0 0 0 var(", tokens.borderSize, ", 1px) var(", tokens.inputBorderColor, ");}&:focus-within:not([readonly]) .", /*#__PURE__*/String(styledTextAreaWrapper), "{background-color:var(", tokens.inputBackgroundColorFocus, ");box-shadow:inset 0 0 0 var(", tokens.borderSize, ", 1px) var(", tokens.inputBorderColorFocus, ");}&:focus-within:not([readonly]) .", /*#__PURE__*/String(styledContainer), "{border:var(", tokens.borderSize, ") solid var(", tokens.borderColorFocus, ");}&:focus-within:not([readonly]) .", /*#__PURE__*/String(styledHelpers), "{background-color:var(", tokens.helpersBackgroundColorFocus, ");}&:hover:", exclusionSelectors, " .", /*#__PURE__*/String(styledContainer), "{border:var(", tokens.borderSize, ") solid var(", tokens.borderColorHover, ");}&:hover:", exclusionSelectors, " .", /*#__PURE__*/String(styledTextAreaWrapper), "{box-shadow:inset 0 0 0 var(", tokens.borderSize, ", 1px) var(", tokens.inputBorderColorHover, ");background-color:var(", tokens.inputBackgroundColorHover, ");}&:hover:", exclusionSelectors, " .", /*#__PURE__*/String(styledTextAreaWrapper), "+.", /*#__PURE__*/String(styledHelpers), "{background-color:var(", tokens.helpersBackgroundColorHover, ");}&:active:", exclusionSelectors, " .", /*#__PURE__*/String(styledTextAreaWrapper), "{box-shadow:inset 0 0 0 var(", tokens.borderSize, ", 1px) var(", tokens.inputBorderColorActive, ");background-color:var(", tokens.inputBackgroundColorActive, ");}&:active:", exclusionSelectors, " .", /*#__PURE__*/String(styledTextAreaWrapper), "+.", /*#__PURE__*/String(styledHelpers), "{background-color:var(", tokens.helpersBackgroundColorActive, ");};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVGV4dEFyZWEvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVF1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1RleHRBcmVhL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgdG9rZW5zLCBjbGFzc2VzIH0gZnJvbSAnLi4vLi4vVGV4dEFyZWEudG9rZW5zJztcblxuY29uc3QgeyBzdHlsZWRDb250YWluZXIsIHN0eWxlZFRleHRBcmVhV3JhcHBlciwgc3R5bGVkSGVscGVycyB9ID0gY2xhc3NlcztcblxuY29uc3QgZXhjbHVzaW9uU2VsZWN0b3JzID0gJ25vdChbZGlzYWJsZWRdKTpub3QoW3JlYWRvbmx5XSk6bm90KDpmb2N1cy13aXRoaW4pJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgLiR7U3RyaW5nKHN0eWxlZENvbnRhaW5lcil9IHtcbiAgICAgICAgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjFzIGVhc2UtaW4tb3V0O1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSk7XG4gICAgICAgIGJvcmRlcjogdmFyKCR7dG9rZW5zLmJvcmRlclNpemV9KSBzb2xpZCB2YXIoJHt0b2tlbnMuYm9yZGVyQ29sb3J9KTtcbiAgICB9XG5cbiAgICAuJHtTdHJpbmcoc3R5bGVkVGV4dEFyZWFXcmFwcGVyKX0ge1xuICAgICAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuMXMgZWFzZS1pbi1vdXQsIGJveC1zaGFkb3cgMC4xcyBlYXNlLWluLW91dDtcbiAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmJvcmRlclNpemV9LCAxcHgpIHZhcigke3Rva2Vucy5pbnB1dEJvcmRlckNvbG9yfSk7XG4gICAgfVxuXG4gICAgJjpmb2N1cy13aXRoaW46bm90KFtyZWFkb25seV0pIC4ke1N0cmluZyhzdHlsZWRUZXh0QXJlYVdyYXBwZXIpfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pbnB1dEJhY2tncm91bmRDb2xvckZvY3VzfSk7XG4gICAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIHZhcigke3Rva2Vucy5ib3JkZXJTaXplfSwgMXB4KSB2YXIoJHt0b2tlbnMuaW5wdXRCb3JkZXJDb2xvckZvY3VzfSk7XG4gICAgfVxuXG4gICAgJjpmb2N1cy13aXRoaW46bm90KFtyZWFkb25seV0pIC4ke1N0cmluZyhzdHlsZWRDb250YWluZXIpfSB7XG4gICAgICAgIGJvcmRlcjogdmFyKCR7dG9rZW5zLmJvcmRlclNpemV9KSBzb2xpZCB2YXIoJHt0b2tlbnMuYm9yZGVyQ29sb3JGb2N1c30pO1xuICAgIH1cblxuICAgICY6Zm9jdXMtd2l0aGluOm5vdChbcmVhZG9ubHldKSAuJHtTdHJpbmcoc3R5bGVkSGVscGVycyl9IHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmhlbHBlcnNCYWNrZ3JvdW5kQ29sb3JGb2N1c30pO1xuICAgIH1cblxuICAgICY6aG92ZXI6JHtleGNsdXNpb25TZWxlY3RvcnN9IC4ke1N0cmluZyhzdHlsZWRDb250YWluZXIpfSB7XG4gICAgICAgIGJvcmRlcjogdmFyKCR7dG9rZW5zLmJvcmRlclNpemV9KSBzb2xpZCB2YXIoJHt0b2tlbnMuYm9yZGVyQ29sb3JIb3Zlcn0pO1xuICAgIH1cblxuICAgICY6aG92ZXI6JHtleGNsdXNpb25TZWxlY3RvcnN9IC4ke1N0cmluZyhzdHlsZWRUZXh0QXJlYVdyYXBwZXIpfSB7XG4gICAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIHZhcigke3Rva2Vucy5ib3JkZXJTaXplfSwgMXB4KSB2YXIoJHt0b2tlbnMuaW5wdXRCb3JkZXJDb2xvckhvdmVyfSk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pbnB1dEJhY2tncm91bmRDb2xvckhvdmVyfSk7XG4gICAgfVxuXG4gICAgJjpob3Zlcjoke2V4Y2x1c2lvblNlbGVjdG9yc30gLiR7U3RyaW5nKHN0eWxlZFRleHRBcmVhV3JhcHBlcil9ICsgLiR7U3RyaW5nKHN0eWxlZEhlbHBlcnMpfSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5oZWxwZXJzQmFja2dyb3VuZENvbG9ySG92ZXJ9KTtcbiAgICB9XG5cbiAgICAmOmFjdGl2ZToke2V4Y2x1c2lvblNlbGVjdG9yc30gLiR7U3RyaW5nKHN0eWxlZFRleHRBcmVhV3JhcHBlcil9IHtcbiAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmJvcmRlclNpemV9LCAxcHgpIHZhcigke3Rva2Vucy5pbnB1dEJvcmRlckNvbG9yQWN0aXZlfSk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pbnB1dEJhY2tncm91bmRDb2xvckFjdGl2ZX0pO1xuICAgIH1cblxuICAgICY6YWN0aXZlOiR7ZXhjbHVzaW9uU2VsZWN0b3JzfSAuJHtTdHJpbmcoc3R5bGVkVGV4dEFyZWFXcmFwcGVyKX0gKyAuJHtTdHJpbmcoc3R5bGVkSGVscGVycyl9IHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmhlbHBlcnNCYWNrZ3JvdW5kQ29sb3JBY3RpdmV9KTtcbiAgICB9XG5gO1xuIl19 */"));

package/emotion/es/examples/plasma_b2c/components/ChipGroup /ChipGroup.config.js

@@ -0,0 +1,27 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@linaria/core';
+import { chipGroupTokens as tokens } from '../../../../components/ChipGroup';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default-hover);\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default-active);\n            "])), tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive),
+      secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary-hover);\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary-active);\n            "])), tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive),
+      accent: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent-hover);\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent-active);\n            "])), tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive)
+    },
+    size: {
+      l: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.75rem;\n                ", ": auto;\n                ", ": 3rem;\n                ", ": 1rem;\n                ", ": 1rem;\n\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n\n                ", ": -0.125rem;\n                ", ": 0.5rem;\n                ", ": 0.625rem;\n                ", ": -0.25rem;\n\n                ", ": 1.02;\n                ", ": 0.98;\n\n                ", ": 1.5rem;\n            "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize),
+      m: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.625rem;\n                ", ": auto;\n                ", ": 2.5rem;\n                ", ": 0.875rem;\n                ", ": 0.875rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": -0.125rem;\n                ", ": 0.375rem;\n                ", ": 0.5rem;\n                ", ": -0.25rem;\n\n                ", ": 1.02;\n                ", ": 0.98;\n\n                ", ": 1rem;\n            "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize),
+      s: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.5rem;\n                ", ": auto;\n                ", ": 2rem;\n                ", ": 0.875rem;\n                ", ": 0.875rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": -0.125rem;\n                ", ": 0.25rem;\n                ", ": 0.375rem;\n                ", ": -0.25rem;\n\n                ", ": 1.02;\n                ", ": 0.98;\n\n                ", ": 1rem;\n            "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize),
+      xs: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.375rem;\n                ", ": auto;\n                ", ": 1.5rem;\n                ", ": 0.625rem;\n                ", ": 0.625rem;\n\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n\n                ", ": -0.125rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n                ", ": -0.25rem;\n\n                ", ": 1.02;\n                ", ": 0.98;\n\n                ", ": 1rem;\n            "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize)
+    },
+    gap: {
+      dense: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n            "])), tokens.chipGroupItemsGap),
+      wide: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.5rem;\n            "])), tokens.chipGroupItemsGap)
+    }
+  }
+};

package/emotion/es/examples/plasma_b2c/components/ChipGroup /ChipGroup.js

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

package/emotion/es/examples/plasma_b2c/components/ChipGroup /ChipGroup.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+import { Chip } from '../Chip/Chip';
+
+import { ChipGroup } from './ChipGroup';
+
+type StoryProps = ComponentProps<typeof ChipGroup> & { itemsCount?: number };
+type Story = StoryObj<StoryProps>;
+
+const views = ['default', 'accent', 'secondary'];
+const sizes = ['l', 'm', 's', 'xs'];
+const gapValues = ['dense', 'wide'];
+
+const meta: Meta<typeof ChipGroup> = {
+    title: 'plasma_b2c/ChipGroup',
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: { type: 'select' },
+            if: { arg: 'isCommonChipStyles', truthy: true },
+        },
+        view: {
+            options: views,
+            control: { type: 'select' },
+            if: { arg: 'isCommonChipStyles', truthy: true },
+        },
+        gap: {
+            options: gapValues,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+export const Default: Story = {
+    args: {
+        itemsCount: 5,
+        gap: 'dense',
+        isWrapped: false,
+        view: 'default',
+        size: 'm',
+        isCommonChipStyles: true,
+    },
+    argTypes: {
+        ...disableProps(['isCommonChipStyles']),
+    },
+    render: ({ itemsCount, ...args }: StoryProps) => {
+        return (
+            <ChipGroup {...args}>
+                {Array(itemsCount)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Chip text={`Chip ${i}`} key={`chip_${i}`} hasClear={false} />
+                    ))}
+            </ChipGroup>
+        );
+    },
+};
+
+export const CustomChips: Story = {
+    args: {
+        ...Default.args,
+        isCommonChipStyles: false,
+    },
+    argTypes: {
+        ...disableProps(['itemsCount']),
+    },
+    render: (args: StoryProps) => {
+        return (
+            <>
+                <h3>Группа Chip с разными темами</h3>
+                <ChipGroup {...args}>
+                    <Chip text="Primary" view="default" hasClear={false} />
+                    <Chip text="Secondary" view="secondary" hasClear={false} />
+                    <Chip text="Accent" view="accent" hasClear={false} />
+                </ChipGroup>
+
+                <h3>Группа Chip с разными размерами</h3>
+                <ChipGroup {...args}>
+                    <Chip text="Primary" view="default" size="l" hasClear={false} />
+                    <Chip text="Secondary" view="secondary" size="m" hasClear={false} />
+                    <Chip text="Accent" view="accent" size="s" hasClear={false} />
+                </ChipGroup>
+            </>
+        );
+    },
+};