@salutejs/plasma-new-hope 0.84.0-canary.1213.9221965842.0 → 0.84.1-canary.1209.9214674427.0

package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js

@@ -13,16 +13,16 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      accent: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      secondary: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      positive: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      warning: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      negative: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      dark: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      black: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      white: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
+      "default": /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      accent: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      positive: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      warning: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      negative: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      dark: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      black: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      white: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.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);"], _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _ButtonGroup.buttonGroupTokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonPadding, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight),

package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
 type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
 type Story = StoryObj<StoryProps>;
 
-const views = ['accent', 'default', 'secondary', 'positive', 'warning', 'negative', 'clear'];
+const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
 const sizes = ['l', 'm', 's', 'xs', 'xxs'];
 const orientationValues = ['horizontal', 'vertical'];
 const gapValues = ['none', 'dense', 'wide'];

package/styled-components/cjs/hooks/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "useForceUpdate", {
     return _useForceUpdate.useForceUpdate;
   }
 });
+Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
+  enumerable: true,
+  get: function get() {
+    return _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
+  }
+});
 Object.defineProperty(exports, "usePreviousValue", {
   enumerable: true,
   get: function get() {
@@ -30,4 +36,5 @@ Object.defineProperty(exports, "useUniqId", {
 var _useUniqId = /*#__PURE__*/require("./useUniqId");
 var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
 var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
-var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
+var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
+var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");

package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsomorphicLayoutEffect = void 0;
+var _react = /*#__PURE__*/require("react");
+var _utils = /*#__PURE__*/require("../utils");
+/**
+ * Runs effect safely on server.
+ */
+var useIsomorphicLayoutEffect = exports.useIsomorphicLayoutEffect = _utils.canUseDOM ? _react.useLayoutEffect : _react.useEffect;

package/styled-components/cjs/index.js

@@ -508,4 +508,15 @@ Object.keys(_Toolbar).forEach(function (key) {
       return _Toolbar[key];
     }
   });
+});
+var _Slider = /*#__PURE__*/require("./components/Slider");
+Object.keys(_Slider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Slider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Slider[key];
+    }
+  });
 });

package/styled-components/cjs/utils/canUseDOM.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.canUseDOM = void 0;
+/**
+ * This constant tells you whether can DOM be used.
+ * https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
+ */
+var canUseDOM = exports.canUseDOM = /*#__PURE__*/Boolean(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');

package/styled-components/cjs/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "IS_REACT_18", {
     return _react.IS_REACT_18;
   }
 });
