@salutejs/plasma-new-hope 0.85.0-canary.1213.9224571157.0 → 0.86.0-canary.1220.9257117448.0

package/styled-components/es/components/Range/variations/_size/tokens.json

@@ -0,0 +1,26 @@
+[
+    "--plasma-range-border-radius",
+    "--plasma-range__left-content-margin",
+    "--plasma-range__right-content-margin",
+    "--plasma-range__label-offset",
+    "--plasma-range__label-font-family",
+    "--plasma-range__label-font-style",
+    "--plasma-range__label-font-size",
+    "--plasma-range__label-font-weight",
+    "--plasma-range__label-letter-spacing",
+    "--plasma-range__label-line-height",
+    "--plasma-range__left-helper-offset",
+    "--plasma-range__left-helper-font-family",
+    "--plasma-range__left-helper-font-style",
+    "--plasma-range__left-helper-font-size",
+    "--plasma-range__left-helper-font-weight",
+    "--plasma-range__left-helper-letter-spacing",
+    "--plasma-range__left-helper-line-height",
+    "--plasma-range__divider-padding",
+    "--plasma-range__divider-font-family",
+    "--plasma-range__divider-font-style",
+    "--plasma-range__divider-font-size",
+    "--plasma-range__divider-font-weight",
+    "--plasma-range__divider-letter-spacing",
+    "--plasma-range__divider-line-height"
+]

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../Range.tokens';
+import { StyledLabel, LeftHelper, StyledDivider, ContentWrapper } 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(", ");}", "{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, LeftHelper, tokens.leftHelperColor);

package/styled-components/es/components/Range/variations/_view/tokens.json

@@ -0,0 +1,6 @@
+[
+    "--plasma-range-background",
+    "--plasma-range__label-color",
+    "--plasma-range__left-helper-color",
+    "--plasma-range__divider-color"
+]

package/styled-components/es/components/Segment/Segment.template-doc.mdx

@@ -53,9 +53,11 @@ export function App() {
     }
 
     return (
-        <SegmentProvider>
-            <SegmentTemplate/>
-        </SegmentProvider>
+        <div style={{ display: "block" }} >
+            <SegmentProvider>
+                <SegmentTemplate/>
+            </SegmentProvider>
+        </div>
     );
 }
 ```

package/styled-components/es/components/Tabs/Tabs.template-doc.mdx

@@ -39,21 +39,23 @@ export function App() {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="filled" stretch size="xs">
-            {items.map((_, i) => (
-                <TabItem
-                    view="secondary"
-                    key={`item:${i}`}
-                    size="xs"
-                    selected={i === index}
-                    tabIndex={0}
-                    contentLeft={<IconClock size="xs" color="inherit" />}
-                    onClick={() => setIndex(i)}
-                >
-                    Label
-                </TabItem>
-            ))}
-        </Tabs>
+        <div>
+            <Tabs view="filled" stretch size="xs">
+                {items.map((_, i) => (
+                    <TabItem
+                        view="secondary"
+                        key={`item:${i}`}
+                        size="xs"
+                        selected={i === index}
+                        tabIndex={0}
+                        contentLeft={<IconClock size="xs" color="inherit" />}
+                        onClick={() => setIndex(i)}
+                    >
+                        Label
+                    </TabItem>
+                ))}
+            </Tabs>
+        </div>
     );
 }
 ```
