@salutejs/plasma-new-hope 0.315.0-dev.0 → 0.316.0-canary.1877.14207597686.0

package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.tokens.js

@@ -57,6 +57,8 @@ var tokens = exports.tokens = {
   checkboxFillColor: '--plasma-combobox-checkbox-fill-color',
   checkboxIconColor: '--plasma-combobox-checkbox-icon-color',
   checkboxTriggerBorderColor: '--plasma-combobox-checkbox-trigger-border-color',
+  checkboxTriggerBorderCheckedColor: '--plasma-combobox-checkbox-trigger-border-checked-color',
+  checkboxTriggerBorderWidth: '--plasma-combobox-checkbox-trigger-border-width',
   indicatorSize: '--plasma-combobox-indicator-size',
   // Токены для TextField
   textFieldColor: '--plasma-combobox-new-textfield-color',

package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.js

@@ -25,7 +25,7 @@ var StyledCell = exports.StyledCell = /*#__PURE__*/(0, _styledComponents["defaul
 })([""]);
 var StyledCheckbox = exports.StyledCheckbox = /*#__PURE__*/(0, _styledComponents["default"])(Checkbox).withConfig({
   componentId: "plasma-new-hope__sc-1n1xg1s-2"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Checkbox.checkboxTokens.triggerSize, _Combobox.tokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Combobox.tokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Combobox.tokens.checkboxFillColor, _Checkbox.checkboxTokens.iconColor, _Combobox.tokens.checkboxIconColor, _Checkbox.checkboxTokens.triggerBorderColor, _Combobox.tokens.checkboxTriggerBorderColor);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Checkbox.checkboxTokens.triggerSize, _Combobox.tokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Combobox.tokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Combobox.tokens.checkboxFillColor, _Checkbox.checkboxTokens.iconColor, _Combobox.tokens.checkboxIconColor, _Checkbox.checkboxTokens.triggerBorderColor, _Combobox.tokens.checkboxTriggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor, _Combobox.tokens.checkboxTriggerBorderCheckedColor, _Checkbox.checkboxTokens.triggerBorderWidth, _Combobox.tokens.checkboxTriggerBorderWidth);
 var mergedIndicatorConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Indicator.indicatorConfig);
 var Indicator = /*#__PURE__*/(0, _engines.component)(mergedIndicatorConfig);
 var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/(0, _styledComponents["default"])(Indicator).withConfig({

package/styled-components/cjs/components/Radiobox/Radiobox.styles.js

@@ -12,7 +12,7 @@ var _Radiobox = /*#__PURE__*/require("./Radiobox.tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 // NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
-var mappingOverride = /*#__PURE__*/"\n    ".concat(_Checkbox.checkboxTokens.labelFontFamily, ": var(").concat(_Radiobox.tokens.labelFontFamily, ");\n    ").concat(_Checkbox.checkboxTokens.labelFontSize, ": var(").concat(_Radiobox.tokens.labelFontSize, ");\n    ").concat(_Checkbox.checkboxTokens.labelFontStyle, ": var(").concat(_Radiobox.tokens.labelFontStyle, ");\n    ").concat(_Checkbox.checkboxTokens.labelFontWeight, ": var(").concat(_Radiobox.tokens.labelFontWeight, ");\n    ").concat(_Checkbox.checkboxTokens.labelLetterSpacing, ": var(").concat(_Radiobox.tokens.labelLetterSpacing, ");\n    ").concat(_Checkbox.checkboxTokens.labelLineHeight, ": var(").concat(_Radiobox.tokens.labelLineHeight, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionMarginTop, ": var(").concat(_Radiobox.tokens.descriptionMarginTop, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionFontFamily, ": var(").concat(_Radiobox.tokens.descriptionFontFamily, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionFontSize, ": var(").concat(_Radiobox.tokens.descriptionFontSize, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionFontStyle, ": var(").concat(_Radiobox.tokens.descriptionFontStyle, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionFontWeight, ": var(").concat(_Radiobox.tokens.descriptionFontWeight, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionLetterSpacing, ": var(").concat(_Radiobox.tokens.descriptionLetterSpacing, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionLineHeight, ": var(").concat(_Radiobox.tokens.descriptionLineHeight, ");\n\n    ").concat(_Checkbox.checkboxTokens.fillColor, ": var(").concat(_Radiobox.tokens.fillColor, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionColor, ": var(").concat(_Radiobox.tokens.descriptionColor, ");\n    ").concat(_Checkbox.checkboxTokens.triggerBorderColor, ": var(").concat(_Radiobox.tokens.triggerBorderColor, ");\n    ").concat(_Checkbox.checkboxTokens.triggerBackgroundColor, ": var(").concat(_Radiobox.tokens.triggerBackgroundColor, ");\n\n    ").concat(_Checkbox.checkboxTokens.contentTopOffset, ": var(").concat(_Radiobox.tokens.contentTopOffset, ");\n    ").concat(_Checkbox.checkboxTokens.contentLeftOffset, ": var(").concat(_Radiobox.tokens.contentLeftOffset, ");\n    ").concat(_Checkbox.checkboxTokens.triggerSize, ": var(").concat(_Radiobox.tokens.triggerSize, ");\n    ").concat(_Checkbox.checkboxTokens.triggerBorderRadius, ": var(").concat(_Radiobox.tokens.triggerBorderRadius, ");\n    ").concat(_Checkbox.checkboxTokens.triggerPadding, ": var(").concat(_Radiobox.tokens.triggerPadding, ");\n");
+var mappingOverride = /*#__PURE__*/"\n    ".concat(_Checkbox.checkboxTokens.labelFontFamily, ": var(").concat(_Radiobox.tokens.labelFontFamily, ");\n    ").concat(_Checkbox.checkboxTokens.labelFontSize, ": var(").concat(_Radiobox.tokens.labelFontSize, ");\n    ").concat(_Checkbox.checkboxTokens.labelFontStyle, ": var(").concat(_Radiobox.tokens.labelFontStyle, ");\n    ").concat(_Checkbox.checkboxTokens.labelFontWeight, ": var(").concat(_Radiobox.tokens.labelFontWeight, ");\n    ").concat(_Checkbox.checkboxTokens.labelLetterSpacing, ": var(").concat(_Radiobox.tokens.labelLetterSpacing, ");\n    ").concat(_Checkbox.checkboxTokens.labelLineHeight, ": var(").concat(_Radiobox.tokens.labelLineHeight, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionMarginTop, ": var(").concat(_Radiobox.tokens.descriptionMarginTop, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionFontFamily, ": var(").concat(_Radiobox.tokens.descriptionFontFamily, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionFontSize, ": var(").concat(_Radiobox.tokens.descriptionFontSize, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionFontStyle, ": var(").concat(_Radiobox.tokens.descriptionFontStyle, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionFontWeight, ": var(").concat(_Radiobox.tokens.descriptionFontWeight, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionLetterSpacing, ": var(").concat(_Radiobox.tokens.descriptionLetterSpacing, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionLineHeight, ": var(").concat(_Radiobox.tokens.descriptionLineHeight, ");\n\n    ").concat(_Checkbox.checkboxTokens.fillColor, ": var(").concat(_Radiobox.tokens.fillColor, ");\n    ").concat(_Checkbox.checkboxTokens.descriptionColor, ": var(").concat(_Radiobox.tokens.descriptionColor, ");\n    ").concat(_Checkbox.checkboxTokens.triggerBorderWidth, ": var(").concat(_Radiobox.tokens.triggerBorderWidth, ");\n    ").concat(_Checkbox.checkboxTokens.triggerBorderColor, ": var(").concat(_Radiobox.tokens.triggerBorderColor, ");\n    ").concat(_Checkbox.checkboxTokens.triggerBorderCheckedColor, ": var(").concat(_Radiobox.tokens.triggerBorderCheckedColor, ");\n    ").concat(_Checkbox.checkboxTokens.triggerBackgroundColor, ": var(").concat(_Radiobox.tokens.triggerBackgroundColor, ");\n\n    ").concat(_Checkbox.checkboxTokens.contentTopOffset, ": var(").concat(_Radiobox.tokens.contentTopOffset, ");\n    ").concat(_Checkbox.checkboxTokens.contentLeftOffset, ": var(").concat(_Radiobox.tokens.contentLeftOffset, ");\n    ").concat(_Checkbox.checkboxTokens.triggerSize, ": var(").concat(_Radiobox.tokens.triggerSize, ");\n    ").concat(_Checkbox.checkboxTokens.triggerBorderRadius, ": var(").concat(_Radiobox.tokens.triggerBorderRadius, ");\n    ").concat(_Checkbox.checkboxTokens.triggerPadding, ": var(").concat(_Radiobox.tokens.triggerPadding, ");\n");
 var StyledEllipse = exports.StyledEllipse = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-rqiilp-0"
 })(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseColor);

package/styled-components/cjs/components/Radiobox/Radiobox.tokens.js

@@ -25,7 +25,9 @@ var tokens = exports.tokens = {
   descriptionLineHeight: '--plasma-radiobox-description-line-height',
   fillColor: '--plasma-radiobox-fill-color',
   descriptionColor: '--plasma-radiobox-description-color',
+  triggerBorderWidth: '--plasma-checkbox-trigger-border-width',
   triggerBorderColor: '--plasma-radiobox-trigger-border-color',
+  triggerBorderCheckedColor: '--plasma-checkbox-trigger-border-checked-color',
   triggerBackgroundColor: '--plasma-radiobox-trigger-background-color',
   contentTopOffset: '--plasma-radiobox-content-top-offset',
   contentLeftOffset: '--plasma-radiobox-content-left-offset',

package/styled-components/cjs/components/Radiobox/variations/_view/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Radiobox = /*#__PURE__*/require("../../Radiobox.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["input:checked + label .", "{border:none;background:var(", ");border-color:var(", ");}"], _Radiobox.classes.radioboxTrigger, _Radiobox.tokens.fillColor, _Radiobox.tokens.fillColor);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["input:checked + label .", "{background:var(", ");border-color:var(", ");}"], _Radiobox.classes.radioboxTrigger, _Radiobox.tokens.fillColor, _Radiobox.tokens.triggerBorderCheckedColor);

package/styled-components/cjs/components/Select/Select.tokens.js

@@ -55,6 +55,8 @@ var tokens = exports.tokens = {
   checkboxFillColor: '--plasma-select-checkbox-fill-color',
   checkboxIconColor: '--plasma-select-checkbox-icon-color',
   checkboxTriggerBorderColor: '--plasma-select-checkbox-trigger-border-color',
+  checkboxTriggerBorderCheckedColor: '--plasma-select-checkbox-trigger-border-checked-color',
+  checkboxTriggerBorderWidth: '--plasma-select-checkbox-trigger-border-width',
   indicatorSize: '--plasma-select-indicator-size',
   targetHeight: '--plasma-select-target-height',
   // Токены для Button

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -27,7 +27,7 @@ var StyledCell = exports.StyledCell = /*#__PURE__*/(0, _styledComponents["defaul
 })([""]);
 var StyledCheckbox = exports.StyledCheckbox = /*#__PURE__*/(0, _styledComponents["default"])(Checkbox).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-2"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Checkbox.checkboxTokens.triggerSize, _Select.tokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Select.tokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Select.tokens.checkboxFillColor, _Checkbox.checkboxTokens.iconColor, _Select.tokens.checkboxIconColor, _Checkbox.checkboxTokens.triggerBorderColor, _Select.tokens.checkboxTriggerBorderColor);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Checkbox.checkboxTokens.triggerSize, _Select.tokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Select.tokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Select.tokens.checkboxFillColor, _Checkbox.checkboxTokens.iconColor, _Select.tokens.checkboxIconColor, _Checkbox.checkboxTokens.triggerBorderWidth, _Select.tokens.checkboxTriggerBorderWidth, _Checkbox.checkboxTokens.triggerBorderColor, _Select.tokens.checkboxTriggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor, _Select.tokens.checkboxTriggerBorderCheckedColor);
 var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/(0, _styledComponents["default"])(Indicator).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-3"
 })(["", ":var(", ");", ":var(", ");"], _Indicator.indicatorTokens.size, _Select.tokens.indicatorSize, _Indicator.indicatorTokens.color, _Select.tokens.checkboxFillColor);

package/styled-components/cjs/components/TextArea/TextArea.js

@@ -262,6 +262,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       hintView: hintView,
       hintSize: hintSize
     }), (hasOuterLabel || titleCaption) && /*#__PURE__*/_react["default"].createElement(_TextArea.OuterLabelWrapper, {
+      width: helperWidth,
       isInnerLabel: labelPlacement === 'inner'
     }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicatorWrapper, null, /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, label), hintText && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledHintWrapper, null, /*#__PURE__*/_react["default"].createElement(_Hint.HintComponent, {
       ref: hintForkRef,

package/styled-components/cjs/components/TextArea/TextArea.styles.js

@@ -17,8 +17,11 @@ var Hint = exports.Hint = /*#__PURE__*/(0, _styledComponents["default"])(Tooltip
 })([""]);
 var OuterLabelWrapper = exports.OuterLabelWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-1"
-})(["display:flex;align-items:center;margin-bottom:", ";"], function (_ref) {
-  var isInnerLabel = _ref.isInnerLabel;
+})(["display:flex;align-items:center;max-width:", ";margin-bottom:", ";"], function (_ref) {
+  var width = _ref.width;
+  return width;
+}, function (_ref2) {
+  var isInnerLabel = _ref2.isInnerLabel;
   return isInnerLabel ? "var(".concat(_TextArea.tokens.titleCaptionInnerLabelOffset, ")") : "var(".concat(_TextArea.tokens.labelMarginBottom, ")");
 });
 var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -32,23 +35,23 @@ var StyledIndicatorWrapper = exports.StyledIndicatorWrapper = /*#__PURE__*/_styl
 })(["position:relative;display:inline-flex;align-items:center;"]);
 var StyledOptionalText = exports.StyledOptionalText = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-5"