+Object.defineProperty(exports, "canUseDOM", {
+  enumerable: true,
+  get: function get() {
+    return _canUseDOM.canUseDOM;
+  }
+});
 exports.cx = exports.composableStyle = void 0;
 Object.defineProperty(exports, "extractTextFrom", {
   enumerable: true,
@@ -34,6 +40,7 @@ Object.defineProperty(exports, "safeUseId", {
     return _react.safeUseId;
   }
 });
+var _canUseDOM = /*#__PURE__*/require("./canUseDOM");
 var _extractTextFrom = /*#__PURE__*/require("./extractTextFrom");
 var _getSizeValueFromProp = /*#__PURE__*/require("./getSizeValueFromProp");
 var _react = /*#__PURE__*/require("./react");

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

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _StyledSpinner;
-var _excluded = ["children", "view", "size", "text", "value", "contentLeft", "contentRight", "contentPlacing", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
+var _excluded = ["children", "view", "size", "text", "contentLeft", "contentRight", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -18,7 +18,7 @@ import { base as disabledCSS } from './variations/_disabled/base';
 import { base as focusedCSS } from './variations/_focused/base';
 import { base as stretchingCSS } from './variations/_stretching/base';
 import { base as blurredCSS } from './variations/_blurred/base';
-import { base, ButtonText, ButtonValue, Loader, LoadWrap, StyledContentLeft, StyledContentRight, StyledSpinner } from './Button.styles';
+import { base, ButtonText, Loader, LoadWrap, StyledSpinner } from './Button.styles';
 import { classes, tokens } from './Button.tokens';
 export var buttonRoot = function buttonRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
@@ -26,11 +26,8 @@ export var buttonRoot = function buttonRoot(Root) {
       view = props.view,
       size = props.size,
       text = props.text,
-      value = props.value,
       contentLeft = props.contentLeft,
       contentRight = props.contentRight,
-      _props$contentPlacing = props.contentPlacing,
-      contentPlacing = _props$contentPlacing === void 0 ? 'default' : _props$contentPlacing,
       isLoading = props.isLoading,
       loader = props.loader,
       stretch = props.stretch,
@@ -47,34 +44,23 @@ export var buttonRoot = function buttonRoot(Root) {
       rest = _objectWithoutProperties(props, _excluded);
     var txt = typeof children === 'string' ? children : text;
     var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
-    var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
     var squareClass = square ? classes.buttonSquare : undefined;
     var buttonBorderRadius = pin ? convertRoundnessMatrix(pin, "var(".concat(tokens.buttonRadius, ")"), "var(".concat(tokens.buttonHeight, ")")) : "var(".concat(tokens.buttonRadius, ", calc(var(").concat(tokens.buttonHeight, ") / 4))");
-    var contentPlacingMapper = {
-      "default": 'center',
-      relaxed: 'space-between'
-    };
-    var contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
     return /*#__PURE__*/React.createElement(Root, _extends({
       type: "button",
       ref: ref,
       view: view,
       size: size,
-      value: value,
       disabled: disabled,
       focused: focused || outlined,
-      contentPlacing: contentPlacing,
       className: cx(squareClass, stretchingClass, classes.buttonItem, className),
       style: _objectSpread(_objectSpread({}, style), {}, {
         '--plasma_computed-btn-br': buttonBorderRadius,
         '--plasma_private-blur': blur
       })
     }, rest), /*#__PURE__*/React.createElement(LoadWrap, {
-      contentPlacing: contentPlacementValue,
       isLoading: isLoading
-    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
-      className: contentRelaxedClass
-    }, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
+    }, contentLeft, txt ? /*#__PURE__*/React.createElement(ButtonText, null, txt) : children, contentRight), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
   });
 };
 export var buttonConfig = {

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

@@ -10,36 +10,28 @@ import { classes, tokens } from './Button.tokens';
 // issue #823
 var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
 var Spinner = /*#__PURE__*/component(mergedConfig);
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE: \n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.", " {\n        width: var(", ");\n        padding: 0;\n    }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
+
+// TODO: PLASMA-2164
+// WHY do we need applyEllipsis ??
+// Если внутри кнопки тескт и на нее решили повесить square пропс
 export var ButtonText = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-0"
-})(["min-width:4ch;flex-shrink:2;", " &.", "{text-align:start;flex-grow:2;}"], /*#__PURE__*/applyEllipsis(), /*#__PURE__*/String(classes.contentRelaxed));
-export var ButtonValue = /*#__PURE__*/styled.span.withConfig({
-  componentId: "plasma-new-hope__sc-9d9bqj-1"
-})(["color:var(", ");margin:var(", ");min-width:4ch;", ""], tokens.buttonValueColor, tokens.buttonValueMargin, /*#__PURE__*/applyEllipsis());
+})([":not(:last-child){margin-right:0.375rem;}:not(:first-child){margin-left:0.375rem;}", ""], /*#__PURE__*/applyEllipsis());
 
 // TODO: #720
 export var LoadWrap = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-9d9bqj-2"
-})(["opacity:", ";display:flex;align-items:inherit;justify-content:", ";height:100%;width:100%;"], function (_ref) {
+  componentId: "plasma-new-hope__sc-9d9bqj-1"
+})(["opacity:", ";display:flex;width:100%;align-items:inherit;justify-content:inherit;height:100%;"], function (_ref) {
   var isLoading = _ref.isLoading;
   return isLoading ? '0' : '1';
-}, function (_ref2) {
-  var contentPlacing = _ref2.contentPlacing;
-  return contentPlacing;
 });
 export var Loader = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-9d9bqj-3"
+  componentId: "plasma-new-hope__sc-9d9bqj-2"
 })(["position:absolute;"]);
 export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
