@salutejs/plasma-new-hope 0.256.0-canary.1744.13133525292.0 → 0.257.0-canary.1736.13142936948.0

package/styled-components/cjs/examples/plasma_web/components/Tokens/Tokens.styles.js

@@ -16,7 +16,7 @@ var Category = exports.Category = /*#__PURE__*/_styledComponents["default"].h2.w
 })(["margin:0 0 1.125rem 1.5rem;", ";"], _mixins.h2);
 var AccordionInfo = exports.AccordionInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-2"
-})(["display:grid;grid-template-columns:18rem 7.938rem 2.375rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
+})(["display:grid;grid-template-columns:18rem 7.938rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
 var Subcategory = exports.Subcategory = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-3"
 })(["color:var(--text-secondary);"]);
@@ -34,7 +34,7 @@ var OpacityPart = exports.OpacityPart = /*#__PURE__*/_styledComponents["default"
 })(["color:var(--text-secondary);padding-left:0.125rem;"]);
 var TokenInfo = exports.TokenInfo = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-8"
-})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.no-interaction{text-align:right;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
+})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.opacity{text-align:right;}&:not(.opacity):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.opacity):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
 var ColorCircle = exports.ColorCircle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-9"
 })(["width:1.25rem;height:1.25rem;border-radius:50%;background:", ";box-shadow:", ";"], function (props) {

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

@@ -3,6 +3,7 @@ export var classes = {
   fixedStretching: 'accordion-stretching-fixed',
   accordionRoot: 'accordion-root',
   accordionItem: 'accordion-item',
+  accordionItemOpened: 'accordion-item-opened',
   clearAccordionItem: 'clear-accordion-item',
   accordionItemShowBody: 'accordion-item-show-body',
   accordionPlusAnimationElement: 'accordion-plus-animation-element',
@@ -14,11 +15,13 @@ export var tokens = {
   accordionWidth: '--plasma-accordion-width',
   accordionBackground: '--plasma-accordion-background',
   accordionItemBackground: '--plasma-accordion-item-background',
+  accordionItemShadow: '--plasma-accordion-item-shadow',
   accordionItemBorderRadius: '--plasma-accordion-item-border-radius',
   accordionItemPadding: '--plasma-accordion-item-padding',
   accordionItemPaddingVertical: '--plasma-accordion-item-padding-vertical',
   accordionItemPaddingHorizontal: '--plasma-accordion-item-padding-horizontal',
   accordionItemPaddingHorizontalLeft: '--plasma-accordion-item-padding-horizontal-left',
+  accordionItemBodyPaddingBottom: '--plasma-accordion-item-body-padding-bottom',
   accordionItemGap: '--plasma-accordion-item-gap',
   accordionItemFocus: '--plasma-accordion-item-focus',
   accordionItemBorder: '--plasma-accordion-item-border',
@@ -29,6 +32,7 @@ export var tokens = {
   accordionItemHeaderLeftGapDefault: '--plasma-accordion-item-header-left-gap-default',
   accordionItemHeaderLeftGapClear: '--plasma-accordion-item-header-left-gap-clear',
   accordionItemTitleColor: '--plasma-accordion-item-title-color',
+  accordionItemOpenedTitleColor: '--plasma-accordion-item-title-opened-color',
   accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
   accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',
   accordionItemTitleFontStyle: '--plasma-accordion-item-title-font-style',

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js

@@ -74,6 +74,7 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
     }));
   };
   var accordionBorderRadius = convertRoundnessMatrix(pin, "var(".concat(tokens.accordionItemBorderRadius, ")"), '1.5rem');
+  var openedClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemOpened : '';
   var disabledClass = disabled ? classes.accordionDisabled : '';
   var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? /*#__PURE__*/React.createElement(StyledArrow, {
     size: "xs",
@@ -84,7 +85,7 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
   var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
   return /*#__PURE__*/React.createElement(StyledAccordionItem, {
-    className: cx(classes.accordionItem, className, disabledClass),
+    className: cx(classes.accordionItem, className, openedClass, disabledClass),
     key: key,
     ref: outerRef,
     style: _objectSpread({

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -2,11 +2,8 @@ import styled from 'styled-components';
 import { IconChevronDownFill, IconMinus } from '../../../_Icon';
 import { classes, tokens } from '../../Accordion.tokens';
 import { addFocus } from '../../../../mixins';
-export var StyledAccordionItem = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-0"
-})(["background:var(", ");border:var(", ");border-bottom:var(", ");&:last-child{border-bottom:var(", ");}&.", "{opacity:0.4;cursor:not-allowed;}"], tokens.accordionItemBackground, tokens.accordionItemBorder, tokens.accordionItemBorderBottom, tokens.accordionItemBorder, classes.accordionDisabled);
 export var StyledAccordionHeader = /*#__PURE__*/styled.button.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-1"
+  componentId: "plasma-new-hope__sc-20ij9z-0"
 })(["width:100%;border:none;padding:var(", ");display:flex;gap:var(", ");justify-content:space-between;align-items:center;background:none;box-sizing:border-box;cursor:pointer;&:focus{outline:none;}", ""], tokens.accordionItemPadding, tokens.accordionItemGap, /*#__PURE__*/addFocus({
   outlineOffset: '0.125rem',
   outlineSize: '0.125rem',
@@ -14,29 +11,32 @@ export var StyledAccordionHeader = /*#__PURE__*/styled.button.withConfig({
   outlineColor: /*#__PURE__*/"var(".concat(tokens.accordionItemFocus, ")")
 }));
 export var StyledAccordionHeaderLeft = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-2"
+  componentId: "plasma-new-hope__sc-20ij9z-1"
 })(["display:flex;gap:var(", ",var(", "));justify-content:space-between;align-items:center;"], tokens.accordionItemHeaderLeftGap, tokens.accordionItemGap);
 export var StyledAccordionContentRight = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-3"
+  componentId: "plasma-new-hope__sc-20ij9z-2"
 })(["transition:0.2s;transform:rotate(90deg);&.", "{transition:0.2s;transform:rotate(0deg);}"], classes.accordionItemShowBody);
 export var StyledAccordionContentLeft = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-4"
+  componentId: "plasma-new-hope__sc-20ij9z-3"
 })(["transition:0.2s;display:flex;align-items:center;&.", "{transition:0.2s;transform:rotate(180deg);}"], classes.accordionItemShowBody);
 export var StyledAccordionTitle = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-5"