-})(["color:var(", ");font-family:", ";font-size:", ";font-style:", ";font-weight:", ";letter-spacing:", ";line-height:", ";"], _TextArea.tokens.optionalColor, function (_ref2) {
-  var inheritFont = _ref2.inheritFont;
-  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterFontFamily, ", var(").concat(_TextArea.tokens.inputFontFamily, "))");
-}, function (_ref3) {
+})(["color:var(", ");font-family:", ";font-size:", ";font-style:", ";font-weight:", ";letter-spacing:", ";line-height:", ";"], _TextArea.tokens.optionalColor, function (_ref3) {
   var inheritFont = _ref3.inheritFont;
-  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterFontSize, ", var(").concat(_TextArea.tokens.inputFontSize, "))");
+  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterFontFamily, ", var(").concat(_TextArea.tokens.inputFontFamily, "))");
 }, function (_ref4) {
   var inheritFont = _ref4.inheritFont;
-  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterFontStyle, ", var(").concat(_TextArea.tokens.inputFontStyle, "))");
+  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterFontSize, ", var(").concat(_TextArea.tokens.inputFontSize, "))");
 }, function (_ref5) {
   var inheritFont = _ref5.inheritFont;
-  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterFontWeight, ", var(").concat(_TextArea.tokens.inputFontWeight, "))");
+  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterFontStyle, ", var(").concat(_TextArea.tokens.inputFontStyle, "))");
 }, function (_ref6) {
   var inheritFont = _ref6.inheritFont;
-  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterLetterSpacing, ", var(").concat(_TextArea.tokens.inputLetterSpacing, "))");
+  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterFontWeight, ", var(").concat(_TextArea.tokens.inputFontWeight, "))");
 }, function (_ref7) {
   var inheritFont = _ref7.inheritFont;
+  return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterLetterSpacing, ", var(").concat(_TextArea.tokens.inputLetterSpacing, "))");
+}, function (_ref8) {
+  var inheritFont = _ref8.inheritFont;
   return inheritFont ? 'inherit' : "var(".concat(_TextArea.tokens.labelOuterLineHeight, ", var(").concat(_TextArea.tokens.inputLineHeight, "))");
 });
 var StyledHintWrapper = exports.StyledHintWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -62,11 +65,11 @@ var HintIconWrapper = exports.HintIconWrapper = /*#__PURE__*/_styledComponents["
 })([""]);
 var StyledTextAreaWrapper = exports.StyledTextAreaWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-9"