-  componentId: "plasma-new-hope__sc-9d9bqj-4"
+  componentId: "plasma-new-hope__sc-9d9bqj-3"
 })(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
-export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-9d9bqj-5"
-})(["display:flex;margin:var(", ");"], tokens.buttonLeftContentMargin);
-export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-9d9bqj-6"
-})(["display:flex;margin:var(", ");"], tokens.buttonRightContentMargin);
-export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE: \n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.", " {\n        width: var(", ");\n        padding: 0;\n    }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
 
 // INFO: Для возможности переиспользования стилей в других компонентах
 export var baseContent = /*#__PURE__*/"\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE: \n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.".concat(String(classes.buttonSquare), " {\n        width: var(").concat(tokens.buttonHeight, ");\n        padding: 0;\n    }\n\n    color: var(").concat(tokens.buttonColor, ");\n    background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n    :hover {\n        color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n        background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(tokens.buttonScaleHover, ");\n    }\n\n    :active {\n        color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n        background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(tokens.buttonScaleActive, ");\n    }\n\n    height: var(").concat(tokens.buttonHeight, ");\n    width: var(").concat(tokens.buttonWidth, ");\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n    font-family: var(").concat(tokens.buttonFontFamily, ");\n    font-size: var(").concat(tokens.buttonFontSize, ");\n    font-style: var(").concat(tokens.buttonFontStyle, ");\n    font-weight: var(").concat(tokens.buttonFontWeight, ");\n    letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n    line-height: var(").concat(tokens.buttonLineHeight, ");\n\n    /* TODO: #710 make it token API ? */\n    --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n    :focus {\n        outline: none;\n    }\n\n    ").concat(addFocus({
@@ -47,4 +39,4 @@ export var baseContent = /*#__PURE__*/"\n    position: relative;\n    display: i
   outlineSize: 'var(--plasma_private-btn-outline-size)',
   outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
   outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
-}), "\n\n    &[disabled] {\n        opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(").concat(tokens.buttonColor, ");\n            background-color: var(").concat(tokens.buttonBackgroundColor, ");\n        }\n    }\n\n    &.").concat(classes.fixedStretching, " {\n        width: var(").concat(tokens.buttonWidth, ");\n    }\n    &.").concat(classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(classes.autoStretching, " {\n        width: fit-content;\n    }\n");
+}), "\n\n    &[disabled] {\n        opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(").concat(tokens.buttonColor, ");\n            background-color: var(").concat(tokens.buttonBackgroundColor, ");\n        }\n    }\n\n    &.").concat(classes.fixedStretching, " {\n        width: var(").concat(tokens.buttonWidth, ");\n    }\n    &.").concat(classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(classes.autoStretching, " {\n        width: auto;\n    }\n");

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

@@ -68,48 +68,6 @@ export function App() {
 }
 ```
 
-### Ширина кнопки
-Ширина кнопки регулируется с помощью свойства `stretching`.
-Возможные значения свойства `contentPlacing`:
-+ `auto` – ширина подстраивается под контент;
-+ `filled` – кнопка растягивается на всю доступную ширину;
-+ `fixed` – кнопка фиксированной ширины.
-
-```tsx live
-import React from 'react';
-import { Button } from '@salutejs/{{package}}';
-
-export function App() {
-    return (
-        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <Button text="Button" stretching="fixed" />
-            <Button text="Button" stretching="auto" />
-            <Button text="Button" stretching="filled" />
-        </div>
-    );
-}
-```
-
-### Позиционирование контента внутри
-Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
-Возможные значения свойства `contentPlacing`:
-+ `default` – контент центрируется;
-+ `relaxed` – контент распологается по краям.
-
-```tsx live
-import React from 'react';
-import { Button } from '@salutejs/{{package}}';
-
-export function App() {
-    return (
-        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
-            <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
-        </div>
-    );
-}
-```
-
 ### Вид кнопки
 Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
 + `"primary"` – основная;

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

@@ -3,13 +3,11 @@ export var classes = {
   autoStretching: 'button-stretching-auto',
   filledStretching: 'button-stretching-filled',
   fixedStretching: 'button-stretching-fixed',
-  contentRelaxed: 'button-content-relaxed',
   buttonSquare: 'button-square',
   buttonItem: 'button-item'
 };
 export var tokens = {
   buttonColor: '--plasma-button-color',
-  buttonValueColor: '--plasma-button-value-color',
   buttonBackgroundColor: '--plasma-button-background-color',
   buttonColorHover: '--plasma-button-color-hover',
   buttonBackgroundColorHover: '--plasma-button-background-color-hover',
@@ -28,9 +26,6 @@ export var tokens = {
   buttonFontWeight: '--plasma-button-font-weight',
   buttonLetterSpacing: '--plasma-button-letter-spacing',
   buttonLineHeight: '--plasma-button-line-height',
-  buttonLeftContentMargin: '--plasma-button-left-content-margin',
-  buttonRightContentMargin: '--plasma-button-right-content-margin',
-  buttonValueMargin: '--plasma-button-value-margin',
   buttonDisabledOpacity: '--plasma-button-disabled-opacity',
   buttonFocusColor: '--plasma-button-focus-color',
   buttonSpinnerColor: '--plasma-button-spinner-color',

package/styled-components/es/components/Button/variations/_stretching/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../Button.tokens';
-export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:fit-content;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);
+export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);

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

@@ -14,7 +14,6 @@ export var classes = {
 export var tokens = {
   buttonGroupOrientation: '--plasma-button-group-orientation',
   buttonColor: '--plasma-button-group-item-color',
-  buttonValueColor: '--plasma-button-group-item-value-color',
   buttonBackgroundColor: '--plasma-button-group-item-background-color',
   buttonColorHover: '--plasma-button-group-item-color-hover',
   buttonBackgroundColorHover: '--plasma-button-group-item-background-color-hover',

package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js

@@ -1,4 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../ButtonGroup.tokens';
-import { buttonClasses } from '../../../Button';
-export var base = /*#__PURE__*/css(["flex-direction:var(", ");&.", " .", "{width:auto;}"], tokens.buttonGroupOrientation, classes.vertical, buttonClasses.buttonItem);
+import { tokens } from '../../ButtonGroup.tokens';
+export var base = /*#__PURE__*/css(["flex-direction:var(", ");"], tokens.buttonGroupOrientation);

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

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../ButtonGroup.tokens';
 import { buttonClasses, buttonTokens } from '../../../Button';
-export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonValueColor, tokens.buttonValueColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
+export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);

package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js

@@ -1,4 +1,4 @@
-var _excluded = ["arrow", "iconSize", "value"];
+var _excluded = ["arrow", "iconSize"];
 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; }
@@ -22,7 +22,6 @@ export var headerArrowRoot = function headerArrowRoot(Root) {
     var arrow = props.arrow,
       _props$iconSize = props.iconSize,
       iconSize = _props$iconSize === void 0 ? 's' : _props$iconSize,
-      value = props.value,
       rest = _objectWithoutProperties(props, _excluded);
     var minimizeClass = arrow === 'minimize' ? classes.headerArrowIconMinimize : undefined;
     return /*#__PURE__*/React.createElement(Root, {
@@ -31,8 +30,7 @@ export var headerArrowRoot = function headerArrowRoot(Root) {
       view: "clear",
       size: "s",
       tabIndex: -1,
-      className: classes.headerArrow,
-      value: String(value)
+      className: classes.headerArrow
     }, rest), /*#__PURE__*/React.createElement(IconChevronLeft, _extends({
       size: iconSize,
       sizeCustomProperty: tokens.headerArrowIconSize,

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

@@ -0,0 +1,38 @@
+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); }
+import React, { forwardRef } from 'react';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { SingleSlider, DoubleSlider } from './components';
+var isSingleValueProps = function isSingleValueProps(props) {
+  return typeof props.value === 'number';
+};
+export var sliderRoot = function sliderRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: ref
+    }, props), isSingleValueProps(props) && /*#__PURE__*/React.createElement(SingleSlider, props), !isSingleValueProps(props) && /*#__PURE__*/React.createElement(DoubleSlider, props));
+  });
+};
+export var sliderConfig = {
+  name: 'Slider',
+  tag: 'div',
+  layout: sliderRoot,
+  base: '',
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

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

@@ -0,0 +1,71 @@
+export var classes = {
+  labelPlacementOuter: 'slider-label-placement-outer',
+  labelPlacementInner: 'slider-label-placement-inner',
+  rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
+  rangeValuesPlacementInner: 'slider-range-values-placement-inner',
+  maxRangeValue: 'slider-max-range-value',
+  hideMinValue: 'slider-hide-min-value',
+  hideMaxValue: 'slider-hide-max-value',
+  textFieldActive: 'slider-text-field-active',
+  firstTextField: 'slider-first-text-field',
+  secondTextField: 'slider-second-text-field',
+  activeRangeValue: 'slider-active-range-value'
+};
+export var tokens = {
+  height: '--plasma-slider-height',
+  labelWrapperGap: '--plasma-slider-label-wrapper-gap',
+  labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
+  labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
+  labelColor: '--plasma-slider-label-color',
+  labelFontFamily: '--plasma-slider-label-font-family',
+  labelFontSize: '--plasma-slider-label-font-size',
+  labelFontStyle: '--plasma-slider-label-font-style',
+  labelFontWeight: '--plasma-slider-label-font-weight',
+  labelLetterSpacing: '--plasma-slider-label-letter-spacing',
+  labelLineHeight: '--plasma-slider-label-line-height',
+  rangeMinValueMargin: '--plasma-slider-range-min-value-margin',
+  rangeMaxValueMargin: '--plasma-slider-range-max-value-margin',
+  rangeValueBottomOffset: '--plasma-slider-range-value-bottom-offset',
+  rangeValueColor: '--plasma-slider-range-value-color',
+  rangeValueFontFamily: '--plasma-slider-range-value-font-family',
+  rangeValueFontSize: '--plasma-slider-range-value-font-size',
+  rangeValueFontStyle: '--plasma-slider-range-value-font-style',
+  rangeValueFontWeight: '--plasma-slider-range-value-font-weight',
+  rangeValueLetterSpacing: '--plasma-slider-range-value-letter-spacing',
+  rangeValueLineHeight: '--plasma-slider-range-value-line-height',
+  doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
+  thumbSize: '--plasma-slider-thumb-size',
+  thumbBorder: '--plasma-slider-thumb-border',
+  thumbBorderColor: '--plasma-slider-thumb-border-color',
+  thumbBackgroundColor: '--plasma-slider-thumb-background-color',
+  thumbFocusBorderColor: '--plasma-slider-thumb-focus-border-color',
+  currentValueTopOffset: '--plasma-slider-current-value-top-offset',
+  currentValueFontFamily: '--plasma-slider-current-value-font-family',
+  currentValueFontSize: '--plasma-slider-current-value-font-size',
+  currentValueFontStyle: '--plasma-slider-current-value-font-style',
+  currentValueFontWeight: '--plasma-slider-current-value-font-weight',
+  currentValueLetterSpacing: '--plasma-slider-current-value-letter-spacing',
+  currentValueLineHeight: '--plasma-slider-current-value-line-height',
+  railBackgroundColor: '--plasma-slider-rail-background-color',
+  railHeight: '--plasma-slider-rail-height',
+  railBorderRadius: '--plasma-slider-rail-border-radius',
+  railIndent: '--plasma-slider-rail-indent',
+  fillColor: '--plasma-slider-fill-color',
+  textFieldWrapperGap: '--plasma-slider-text-field-wrapper-gap',
+  textFieldFontFamily: '--plasma-slider-text-field-font-family',
+  textFieldFontSize: '--plasma-slider-text-field-font-size',
+  textFieldFontStyle: '--plasma-slider-text-field-font-style',
+  textFieldFontWeight: '--plasma-slider-text-field-font-weight',
+  textFieldLetterSpacing: '--plasma-slider-text-field-letter-spacing',
+  textFieldLineHeight: '--plasma-slider-text-field-line-height',
+  textFieldHeight: '--plasma-slider-text-field-height',
+  textFieldPadding: '--plasma-slider-text-field-padding',
+  textFieldBorderRadius: '--plasma-slider-text-field-border-radius',
+  textFieldColor: '--plasma-slider-text-field-color',
+  textFieldActiveColor: '--plasma-slider-text-field-active-color',
+  textFieldBackgroundColor: '--plasma-slider-text-field-background-color',
+  textFieldCaretColor: '--plasma-slider-text-field-caret-color',
+  textFieldPlaceholderColor: '--plasma-slider-text-field-placeholder-color',
+  textFiledFocusColor: '--plasma-slider-text-field-focus-color',
+  disabledOpacity: '--plasma-slider-disabled-opacity'
+};

package/styled-components/es/components/Slider/Slider.types.js

@@ -0,0 +1 @@
+export {};