@salutejs/plasma-new-hope 0.152.0-canary.1451.11029152908.0 → 0.153.0-canary.1446.11031564701.0

package/styled-components/cjs/components/ChipGroup/variations/_view/tokens.json

@@ -0,0 +1,15 @@
+[
+    "--plasma-chip-group-items-background",
+    "--plasma-chip-group-items-color",
+    "--plasma-chip-group-items-background-hover",
+    "--plasma-chip-group-items-color-hover",
+    "--plasma-chip-group-items-scale-hover",
+    "--plasma-chip-group-items-background-active",
+    "--plasma-chip-group-items-color-active",
+    "--plasma-chip-group-items-scale-active",
+    "--plasma-chip-group-items-focus-color",
+    "--plasma-chip-group-items-outline-size",
+    "--plasma-chip-group-items-close-icon-color",
+    "--plasma-chip-group-items-close-icon-color-hover",
+    "--plasma-chip-group-items-close-icon-color-active"
+]

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

@@ -45,6 +45,14 @@ type Items = Array<{
          * Слот для контента справа
          */
         contentRight?: ReactNode;
+        /**
+        * Отобразить ли разделитель до элемента
+        */
+        dividerBefore?: boolean;
+        /**
+        * Отобразить ли разделитель после элемента
+        */
+        dividerAfter?: boolean;
         /**
          * Выбранный item.
          * @deprecated использовать ContentLeft || ContentRight

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

@@ -20,6 +20,13 @@ var tokens = exports.tokens = {
   disclosureIconColor: '--plasma-dropdown-disclosure-icon-color',
   disabledOpacity: '--plasma-dropdown-disabled-opacity',
   focusColor: '--plasma-dropdown-focus-color',
+  dividerColor: '--plasma-dropdown-divider-color',
+  dividerMarginTop: '--plasma-dropdown-divider-margin-top',
+  dividerMarginTopTight: '--plasma-dropdown-divider-margin-top-tight',
+  dividerMarginRight: '--plasma-dropdown-divider-margin-right',
+  dividerMarginBottom: '--plasma-dropdown-divider-margin-bottom',
+  dividerMarginBottomTight: '--plasma-dropdown-divider-margin-bottom-tight',
+  dividerMarginLeft: '--plasma-dropdown-divider-margin-left',
   itemBackground: '--plasma-dropdown-item-background',
   itemBackgroundHover: '--plasma-dropdown-item-background-hover',
   itemBackgroundSelected: '--plasma-dropdown-item-background-selected',
@@ -99,13 +106,8 @@ var tokens = exports.tokens = {
   headerFontWeightBold: '--plasma-dropdown-header-letter-spacing',
   headerFontLetterSpacing: '--plasma-dropdown-header-line-height',
   headerFontLineHeight: '--plasma-dropdown-header-font-weight',
-  dividerColor: '--plasma-dropdown-divider-color',
   dividerWidth: '--plasma-dropdown-divider-width',
   dividerHeight: '--plasma-dropdown-divider-height',
-  dividerMarginTop: '--plasma-dropdown-divider-margin-top',
-  dividerMarginRight: '--plasma-dropdown-divider-margin-right',
-  dividerMarginBottom: '--plasma-dropdown-divider-margin-bottom',
-  dividerMarginLeft: '--plasma-dropdown-divider-margin-left',
   groupBackground: '--plasma-dropdown-group-background',
   groupWidth: '--plasma-dropdown-group-width',
   groupHeight: '--plasma-dropdown-group-height',

package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -37,7 +37,9 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
     disabled = item.disabled,
     isDisabled = item.isDisabled,
     contentLeft = item.contentLeft,
-    contentRight = item.contentRight;
+    contentRight = item.contentRight,
+    dividerBefore = item.dividerBefore,
+    dividerAfter = item.dividerAfter;
   var ref = (0, _react.useRef)(null);
   var disclosureIconSize = size === 'xs' ? 'xs' : 's';
   var isDisabledClassName = disabled || isDisabled ? _Dropdown.classes.dropdownItemIsDisabled : undefined;
@@ -71,7 +73,9 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
       onHover(index);
     }
   };
-  return /*#__PURE__*/_react["default"].createElement(_DropdownItem.Wrapper, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, dividerBefore && /*#__PURE__*/_react["default"].createElement(_DropdownItem.Divider, {
+    variant: variant
+  }), /*#__PURE__*/_react["default"].createElement(_DropdownItem.Wrapper, {
     className: (0, _utils.cx)(isDisabledClassName, focusedClass, activeClass),
     id: value.toString(),
     role: itemRole,
@@ -88,5 +92,7 @@ var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
   }, contentLeft && /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledText, null, label), contentRight && /*#__PURE__*/_react["default"].createElement(_DropdownItem.StyledContentRight, null, contentRight), item.items && hasArrow && /*#__PURE__*/_react["default"].createElement(_DropdownItem.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRight, {
     size: disclosureIconSize,
     color: "inherit"
-  })));
+  }))), dividerAfter && /*#__PURE__*/_react["default"].createElement(_DropdownItem.Divider, {
+    variant: variant
+  }));
 };