@@ -72,23 +74,25 @@ export function App() {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="filled" stretch size="xs" index={index}>
-            {items.map((_, i) => (
-                <TabItem
-                    view="secondary"
-                    key={`item:${i}`}
-                    size="xs"
-                    itemIndex={i}
-                    onIndexChange={(i) => setIndex(i)}
-                    selected={i === index}
-                    tabIndex={0}
-                    contentLeft={<IconClock size="xs" color="inherit" />}
-                    onClick={() => setIndex(i)}
-                >
-                    Label
-                </TabItem>
-            ))}
-        </Tabs>
+        <div>
+            <Tabs view="filled" stretch size="xs" index={index}>
+                {items.map((_, i) => (
+                    <TabItem
+                        view="secondary"
+                        key={`item:${i}`}
+                        size="xs"
+                        itemIndex={i}
+                        onIndexChange={(i) => setIndex(i)}
+                        selected={i === index}
+                        tabIndex={0}
+                        contentLeft={<IconClock size="xs" color="inherit" />}
+                        onClick={() => setIndex(i)}
+                    >
+                        Label
+                    </TabItem>
+                ))}
+            </Tabs>
+        </div>
     );
 }
 ```

package/styled-components/es/components/Tabs/ui/TabItem/TabItem.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex"];
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -30,6 +30,7 @@ export var tabItemRoot = function tabItemRoot(Root) {
       onIndexChange = props.onIndexChange,
       itemIndex = props.itemIndex,
       tabIndex = props.tabIndex,
+      className = props.className,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
@@ -51,10 +52,10 @@ export var tabItemRoot = function tabItemRoot(Root) {
       };
     }, [refs]);
     var onItemFocus = useCallback(function (event) {
-      if (!hasKeyNavigation) {
-        event.target.scrollIntoView({
-          block: 'center',
-          inline: 'center',
+      if (!hasKeyNavigation && innerRef !== null && innerRef !== void 0 && innerRef.current) {
+        innerRef.current.scrollTo({
+          top: 0,
+          left: innerRef.current.offsetLeft,
           behavior: 'smooth'
         });
         return;
@@ -80,7 +81,7 @@ export var tabItemRoot = function tabItemRoot(Root) {
       size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: cx(pilledClass, selectedClass, animatedClass)
+      className: cx(pilledClass, selectedClass, animatedClass, className)
     }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {

package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "stretch", "disabled", "size", "view", "children", "pilled", "index"];
+var _excluded = ["id", "stretch", "disabled", "size", "view", "children", "pilled", "index", "className"];
 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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -39,6 +39,7 @@ export var tabsRoot = function tabsRoot(Root) {
       children = props.children,
       pilled = props.pilled,
       index = props.index,
+      className = props.className,
       rest = _objectWithoutProperties(props, _excluded);
     var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -146,7 +147,7 @@ export var tabsRoot = function tabsRoot(Root) {
       id: tabsId,
       ref: outerRef,
       disabled: disabled,
-      className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass),
+      className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
       onKeyDown: onKeyDown
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
       ref: scrollRef,

package/styled-components/es/components/Tabs/ui/Tabs/Tabs.styles.js

@@ -10,7 +10,7 @@ export var StyledContent = /*#__PURE__*/styled.div.withConfig({
 })(["display:inline-flex;flex-direction:row;align-items:center;"]);
 export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ibkmsl-1"
-})(["margin:-0.125rem;padding:0.25rem;overflow:scroll;position:relative;height:100%;width:100%;display:flex;align-items:center;::-webkit-scrollbar{display:none;}overscroll-behavior:contain;"]);
+})(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;overflow:scroll;position:relative;height:100%;width:100%;display:flex;align-items:center;::-webkit-scrollbar{display:none;}overscroll-behavior:contain;"]);
 export var StyledArrow = /*#__PURE__*/styled.button.withConfig({
   componentId: "plasma-new-hope__sc-1ibkmsl-2"
 })(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ";padding-right:", ";padding-left:", ";"], /*#__PURE__*/addFocus({

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

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -17,7 +17,7 @@ import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_read-only/base';
 import { base as labelPlacementCSS } from './variations/_label-placement/base';
-import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips } from './TextField.styles';
+import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter } from './TextField.styles';
 import { classes } from './TextField.tokens';
 import { TextFieldChip } from './ui';
 import { useKeyNavigation } from './hooks';
@@ -31,6 +31,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
       contentRight = _ref.contentRight,
       label = _ref.label,
       labelPlacement = _ref.labelPlacement,
+      textBefore = _ref.textBefore,
+      textAfter = _ref.textAfter,
       placeholder = _ref.placeholder,
       leftHelper = _ref.leftHelper,
       _ref$enumerationType = _ref.enumerationType,
@@ -111,14 +113,12 @@ export var textFieldRoot = function textFieldRoot(Root) {
       if (readOnly || disabled || !(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
         return;
       }
-      inputRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'center'
-      });
-      inputRef.current.focus({
-        preventScroll: true
+      inputRef.current.scrollTo({
+        top: 0,
+        left: inputRef.current.offsetLeft,
+        behavior: 'smooth'
       });
+      inputRef.current.focus();
     };
     var getRef = function getRef(element, index) {
       if (element && chipsRefs !== null && chipsRefs !== void 0 && chipsRefs.current) {
@@ -160,7 +160,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
       className: withHasChips
-    }, isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/React.createElement(StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
+    }, textBefore && /*#__PURE__*/React.createElement(StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/React.createElement(StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
       var chipId = _ref2.id,
         text = _ref2.text;
       return /*#__PURE__*/React.createElement(TextFieldChip, {
@@ -194,7 +194,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
     })), labelInside && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: innerId
-    }, innerLabelValue)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+    }, innerLabelValue), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
       id: helperTextId
     }, leftHelper));
   });

package/styled-components/es/components/TextField/TextField.styles.js

@@ -23,4 +23,10 @@ export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
 })(["margin:var(", ");"], tokens.rightContentMargin);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-7"
+})([""]);
+export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-8"
+})([""]);
+export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-9"
 })([""]);

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

@@ -62,6 +62,11 @@ export var tokens = {
   leftHelperFontWeight: '--plasma-textfield__left-helper-font-weight',
   leftHelperLetterSpacing: '--plasma-textfield__left-helper-letter-spacing',
   leftHelperLineHeight: '--plasma-textfield__left-helper-line-height',
+  /** Токены вспомогательного текста */
+  textBeforeColor: '--plasma-textfield__before-text-color',
+  textAfterColor: '--plasma-textfield__after-text-color',
+  textBeforeMargin: '--plasma-textfield__before-text-margin',
+  textAfterMargin: '--plasma-textfield__after-text-margin',
   /** Прозрачность для всего компонента в состоянии disabled */
   disabledOpacity: '--plasma-textfield-disabled-opacity',
   /** Токены чипа */

package/styled-components/es/components/TextField/variations/_label-placement/inner.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
-import { Input, Label } from '../../TextField.styles';
+import { Input, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
 import { tokens } from '../../TextField.tokens';
-export var labelPlacement_inner = /*#__PURE__*/css(["", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], Input, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);
+export var labelPlacement_inner = /*#__PURE__*/css(["", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], Input, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);

package/styled-components/es/components/TextField/variations/_size/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../TextField.tokens';
-import { Input, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
+import { Input, InputWrapper, Label, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin);

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../../TextField.tokens';
-import { Input, InputWrapper, LeftHelper } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], InputWrapper, /*#__PURE__*/String(tokens.borderColor), /*#__PURE__*/String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.caretColor, InputWrapper, tokens.borderColorHover, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorHover, /*#__PURE__*/String(tokens.backgroundColor), InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), Input, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor);
+import { Input, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
+export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], InputWrapper, /*#__PURE__*/String(tokens.borderColor), /*#__PURE__*/String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.caretColor, InputWrapper, tokens.borderColorHover, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorHover, /*#__PURE__*/String(tokens.backgroundColor), InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), Input, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor);

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

@@ -8,27 +8,27 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
     },
     size: {
-      l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 -0.125rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-      lr: /*#__PURE__*/css(["", ":3.5rem;", ":12.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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 0;", ":0 0 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-      m: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 -0.125rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-      mr: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 0;", ":0 0 0 0.375rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-      s: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-      sr: /*#__PURE__*/css(["", ":2.5rem;", ":11.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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-      xs: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-      xsr: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
-      xxs: /*#__PURE__*/css(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin)
+      l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
+      lr: /*#__PURE__*/css(["", ":3.5rem;", ":12.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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
+      m: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
+      mr: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
+      sr: /*#__PURE__*/css(["", ":2.5rem;", ":11.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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
+      xsr: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
+      xxs: /*#__PURE__*/css(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], buttonTokens.buttonDisabledOpacity)

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

@@ -4,103 +4,57 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { IconMic } from '../../../../components/_Icon';
-import { WithTheme } from '../../../_helpers';
+import { buttonConfig } from '../../../../components/Button';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
+import { config } from './Button.config';
 import { Button } from './Button';
 
-const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
-const sizes = ['l', 'm', 's', 'xs', 'xxs'];
-const stretchingValues = ['auto', 'filled', 'fixed'];
-const pinValues = [
-    '',
-    'square-square',
-    'square-clear',
-    'clear-square',
-    'clear-clear',
-    'clear-circle',
-    'circle-clear',
-    'circle-circle',
-];
-const contentPlacinValues = ['default', 'relaxed'];
-
 const meta: Meta<typeof Button> = {
     title: 'plasma_b2c/Button',
     decorators: [WithTheme],
     component: Button,
     args: {
+        text: 'Hello',
         view: 'default',
         size: 'm',
-        contentPlacing: 'default',
-        stretching: 'auto',
-        text: 'Hello',
-        value: 'Value',
         disabled: false,
         focused: true,
         square: false,
+        stretching: 'auto',
         isLoading: false,
     },
     argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        contentPlacing: {
-            options: contentPlacinValues,
+        ...argTypesFromConfig(mergeConfig(buttonConfig, config)),
+        pin: {
+            options: [
+                'square-square',
+                'square-clear',
+                'clear-square',
+                'clear-clear',
+                'clear-circle',
+                'circle-clear',
+                'circle-circle',
+                '',
+            ],
             control: {
                 type: 'select',
             },
+            table: { defaultValue: { summary: 'bottom' } },
         },
         stretching: {
-            options: stretchingValues,
+            options: ['auto', 'filled', 'fixed'],
             control: {
                 type: 'select',
             },
         },
-        pin: {
-            options: pinValues,
-            control: {
-                type: 'select',
-            },
-            table: { defaultValue: { summary: 'bottom' } },
-        },
     },
 };
 
 export default meta;
 
-type StoryPropsDefault = ComponentProps<typeof Button> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-};
-
-const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-
-    return (
-        <Button
-            contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            size={size}
-            {...rest}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        enableContentLeft: false,
-        enableContentRight: false,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
+export const Default: StoryObj<ComponentProps<typeof Button>> = {};
 
 export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
     argTypes: { ...disableProps(['text']) },