-})(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], _TextArea.tokens.inputBackgroundColor, _TextArea.tokens.inputPaddingTop, function (_ref8) {
-  var hasHelper = _ref8.hasHelper;
-  return hasHelper ? "var(".concat(_TextArea.tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(_TextArea.tokens.inputPaddingBottom, ")");
-}, function (_ref9) {
+})(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], _TextArea.tokens.inputBackgroundColor, _TextArea.tokens.inputPaddingTop, function (_ref9) {
   var hasHelper = _ref9.hasHelper;
+  return hasHelper ? "var(".concat(_TextArea.tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(_TextArea.tokens.inputPaddingBottom, ")");
+}, function (_ref10) {
+  var hasHelper = _ref10.hasHelper;
   return hasHelper ? "var(".concat(_TextArea.tokens.borderRadiusWithHelpers, ")") : "var(".concat(_TextArea.tokens.borderRadius, ")");
 });
 var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -74,45 +77,45 @@ var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["defa
 })(["position:absolute;display:flex;align-items:center;bottom:0;z-index:1;color:var(", ",var(", "));top:var(", ");right:var(", ");height:var(", ");"], _TextArea.tokens.rightContentColor, _TextArea.tokens.inputColor, _TextArea.tokens.rightContentTop, _TextArea.tokens.rightContentRight, _TextArea.tokens.rightContentHeight);
 var StyledContainer = exports.StyledContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-11"