+  componentId: "plasma-new-hope__sc-20ij9z-4"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], tokens.accordionItemTitleColor, tokens.accordionItemTitleFontFamily, tokens.accordionItemTitleFontSize, tokens.accordionItemTitleFontWeight, tokens.accordionItemTitleFontStyle, tokens.accordionItemTitleLetterSpacing, tokens.accordionItemTitleLineHeight);
 export var StyledAccordionBodyAnimate = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-6"
-})(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", "{grid-template-rows:1fr;padding-bottom:var(", ");&.", "{transition:0.2s;transform:rotate(0deg);}}"], classes.accordionItemShowBody, tokens.accordionItemPaddingVertical, classes.accordionPlusAnimationElement);
+  componentId: "plasma-new-hope__sc-20ij9z-5"
+})(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", "{grid-template-rows:1fr;padding-bottom:var(", ",var(", "));&.", "{transition:0.2s;transform:rotate(0deg);}}"], classes.accordionItemShowBody, tokens.accordionItemBodyPaddingBottom, tokens.accordionItemPaddingVertical, classes.accordionPlusAnimationElement);
 export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-7"
+  componentId: "plasma-new-hope__sc-20ij9z-6"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-8"
+  componentId: "plasma-new-hope__sc-20ij9z-7"
 })(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
 export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-9"
-})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
+  componentId: "plasma-new-hope__sc-20ij9z-8"
+})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);color:var(", ",var(", "));}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor);
 export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-20ij9z-9"
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], tokens.accordionItemIconSize, tokens.accordionItemIconSize);
+export var StyledAccordionItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-10"
-})(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], tokens.accordionItemIconSize, tokens.accordionItemIconSize);
+})(["background:var(", ");border:var(", ");border-bottom:var(", ");box-shadow:var(", ");&:last-child{border-bottom:var(", ");}&.", "{opacity:0.4;cursor:not-allowed;}&.", "{", "{color:var(", ",var(", "));}", "{color:var(", ",var(", "));}}"], tokens.accordionItemBackground, tokens.accordionItemBorder, tokens.accordionItemBorderBottom, tokens.accordionItemShadow, tokens.accordionItemBorder, classes.accordionDisabled, classes.accordionItemOpened, StyledArrow, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor, StyledAccordionTitle, tokens.accordionItemOpenedTitleColor, tokens.accordionItemTitleColor);

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