package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.StyledText = exports.StyledContentRight = exports.StyledContentLeft = exports.DisclosureIconWrapper = void 0;
+exports.Wrapper = exports.StyledText = exports.StyledContentRight = exports.StyledContentLeft = exports.Divider = exports.DisclosureIconWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Dropdown = /*#__PURE__*/require("../../Dropdown.tokens");
 var _mixins = /*#__PURE__*/require("../../../../mixins");
@@ -20,13 +20,22 @@ var DisclosureIconWrapper = exports.DisclosureIconWrapper = /*#__PURE__*/_styled
 var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-3"
 })(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
-var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
+var Divider = exports.Divider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-4"
-})(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref) {
+})(["height:1px;margin-top:", ";margin-right:var(", ");margin-bottom:", ";margin-left:var(", ");background:var(", ");"], function (_ref) {
   var variant = _ref.variant;
-  return "var(".concat(variant === 'tight' ? _Dropdown.tokens.itemPaddingTopTight : _Dropdown.tokens.itemPaddingTop, ")");
-}, _Dropdown.tokens.itemPaddingRight, function (_ref2) {
+  return "var(".concat(variant === 'tight' ? _Dropdown.tokens.dividerMarginTopTight : _Dropdown.tokens.dividerMarginTop, ")");
+}, _Dropdown.tokens.dividerMarginRight, function (_ref2) {
   var variant = _ref2.variant;
+  return "var(".concat(variant === 'tight' ? _Dropdown.tokens.dividerMarginBottomTight : _Dropdown.tokens.dividerMarginBottom, ")");
+}, _Dropdown.tokens.dividerMarginLeft, _Dropdown.tokens.dividerColor);
+var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
+  componentId: "plasma-new-hope__sc-hs0ek1-5"
+})(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref3) {
+  var variant = _ref3.variant;
+  return "var(".concat(variant === 'tight' ? _Dropdown.tokens.itemPaddingTopTight : _Dropdown.tokens.itemPaddingTop, ")");
+}, _Dropdown.tokens.itemPaddingRight, function (_ref4) {
+  var variant = _ref4.variant;
   return "var(".concat(variant === 'tight' ? _Dropdown.tokens.itemPaddingBottomTight : _Dropdown.tokens.itemPaddingBottom, ")");
 }, _Dropdown.tokens.itemPaddingLeft, _Dropdown.tokens.itemFontFamily, _Dropdown.tokens.itemFontSize, _Dropdown.tokens.itemFontStyle, _Dropdown.tokens.itemFontWeightBold, _Dropdown.tokens.itemFontLetterSpacing, _Dropdown.tokens.itemFontLineHeight, _Dropdown.tokens.itemBackground, _Dropdown.tokens.itemColor, _Dropdown.tokens.itemBorderRadius, _Dropdown.classes.dropdownItemIsDisabled, _Dropdown.tokens.itemBackgroundHover, _Dropdown.classes.dropdownItemIsActive, _Dropdown.tokens.itemBackgroundHover, _Dropdown.classes.dropdownItemIsDisabled, _Dropdown.tokens.disabledOpacity, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.0625rem',

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

@@ -15,9 +15,8 @@ var _TextArea = /*#__PURE__*/require("./TextArea.styles");
 var _TextArea2 = /*#__PURE__*/require("./TextArea.tokens");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
-var _base3 = /*#__PURE__*/require("./variations/_clear/base");
-var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
-var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "clear", "hasDivider", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
+var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
+var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -62,6 +61,7 @@ var getDynamicLabelClasses = exports.getDynamicLabelClasses = function getDynami
   var readOnly = props.readOnly,
     label = props.label,
     labelPlacement = props.labelPlacement,
+    autoResize = props.autoResize,
     rows = props.rows,
     value = props.value,
     size = props.size;