-})(["display:inline-flex;flex-direction:column;width:", ";position:relative;"], function (_ref10) {
-  var width = _ref10.width;
+})(["display:inline-flex;flex-direction:column;width:", ";position:relative;"], function (_ref11) {
+  var width = _ref11.width;
   return width;
 });
 var StyledTextArea = exports.StyledTextArea = /*#__PURE__*/_styledComponents["default"].textarea.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-12"
-})(["display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(", ");caret-color:var(", ");resize:", ";--plasma_private-textarea-height:", ";--plasma_private-textarea-width:", ";--plasma_private-textarea-computed-height:", ";--plasma_private-textarea-computed-width:", ";height:var(--plasma_private-textarea-computed-height);width:var(--plasma_private-textarea-computed-width);min-width:", ";max-width:", ";min-height:var(", ");padding-right:", ";padding-left:var(", ",0);padding-top:0;padding-bottom:0;--plasma_private-textarea-helpers-computed-height:calc( var(", ",0) + var(", ",0) + var(", ") );--plasma_private-textarea-input-with-helpers-height:calc( var(--plasma_private-textarea-height) - var(--plasma_private-textarea-helpers-computed-height) + var(", ") );--plasma_private-textarea-input-without-helpers-height:calc( var(--plasma_private-textarea-computed-height) - var(", ") );--plasma_private-textarea-input-actual-height:", ";height:var(--plasma_private-textarea-input-actual-height);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&::placeholder{opacity:0;}&:read-only{cursor:default;}&:focus:not(:disabled){color:var(", ");}&::-webkit-scrollbar{width:var(", ");}&::-webkit-scrollbar-thumb{background-color:var(", ");background-clip:content-box;border:var(", ") solid transparent;border-radius:1rem;}&::-webkit-scrollbar-track{background-color:var(", ");background-clip:content-box;border:var(", ") solid transparent;border-radius:1rem;}"], _TextArea.tokens.inputColor, _TextArea.tokens.inputCaretColor, function (_ref11) {
-  var resize = _ref11.resize;
+})(["display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(", ");caret-color:var(", ");resize:", ";--plasma_private-textarea-height:", ";--plasma_private-textarea-width:", ";--plasma_private-textarea-computed-height:", ";--plasma_private-textarea-computed-width:", ";height:var(--plasma_private-textarea-computed-height);width:var(--plasma_private-textarea-computed-width);min-width:", ";max-width:", ";min-height:var(", ");padding-right:", ";padding-left:var(", ",0);padding-top:0;padding-bottom:0;--plasma_private-textarea-helpers-computed-height:calc( var(", ",0) + var(", ",0) + var(", ") );--plasma_private-textarea-input-with-helpers-height:calc( var(--plasma_private-textarea-height) - var(--plasma_private-textarea-helpers-computed-height) + var(", ") );--plasma_private-textarea-input-without-helpers-height:calc( var(--plasma_private-textarea-computed-height) - var(", ") );--plasma_private-textarea-input-actual-height:", ";height:var(--plasma_private-textarea-input-actual-height);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&::placeholder{opacity:0;}&:read-only{cursor:default;}&:focus:not(:disabled){color:var(", ");}&::-webkit-scrollbar{width:var(", ");}&::-webkit-scrollbar-thumb{background-color:var(", ");background-clip:content-box;border:var(", ") solid transparent;border-radius:1rem;}&::-webkit-scrollbar-track{background-color:var(", ");background-clip:content-box;border:var(", ") solid transparent;border-radius:1rem;}"], _TextArea.tokens.inputColor, _TextArea.tokens.inputCaretColor, function (_ref12) {
+  var resize = _ref12.resize;
   return resize || 'none';
-}, function (_ref12) {
-  var height = _ref12.height;
-  return !Number.isNaN(Number(height)) ? "calc(".concat(height, "rem - 0.875rem)") : height || "var(".concat(_TextArea.tokens.inputHeight, ")");
 }, function (_ref13) {
-  var width = _ref13.width;
-  return !Number.isNaN(Number(width)) ? "".concat(width, "rem") : width || "var(".concat(_TextArea.tokens.inputWidth, ")");
+  var height = _ref13.height;
+  return !Number.isNaN(Number(height)) ? "calc(".concat(height, "rem - 0.875rem)") : height || "var(".concat(_TextArea.tokens.inputHeight, ")");
 }, function (_ref14) {
-  var rows = _ref14.rows;
-  return rows ? 'unset' : 'var(--plasma_private-textarea-height)';
+  var width = _ref14.width;
+  return !Number.isNaN(Number(width)) ? "".concat(width, "rem") : width || "var(".concat(_TextArea.tokens.inputWidth, ")");
 }, function (_ref15) {
-  var cols = _ref15.cols;
-  return cols ? 'unset' : 'var(--plasma_private-textarea-width)';
+  var rows = _ref15.rows;
+  return rows ? 'unset' : 'var(--plasma_private-textarea-height)';
 }, function (_ref16) {
-  var applyCustomWidth = _ref16.applyCustomWidth;
-  return applyCustomWidth ? 'var(--plasma_private-textarea-width)' : 'auto';
+  var cols = _ref16.cols;
+  return cols ? 'unset' : 'var(--plasma_private-textarea-width)';
 }, function (_ref17) {
   var applyCustomWidth = _ref17.applyCustomWidth;
   return applyCustomWidth ? 'var(--plasma_private-textarea-width)' : 'auto';
-}, _TextArea.tokens.inputMinHeight, function (_ref18) {
-  var hasContentRight = _ref18.hasContentRight;
+}, function (_ref18) {
+  var applyCustomWidth = _ref18.applyCustomWidth;
+  return applyCustomWidth ? 'var(--plasma_private-textarea-width)' : 'auto';
+}, _TextArea.tokens.inputMinHeight, function (_ref19) {
+  var hasContentRight = _ref19.hasContentRight;
   return hasContentRight ? "var(".concat(_TextArea.tokens.inputPaddingRightWithRightContent, ", 0)") : "var(".concat(_TextArea.tokens.inputPaddingRight, ", 0)");
-}, _TextArea.tokens.inputPaddingLeft, _TextArea.tokens.helpersPaddingTop, _TextArea.tokens.helpersPaddingBottom, _TextArea.tokens.helpersLineHeight, _TextArea.tokens.helpersOffset, _TextArea.tokens.inputPaddingBottom, function (_ref19) {
-  var hasHelper = _ref19.hasHelper,
-    rows = _ref19.rows;
+}, _TextArea.tokens.inputPaddingLeft, _TextArea.tokens.helpersPaddingTop, _TextArea.tokens.helpersPaddingBottom, _TextArea.tokens.helpersLineHeight, _TextArea.tokens.helpersOffset, _TextArea.tokens.inputPaddingBottom, function (_ref20) {
+  var hasHelper = _ref20.hasHelper,
+    rows = _ref20.rows;
   return hasHelper && !rows ? 'var(--plasma_private-textarea-input-with-helpers-height)' : 'var(--plasma_private-textarea-input-without-helpers-height)';
 }, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight, _TextArea.tokens.inputColorFocus, _TextArea.tokens.scrollbarWidth, _TextArea.tokens.scrollbarThumbBackgroundColor, _TextArea.tokens.scrollbarBorderWidth, _TextArea.tokens.scrollbarTrackBackgroundColor, _TextArea.tokens.scrollbarBorderWidth);
 var StyledHiddenTextArea = exports.StyledHiddenTextArea = /*#__PURE__*/_styledComponents["default"].textarea.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-13"