@@ -60,6 +60,8 @@ export var tokens = {
   contentLabelInnerPadding: '--plasma-date-picker-placement_inner__content-padding',
   /** Токены вспомогательного текста */
   leftHelperColor: '--plasma-date-picker__left-helper-color',
+  leftHelperColorError: '--plasma-date-picker__left-helper-color-error',
+  leftHelperColorSuccess: '--plasma-date-picker__left-helper-color-success',
   leftHelperColorReadOnly: '--plasma-date-picker__left-helper-color-readonly',
   leftHelperOffset: '--plasma-date-picker__left-helper-offset',
   leftHelperFontFamily: '--plasma-date-picker__left-helper-font-family',

package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js

@@ -162,6 +162,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState18 = _slicedToArray(_useState17, 2),
       secondTextFieldClicked = _useState18[0],
       setSecondTextFieldClicked = _useState18[1];
+    var rangeErrorClass = firstValueError || secondValueError ? classes.datePickerError : undefined;
+    var rangeSuccessClass = firstValueSuccess || secondValueSuccess ? classes.datePickerSuccess : undefined;
     var setFirstInputValue = function setFirstInputValue(value) {
       setInputFirstValue(value);
       if (onChange) {
@@ -449,7 +451,9 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       rootWrapper: RootWrapper,
       onChangeStartOfRange: handleChangeStartOfRange,
       onChangeValue: handleChangeCalendarValue
-    }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
+    }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+      className: cx(rangeErrorClass, rangeSuccessClass)
+    }, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
       name: name,
       type: "hidden",
       datatype: "datepicker-double",

package/styled-components/es/components/DatePicker/RangeDate/RangeDate.styles.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { component, mergeConfig } from '../../../engines';
 import { rangeConfig, rangeTokens } from '../../Range';
-import { tokens } from '../DatePicker.tokens';
+import { classes, tokens } from '../DatePicker.tokens';
 import { popoverConfig } from '../../Popover';
 var mergedRangeConfig = /*#__PURE__*/mergeConfig(rangeConfig);
 var Range = /*#__PURE__*/component(mergedRangeConfig);
@@ -19,4 +19,4 @@ export var StyledRange = /*#__PURE__*/styled(Range).withConfig({
 export var base = /*#__PURE__*/css(["display:inline-block;"]);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-14j95rs-2"
-})([""]);
+})(["color:var(", ");&.", "{color:var(", ");}&.", "{color:var(", ");}"], tokens.leftHelperColor, classes.datePickerError, tokens.leftHelperColorError, classes.datePickerSuccess, tokens.leftHelperColorSuccess);

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -231,7 +231,9 @@ export var datePickerRoot = function datePickerRoot(Root) {
       onChangeValue: function onChangeValue(date, dateInfo) {
         return handleCommitDate(date, false, true, dateInfo);
       }
-    }))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
+    }))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+      className: cx(datePickerErrorClass, datePickerSuccessClass)
+    }, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
       type: "hidden",
       datatype: "datepicker-single",
       name: name,

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.styles.js

@@ -19,4 +19,4 @@ export var StyledInput = /*#__PURE__*/styled(TextField).withConfig({
 export var base = /*#__PURE__*/css(["display:inline-block;.", ",.", "{width:inherit;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ye0xbz-2"
-})([""]);
+})(["color:var(", ");&.", "{color:var(", ");}&.", "{color:var(", ");}"], tokens.leftHelperColor, classes.datePickerError, tokens.leftHelperColorError, classes.datePickerSuccess, tokens.leftHelperColorSuccess);

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