@@ -70,10 +70,10 @@ var getDynamicLabelClasses = exports.getDynamicLabelClasses = function getDynami
   var withFocusedOuterUpPlaceholder = !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;
 
   // Добавить класс отвечающий за поднятие и уменьшение плейсхолдера
-  var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
+  var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
 
   // Добавить класс отвечающий за скрытие плейсхолдера
-  var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && rows || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
+  var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
   return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];
 };
 var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
@@ -104,8 +104,6 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       requiredPlacement = _props$requiredPlacem === void 0 ? 'right' : _props$requiredPlacem,
       _props$optional = props.optional,
       optional = _props$optional === void 0 ? false : _props$optional,
-      clear = props.clear,
-      hasDivider = props.hasDivider,
       size = props.size,
       view = props.view,
       id = props.id,
@@ -138,8 +136,6 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
     var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
     var placeholderLabel = hasInnerLabel ? label : placeholder;
-    var clearClass = clear ? _TextArea2.classes.clear : undefined;
-    var hasDividerClass = hasDivider ? _TextArea2.classes.hasDivider : undefined;
     var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
     (0, _plasmaCore.useResizeObserver)(outerRef, function (currentElement) {
       var inlineWidth = currentElement.style.width;
@@ -149,7 +145,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
         setHelperWidth("".concat(elementWidth / _hooks.ROOT_FONT_SIZE, "rem"));
       }
     });
-    (0, _hooks.useAutoResize)(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
+    (0, _hooks.useAutoResize)(autoResize, outerRef, value, minAuto, maxAuto);
     var onFocusHandler = (0, _react.useCallback)(function () {
       setFocused(true);
     }, []);
@@ -163,25 +159,27 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       }
       onChange === null || onChange === void 0 || onChange(event);
     }, [value, onChange]);