-})(["max-height:none !important;min-height:var(", ") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:0.0625rem !important;border-width:0;padding-right:", ";padding-left:var(", ",0);padding-top:0;padding-bottom:0;box-sizing:border-box;text-indent:0;text-rendering:auto;text-transform:none;tab-size:8;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.inputMinHeight, function (_ref20) {
-  var hasContentRight = _ref20.hasContentRight;
+})(["max-height:none !important;min-height:var(", ") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:0.0625rem !important;border-width:0;padding-right:", ";padding-left:var(", ",0);padding-top:0;padding-bottom:0;box-sizing:border-box;text-indent:0;text-rendering:auto;text-transform:none;tab-size:8;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.inputMinHeight, function (_ref21) {
+  var hasContentRight = _ref21.hasContentRight;
   return hasContentRight ? "var(".concat(_TextArea.tokens.inputPaddingRightWithRightContent, ", 0)") : "var(".concat(_TextArea.tokens.inputPaddingRight, ", 0)");
 }, _TextArea.tokens.inputPaddingLeft, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
 var StyledHelpers = exports.StyledHelpers = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -129,8 +132,8 @@ var StyledRightHelper = exports.StyledRightHelper = /*#__PURE__*/(0, _styledComp
 })(["color:var(", ");margin-left:auto;"], _TextArea.tokens.rightHelperColor);
 var StyledPlaceholder = exports.StyledPlaceholder = /*#__PURE__*/_styledComponents["default"].label.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-18"