@@ -134,7 +134,9 @@ export var rangeRoot = function rangeRoot(Root) {
       onFocus: onFocusSecondTextfield,
       onBlur: onBlurSecondTextfield,
       autoComplete: autoComplete
-    }), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper));
+    }), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+      className: cx(rangeErrorClass, firstValueErrorClass, secondValueErrorClass, rangeSuccessClass, firstValueSuccessClass, secondValueSuccessClass)
+    }, leftHelper));
   });
 };
 export var rangeConfig = {

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

@@ -52,6 +52,8 @@ export var tokens = {
   leftHelperColor: '--plasma-range__left-helper-color',
   leftHelperColorReadOnly: '--plasma-range__left-helper-color-readonly',
   leftHelperOffset: '--plasma-range__left-helper-offset',
+  leftHelperColorError: '--plasma-range__left-helper-color-error',
+  leftHelperColorSuccess: '--plasma-range__left-helper-color-success',
   leftHelperFontFamily: '--plasma-range__left-helper-font-family',
   leftHelperFontStyle: '--plasma-range__left-helper-font-style',
   leftHelperFontSize: '--plasma-range__left-helper-font-size',

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../Range.tokens';
 import { StyledLabel, LeftHelper, StyledDivider, ContentWrapper, StyledIndicator } from '../../Range.styles';
-export var base = /*#__PURE__*/css(["", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}", "{color:var(", ");}", "{display:block;color:var(", ");}", "{background-color:var(", ");}", "{color:var(", ");}"], ContentWrapper, tokens.background, tokens.borderWidth, tokens.borderColor, classes.rangeError, tokens.backgroundError, tokens.borderWidth, tokens.borderColorError, classes.rangeSuccess, tokens.backgroundSuccess, tokens.borderWidth, tokens.borderColorSuccess, StyledDivider, tokens.dividerColor, StyledLabel, tokens.labelColor, StyledIndicator, tokens.indicatorColor, LeftHelper, tokens.leftHelperColor);
+export var base = /*#__PURE__*/css(["", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}", "{color:var(", ");}", "{display:block;color:var(", ");}", "{background-color:var(", ");}", "{color:var(", ");&.", ",&.", "{color:var(", ");}&.", ",&.", "{color:var(", ");}}"], ContentWrapper, tokens.background, tokens.borderWidth, tokens.borderColor, classes.rangeError, tokens.backgroundError, tokens.borderWidth, tokens.borderColorError, classes.rangeSuccess, tokens.backgroundSuccess, tokens.borderWidth, tokens.borderColorSuccess, StyledDivider, tokens.dividerColor, StyledLabel, tokens.labelColor, StyledIndicator, tokens.indicatorColor, LeftHelper, tokens.leftHelperColor, classes.rangeError, classes.rangeValueError, tokens.leftHelperColorError, classes.rangeSuccess, classes.rangeValueSuccess, tokens.leftHelperColorSuccess);

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-negative);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":", ";", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarHeaderArrowColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
+      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-negative);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":", ";", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.leftHelperColorError, tokens.leftHelperColorSuccess, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarHeaderArrowColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
     },
     size: {
       l: /*#__PURE__*/css(["", ":26.5rem;", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0.75rem;", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.875rem;", ":26.5rem;", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.75rem;", ":11.75rem;", ":10.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.063rem;", ":0.875rem 1rem 0 1rem;", ":0.5rem;", ":0 0 0 1rem;", ":0.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-bold-font-weight);", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;"], tokens.width, tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.calendarBorderRadius, tokens.calendarWidth, tokens.calendarYearsPadding, tokens.calendarYearItemBorderRadius, tokens.calendarYearItemWidth, tokens.calendarYearItemHeight, tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearFontWeight, tokens.calendarYearSelectedFontWeight, tokens.calendarMonthsPadding, tokens.calendarMonthItemBorderRadius, tokens.calendarMonthItemWidth, tokens.calendarMonthItemHeight, tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthFontWeight, tokens.calendarMonthSelectedFontWeight, tokens.calendarQuartersPadding, tokens.calendarQuarterItemBorderRadius, tokens.calendarQuarterItemWidth, tokens.calendarQuarterItemHeight, tokens.calendarQuarterFontFamily, tokens.calendarQuarterFontSize, tokens.calendarQuarterFontStyle, tokens.calendarQuarterFontLetterSpacing, tokens.calendarQuarterFontLineHeight, tokens.calendarQuarterFontWeight, tokens.calendarQuarterSelectedFontWeight, tokens.calendarDaysPadding, tokens.calendarDayItemBorderRadius, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayFontWeight, tokens.calendarDaySelectedFontWeight, tokens.calendarCurrentItemBorderWidth, tokens.calendarHeaderWrapperPadding, tokens.calendarHeaderArrowGap, tokens.calendarHeaderPadding, tokens.calendarHeaderDateGap, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderFontWeight, tokens.calendarHeaderFontWeightBold, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonRadius),

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

@@ -61,6 +61,7 @@ const meta: Meta = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-negative);", ":var(--text-accent);", ":var(--text-tertiary);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.indicatorColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus)
+      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-negative);", ":var(--text-accent);", ":var(--text-tertiary);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.leftHelperColorError, tokens.leftHelperColorSuccess, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.indicatorColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus)
     },
     size: {
       l: /*#__PURE__*/css(["", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight),

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

@@ -47,6 +47,7 @@ const meta: Meta<typeof Range> = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

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

@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
 
     return (
         <>
-            {Object.entries(groupedTokens).map(([category, subcategoties]) => (
+            {Object.entries(groupedTokens).map(([category, value]) => (
                 <CategoryContainer key={category}>
                     <Category>{category}</Category>
                     <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
-                        {Object.entries(subcategoties).map(([subcategory, subcategoryTokens], index) => (
+                        {Object.entries(value).map(([subcategory, value2], index) => (
                             <StyledAccordionItem
                                 key={subcategory}
                                 eventKey={index}
@@ -85,37 +85,31 @@ const StoryDemo = ({ context }) => {
                                             <ColorCircle disableShadow />
                                             Color
                                         </ColumnTitle>
-                                        <ColumnTitle>Tone</ColumnTitle>
                                         <ColumnTitle>Opacity</ColumnTitle>
                                     </AccordionInfo>
                                 }
                             >
                                 <TokenInfoWrapper>
-                                    {Object.entries(subcategoryTokens).map(
-                                        ([token, { value, opacity, tone, colorName }]) => (
-                                            <AccordionInfo key={token}>
-                                                <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
-                                                    {token}
-                                                </TokenInfo>
-                                                <TokenInfo
-                                                    className="color copy"
-                                                    onClick={() => copyToClipboard(value, opacity?.alpha)}
-                                                >
-                                                    <ColorCircle background={value} />
-                                                    <div>
-                                                        {value.includes('gradient') ? 'Градиент' : colorName || value}
-                                                        {!colorName && opacity && (
-                                                            <OpacityPart>{opacity.alpha}</OpacityPart>
-                                                        )}
-                                                    </div>
-                                                </TokenInfo>
-                                                <TokenInfo className="no-interaction">
-                                                    {tone !== 'none' && tone}
-                                                </TokenInfo>
-                                                <TokenInfo className="no-interaction">{opacity?.parsedAlpha}</TokenInfo>
-                                            </AccordionInfo>
-                                        ),
-                                    )}
+                                    {Object.entries(value2).map(([token, { value: value3, opacity }]) => (
+                                        <AccordionInfo key={token}>
+                                            <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
+                                                {token}
+                                            </TokenInfo>
+                                            <TokenInfo
+                                                className="color copy"
+                                                onClick={() => copyToClipboard(value3, opacity?.alpha)}
+                                            >
+                                                <ColorCircle background={value3} />
+                                                <div>
+                                                    {value3.includes('gradient') ? 'Градиент' : value3}
+                                                    {opacity && <OpacityPart>{opacity.alpha}</OpacityPart>}
+                                                </div>
+                                            </TokenInfo>
+                                            {opacity && (
+                                                <TokenInfo className="opacity">{opacity.parsedAlpha}</TokenInfo>
+                                            )}
+                                        </AccordionInfo>
+                                    ))}
                                 </TokenInfoWrapper>
                             </StyledAccordionItem>
                         ))}

package/styled-components/es/examples/plasma_b2c/components/Tokens/Tokens.styles.js

@@ -9,7 +9,7 @@ export var Category = /*#__PURE__*/styled.h2.withConfig({
 })(["margin:0 0 1.125rem 1.5rem;", ";"], h2);
 export var AccordionInfo = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-2"
-})(["display:grid;grid-template-columns:18rem 7.938rem 2.375rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
+})(["display:grid;grid-template-columns:18rem 7.938rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
 export var Subcategory = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-3"
 })(["color:var(--text-secondary);"]);
@@ -27,7 +27,7 @@ export var OpacityPart = /*#__PURE__*/styled.span.withConfig({
 })(["color:var(--text-secondary);padding-left:0.125rem;"]);
 export var TokenInfo = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-8"
-})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.no-interaction{text-align:right;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
+})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.opacity{text-align:right;}&:not(.opacity):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.opacity):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
 export var ColorCircle = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-19i9718-9"
 })(["width:1.25rem;height:1.25rem;border-radius:50%;background:", ";box-shadow:", ";"], function (props) {

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--surface-negative);", ":var(--surface-positive);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":", ";", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.borderColor, tokens.borderColorError, tokens.borderColorSuccess, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorColor, tokens.textFieldBorderColorFocus, tokens.textFieldBorderColorError, tokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccessFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarHeaderArrowColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
+      "default": /*#__PURE__*/css(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--surface-negative);", ":var(--surface-positive);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":", ";", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.borderColor, tokens.borderColorError, tokens.borderColorSuccess, tokens.borderColorHover, tokens.borderColorFocus, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.leftHelperColorError, tokens.leftHelperColorSuccess, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorColor, tokens.textFieldBorderColorFocus, tokens.textFieldBorderColorError, tokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccessFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarHeaderArrowColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
     },
     size: {
       l: /*#__PURE__*/css(["", ":26.5rem;", ":0.875rem;", ":0.0625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0.75rem;", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":3.5rem;", ":0.875rem;", ":0.0625rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.875rem;", ":0.875rem ", ":26.5rem;", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.75rem;", ":11.75rem;", ":10.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.063rem;", ":0.875rem 1rem 0 1rem;", ":0.5rem;", ":0 0 0 1rem;", ":0.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-bold-font-weight);", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;"], tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.calendarBorderRadius, tokens.calendarPaddingTop, tokens.calendarWidth, tokens.calendarYearsPadding, tokens.calendarYearItemBorderRadius, tokens.calendarYearItemWidth, tokens.calendarYearItemHeight, tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearFontWeight, tokens.calendarYearSelectedFontWeight, tokens.calendarQuartersPadding, tokens.calendarQuarterItemBorderRadius, tokens.calendarQuarterItemWidth, tokens.calendarQuarterItemHeight, tokens.calendarQuarterFontFamily, tokens.calendarQuarterFontSize, tokens.calendarQuarterFontStyle, tokens.calendarQuarterFontLetterSpacing, tokens.calendarQuarterFontLineHeight, tokens.calendarQuarterFontWeight, tokens.calendarQuarterSelectedFontWeight, tokens.calendarMonthsPadding, tokens.calendarMonthItemBorderRadius, tokens.calendarMonthItemWidth, tokens.calendarMonthItemHeight, tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthFontWeight, tokens.calendarMonthSelectedFontWeight, tokens.calendarDaysPadding, tokens.calendarDayItemBorderRadius, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayFontWeight, tokens.calendarDaySelectedFontWeight, tokens.calendarCurrentItemBorderWidth, tokens.calendarHeaderWrapperPadding, tokens.calendarHeaderArrowGap, tokens.calendarHeaderPadding, tokens.calendarHeaderDateGap, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderFontWeight, tokens.calendarHeaderFontWeightBold, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonRadius),

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

@@ -61,6 +61,7 @@ const meta: Meta = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--surface-negative);", ":var(--surface-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-accent);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-negative);", ":var(--text-accent);", ":var(--text-tertiary);"], tokens.background, tokens.borderColor, tokens.borderColorError, tokens.borderColorSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBorderColorFocus, tokens.textFieldBorderColorError, tokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccessFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.indicatorColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus)
+      "default": /*#__PURE__*/css(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--surface-negative);", ":var(--surface-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-accent);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-negative);", ":var(--text-accent);", ":var(--text-tertiary);"], tokens.background, tokens.borderColor, tokens.borderColorError, tokens.borderColorSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.leftHelperColorError, tokens.leftHelperColorSuccess, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBorderColorFocus, tokens.textFieldBorderColorError, tokens.textFieldBorderColorErrorFocus, tokens.textFieldBorderColorSuccess, tokens.textFieldBorderColorSuccessFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.indicatorColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus)
     },
     size: {
       l: /*#__PURE__*/css(["", ":0.875rem;", ":0.0625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":0.0625rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], tokens.borderRadius, tokens.borderWidth, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight),

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

@@ -47,6 +47,7 @@ const meta: Meta<typeof Range> = {
             },
             if: { arg: 'required', truthy: true },
         },