-    var dynamicLabelClasses = getDynamicLabelClasses({
+    var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
       size: size,
       readOnly: readOnly,
       label: label,
       labelPlacement: labelPlacement,
-      value: value || uncontrolledValue || defaultValue,
+      value: value || uncontrolledValue || defaultValue
+    }, rows ? {
       rows: rows
-    }, focused);
+    } : {
+      autoResize: autoResize
+    }), focused);
     var optionalTextNode = innerOptional ? /*#__PURE__*/_react["default"].createElement(_TextArea.StyledOptionalText, null, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
     return /*#__PURE__*/_react["default"].createElement(Root, {
       view: overriddenView,
       size: size,
       disabled: disabled,
       readOnly: readOnly,
-      clear: clear,
       style: _objectSpread({
         width: helperWidth
       }, style),
-      className: (0, _utils.cx)(clearClass, hasDividerClass, className)
+      className: className
     }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, required && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
       className: (0, _utils.cx)(_TextArea2.classes.outerLabelPlacement, requiredPlacementClass)
     }), label, optionalTextNode), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContainer, {
@@ -202,7 +200,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       applyCustomWidth: applyCustomWidth,
       ref: outerRef,
       disabled: disabled,
-      height: autoResize || Boolean(clear) ? minAuto : height,
+      height: autoResize ? minAuto : height,
       width: width,
       placeholder: placeholderLabel,
       "aria-describedby": textareaHelperId,
@@ -235,12 +233,8 @@ var textAreaConfig = exports.textAreaConfig = {
     view: {
       css: _base.base
     },
-    clear: {
-      css: _base3.base,
-      attrs: true
-    },
     disabled: {
-      css: _base4.base,
+      css: _base3.base,
       attrs: true
     },
     readOnly: {

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

@@ -104,35 +104,6 @@ export function App() {
 }
 ```
 
-### Clear
-На отображение TextArea влияют свойства `clear` и `hasDivider`.
-При этом `hasDivider` не может использоваться без `clear`.
-Свойства `minAuto`, `maxAuto`, `autoResize`, `rows` и `cols`, `height` и `width` игнорируются.
-Высота TextArea в таком случае регулируется по длине контента внутри:
-
-```tsx live
-import React from 'react';
-import { TextArea } from '@salutejs/{{ package }}';
-
-export function App() {
-    const [value, setValue] = React.useState('Значение');
-
-    return (
-        <div>
-            <TextArea
-                placeholder="Введите значение"
-                value={value}
-                onChange={(e) => {
-                    setValue(e.target.value);
-                }}
-                clear
-                hasDivider
-            />
-        </div>
-    );
-}
-```
-
 ### Подсказка
 Для вывода подсказки снизу от поля используйте свойство `leftHelper` и/или `rightHelper`.
 

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

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

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

@@ -9,5 +9,5 @@ var _TextArea = /*#__PURE__*/require("../../TextArea.tokens");
 var styledContainer = _TextArea.classes.styledContainer,
   styledTextAreaWrapper = _TextArea.classes.styledTextAreaWrapper,
   styledHelpers = _TextArea.classes.styledHelpers;
-var exclusionSelectors = /*#__PURE__*/"not(.".concat(_TextArea.classes.clear, "):not([disabled]):not([readonly]):not(:focus-within)");
+var exclusionSelectors = 'not([disabled]):not([readonly]):not(:focus-within)';
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{transition:box-shadow 0.1s ease-in-out;border-radius:var(", ");border:var(", ") solid var(", ");}.", "{transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{border:var(", ") solid var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");}&:hover:", " .", "{border:var(", ") solid var(", ");}&:hover:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:hover:", " .", " + .", "{background-color:var(", ");}&:active:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:active:", " .", " + .", "{background-color:var(", ");}"], /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderRadius, _TextArea.tokens.borderSize, _TextArea.tokens.borderColor, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColor, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.inputBackgroundColorFocus, _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorFocus, /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderSize, _TextArea.tokens.borderColorFocus, /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorFocus, exclusionSelectors, /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderSize, _TextArea.tokens.borderColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorHover, _TextArea.tokens.inputBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorActive, _TextArea.tokens.inputBackgroundColorActive, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorActive);

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipGroup = void 0;
+var _ChipGroup = /*#__PURE__*/require("../../../../components/ChipGroup");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _ChipGroup2 = /*#__PURE__*/require("./ChipGroup.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_ChipGroup.chipGroupConfig, _ChipGroup2.config);
+var ChipGroup = exports.ChipGroup = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

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

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

@@ -13,13 +13,13 @@ var config = exports.config = {
   },
   variations: {
     size: {
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":0.25rem;", ":0.5rem;", ":0.25rem;", ":0.5rem;", ":0.125rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":0.375rem;", ":0.75rem;", ":0.375rem;", ":0.75rem;", ":0.25rem;", ":0.25rem;", ":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);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":0.375rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":0.5rem;", ":1.125rem;", ":0.5rem;", ":1.125rem;", ":0.375rem;", ":0.375rem;", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Dropdown.dropdownTokens.padding, _Dropdown.dropdownTokens.width, _Dropdown.dropdownTokens.borderRadius, _Dropdown.dropdownTokens.itemPaddingTop, _Dropdown.dropdownTokens.itemPaddingRight, _Dropdown.dropdownTokens.itemPaddingBottom, _Dropdown.dropdownTokens.itemPaddingLeft, _Dropdown.dropdownTokens.itemBorderRadius, _Dropdown.dropdownTokens.itemPaddingTopTight, _Dropdown.dropdownTokens.itemPaddingBottomTight, _Dropdown.dropdownTokens.dividerMarginTop, _Dropdown.dropdownTokens.dividerMarginRight, _Dropdown.dropdownTokens.dividerMarginBottom, _Dropdown.dropdownTokens.dividerMarginLeft, _Dropdown.dropdownTokens.dividerMarginTopTight, _Dropdown.dropdownTokens.dividerMarginBottomTight, _Dropdown.dropdownTokens.itemFontFamily, _Dropdown.dropdownTokens.itemFontSize, _Dropdown.dropdownTokens.itemFontStyle, _Dropdown.dropdownTokens.itemFontWeightBold, _Dropdown.dropdownTokens.itemFontLetterSpacing, _Dropdown.dropdownTokens.itemFontLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.disclosureIconColor, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card-brightness);", ":0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-tertiary);"], _Dropdown.dropdownTokens.disabledOpacity, _Dropdown.dropdownTokens.focusColor, _Dropdown.dropdownTokens.background, _Dropdown.dropdownTokens.boxShadow, _Dropdown.dropdownTokens.disclosureIconColor, _Dropdown.dropdownTokens.itemBackground, _Dropdown.dropdownTokens.itemBackgroundHover, _Dropdown.dropdownTokens.itemColor, _Dropdown.dropdownTokens.dividerColor)
     }
   }
 };

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

@@ -116,6 +116,8 @@ const items = [
     {
         value: 'europe',
         label: 'Европа',
+        dividerBefore: true,
+        dividerAfter: true,
         items: [
             {
                 value: 'france',