-})(["box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", ");width:100%;height:auto;top:var(", ");padding-left:var(", ");padding-right:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.placeholderColor, _TextArea.tokens.inputPaddingTop, _TextArea.tokens.inputPaddingLeft, function (_ref21) {
-  var hasContentRight = _ref21.hasContentRight;
+})(["box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", ");width:100%;height:auto;top:var(", ");padding-left:var(", ");padding-right:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.placeholderColor, _TextArea.tokens.inputPaddingTop, _TextArea.tokens.inputPaddingLeft, function (_ref22) {
+  var hasContentRight = _ref22.hasContentRight;
   return hasContentRight ? "var(".concat(_TextArea.tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(_TextArea.tokens.inputPaddingRight, ")");
 }, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
 var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({

package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js

@@ -15,28 +15,27 @@ var config = exports.config = {
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.0625rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerPadding, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerPadding, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight)
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.0625rem;", ":0.875rem;", ":0.25rem;", ":0.125rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerPadding, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.triggerBorderWidth, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerPadding, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.triggerBorderWidth, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-accent);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
       // deprecated
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":transparent;"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
       // deprecated
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":transparent;"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
       // deprecated
-      tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":transparent;"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
       // deprecated
-      paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":transparent;"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
       // deprecated
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":transparent;"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
       // deprecated
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
-      // deprecated
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor)
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":transparent;"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-negative);", ":transparent;"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Checkbox.checkboxTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.js

@@ -3,9 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Checkbox = void 0;
+exports.CheckboxOutline = exports.CheckboxDefalut = exports.Checkbox = void 0;
 var _Checkbox = /*#__PURE__*/require("../../../../components/Checkbox");
 var _engines = /*#__PURE__*/require("../../../../engines");
+var _createConditionalComponent = /*#__PURE__*/require("../../../../utils/createConditionalComponent");
 var _Checkbox2 = /*#__PURE__*/require("./Checkbox.config");
-var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Checkbox.checkboxConfig, _Checkbox2.config);
-var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var _CheckboxOutline = /*#__PURE__*/require("./Checkbox.outline.config");
+var mergedConfigDefault = /*#__PURE__*/(0, _engines.mergeConfig)(_Checkbox.checkboxConfig, _Checkbox2.config);
+var CheckboxDefalut = exports.CheckboxDefalut = /*#__PURE__*/(0, _engines.component)(mergedConfigDefault);
+var mergedConfigOutline = /*#__PURE__*/(0, _engines.mergeConfig)(_Checkbox.checkboxConfig, _CheckboxOutline.config);
+var CheckboxOutline = exports.CheckboxOutline = /*#__PURE__*/(0, _engines.component)(mergedConfigOutline);
+var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _createConditionalComponent.createConditionalComponent)(CheckboxDefalut, [{
+  conditions: {
+    prop: 'appearance',
+    value: 'outline'
+  },
+  component: CheckboxOutline
+}]);