+        ...disableProps(['view']),
     },
 };
 

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

@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
 
     return (
         <>
-            {Object.entries(groupedTokens).map(([category, subcategoties]) => (
+            {Object.entries(groupedTokens).map(([category, value]) => (
                 <CategoryContainer key={category}>
                     <Category>{category}</Category>
                     <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
-                        {Object.entries(subcategoties).map(([subcategory, subcategoryTokens], index) => (
+                        {Object.entries(value).map(([subcategory, value2], index) => (
                             <StyledAccordionItem
                                 key={subcategory}
                                 eventKey={index}
@@ -85,37 +85,31 @@ const StoryDemo = ({ context }) => {
                                             <ColorCircle disableShadow />
                                             Color
                                         </ColumnTitle>
-                                        <ColumnTitle>Tone</ColumnTitle>
                                         <ColumnTitle>Opacity</ColumnTitle>
                                     </AccordionInfo>
                                 }
                             >
                                 <TokenInfoWrapper>
-                                    {Object.entries(subcategoryTokens).map(
-                                        ([token, { value, opacity, tone, colorName }]) => (
-                                            <AccordionInfo key={token}>
-                                                <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
-                                                    {token}
-                                                </TokenInfo>
-                                                <TokenInfo
-                                                    className="color copy"
-                                                    onClick={() => copyToClipboard(value, opacity?.alpha)}
-                                                >
-                                                    <ColorCircle background={value} />
-                                                    <div>
-                                                        {value.includes('gradient') ? 'Градиент' : colorName || value}
-                                                        {!colorName && opacity && (
-                                                            <OpacityPart>{opacity.alpha}</OpacityPart>
-                                                        )}
-                                                    </div>
-                                                </TokenInfo>
-                                                <TokenInfo className="no-interaction">
-                                                    {tone !== 'none' && tone}
-                                                </TokenInfo>
-                                                <TokenInfo className="no-interaction">{opacity?.parsedAlpha}</TokenInfo>
-                                            </AccordionInfo>
-                                        ),
-                                    )}
+                                    {Object.entries(value2).map(([token, { value: value3, opacity }]) => (
+                                        <AccordionInfo key={token}>
+                                            <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
+                                                {token}
+                                            </TokenInfo>
+                                            <TokenInfo
+                                                className="color copy"
+                                                onClick={() => copyToClipboard(value3, opacity?.alpha)}
+                                            >
+                                                <ColorCircle background={value3} />
+                                                <div>
+                                                    {value3.includes('gradient') ? 'Градиент' : value3}
+                                                    {opacity && <OpacityPart>{opacity.alpha}</OpacityPart>}
+                                                </div>
+                                            </TokenInfo>
+                                            {opacity && (
+                                                <TokenInfo className="opacity">{opacity.parsedAlpha}</TokenInfo>
+                                            )}
+                                        </AccordionInfo>
+                                    ))}
                                 </TokenInfoWrapper>
                             </StyledAccordionItem>
                         ))}

package/styled-components/es/examples/plasma_web/components/Tokens/Tokens.styles.js

@@ -9,7 +9,7 @@ export var Category = /*#__PURE__*/styled.h2.withConfig({
 })(["margin:0 0 1.125rem 1.5rem;", ";"], h2);
 export var AccordionInfo = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-2"
-})(["display:grid;grid-template-columns:18rem 7.938rem 2.375rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
+})(["display:grid;grid-template-columns:18rem 7.938rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
 export var Subcategory = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-3"
 })(["color:var(--text-secondary);"]);
@@ -27,7 +27,7 @@ export var OpacityPart = /*#__PURE__*/styled.span.withConfig({
 })(["color:var(--text-secondary);padding-left:0.125rem;"]);
 export var TokenInfo = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-8"
-})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.no-interaction{text-align:right;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
+})(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.opacity{text-align:right;}&:not(.opacity):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.opacity):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
 export var ColorCircle = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ptu1dv-9"
 })(["width:1.25rem;height:1.25rem;border-radius:50%;background:", ";box-shadow:", ";"], function (props) {