package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.outline.config.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Checkbox = /*#__PURE__*/require("../../../../components/Checkbox");
+var config = exports.config = {
+  defaults: {
+    view: 'accent'
+  },
+  variations: {
+    /**
+     * Размер контрола.
+     */
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.0625rem;", ":0.875rem;", ":0.25rem;", ":0.0625rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerPadding, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.triggerBorderWidth, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.0625rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Checkbox.checkboxTokens.margin, _Checkbox.checkboxTokens.triggerPadding, _Checkbox.checkboxTokens.triggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Checkbox.checkboxTokens.triggerBorderWidth, _Checkbox.checkboxTokens.contentTopOffset, _Checkbox.checkboxTokens.contentLeftOffset, _Checkbox.checkboxTokens.labelFontFamily, _Checkbox.checkboxTokens.labelFontSize, _Checkbox.checkboxTokens.labelFontStyle, _Checkbox.checkboxTokens.labelFontWeight, _Checkbox.checkboxTokens.labelLetterSpacing, _Checkbox.checkboxTokens.labelLineHeight, _Checkbox.checkboxTokens.descriptionMarginTop, _Checkbox.checkboxTokens.descriptionFontFamily, _Checkbox.checkboxTokens.descriptionFontSize, _Checkbox.checkboxTokens.descriptionFontStyle, _Checkbox.checkboxTokens.descriptionFontWeight, _Checkbox.checkboxTokens.descriptionLetterSpacing, _Checkbox.checkboxTokens.descriptionLineHeight)
+    },
+    /**
+     * Вид контрола.
+     */
+    view: {
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--text-accent);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-accent);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
+      // deprecated
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-primary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
+      // deprecated
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
+      // deprecated
+      tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-tertiary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
+      // deprecated
+      paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--text-paragraph);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-paragraph);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
+      // deprecated
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-positive);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
+      // deprecated
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--text-warning);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);", ":var(--text-warning);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-negative);", ":var(--text-negative);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.labelColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor, _Checkbox.checkboxTokens.triggerBorderCheckedColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Checkbox.checkboxTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);"], _Checkbox.checkboxTokens.focusColor)
+    }
+  }
+};

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

@@ -18,7 +18,7 @@ const meta: Meta<typeof Checkbox> = {
     component: Checkbox,
     argTypes: {
         view: {
-            options: ['accent'],
+            options: ['accent', 'negative'],
             control: {
                 type: 'radio',
             },
@@ -29,12 +29,19 @@ const meta: Meta<typeof Checkbox> = {
                 type: 'radio',
             },
         },
+        appearance: {
+            options: ['default', 'outline'],
+            control: {
+                type: 'radio',
+            },
+        },
     },
     args: {
         view: 'accent',
         size: 'm',
         disabled: false,
         focused: true,
+        appearance: 'default',
     },
 };