@salutejs/plasma-new-hope 0.174.0-canary.1452.11462555994.0 → 0.174.0-canary.1503.11466452273.0

package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js

@@ -18,9 +18,9 @@ var config = exports.config = {
       gradient: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent-gradient);", ":var(--surface-solid-tertiary);", ":var(--surface-accent-gradient);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1rem;", ":1.25rem;", ":0.0625rem solid;", ":1.625rem;", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Slider.sliderTokens.size, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelWrapperVerticalMargin, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeValueHorizontalMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueHorizontalOffset, _Slider.sliderTokens.rangeValueVerticalMargin, _Slider.sliderTokens.valueFontFamily, _Slider.sliderTokens.valueFontSize, _Slider.sliderTokens.valueFontStyle, _Slider.sliderTokens.valueFontWeight, _Slider.sliderTokens.valueLetterSpacing, _Slider.sliderTokens.valueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbSizeLarge, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.railThickness, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":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-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1rem;", ":1.25rem;", ":0.0625rem solid;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Slider.sliderTokens.size, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelWrapperVerticalMargin, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeValueHorizontalMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueHorizontalOffset, _Slider.sliderTokens.rangeValueVerticalMargin, _Slider.sliderTokens.valueFontFamily, _Slider.sliderTokens.valueFontSize, _Slider.sliderTokens.valueFontStyle, _Slider.sliderTokens.valueFontWeight, _Slider.sliderTokens.valueLetterSpacing, _Slider.sliderTokens.valueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbSizeLarge, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.railThickness, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":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-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.625rem;", ":0.625rem;", ":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-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":1.25rem;", ":0.0625rem solid;", ":1.25rem;", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 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-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Slider.sliderTokens.size, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelWrapperVerticalMargin, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeValueHorizontalMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueHorizontalOffset, _Slider.sliderTokens.rangeValueVerticalMargin, _Slider.sliderTokens.valueFontFamily, _Slider.sliderTokens.valueFontSize, _Slider.sliderTokens.valueFontStyle, _Slider.sliderTokens.valueFontWeight, _Slider.sliderTokens.valueLetterSpacing, _Slider.sliderTokens.valueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbSizeLarge, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.railThickness, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.5rem;", ":-1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":0.125rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 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-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Slider.sliderTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx

@@ -4,18 +4,14 @@ import styled from 'styled-components';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 import type { StoryObj, Meta } from '@storybook/react';
 
-import { IconMic } from '../../../../components/_Icon';
 import { WithTheme } from '../../../_helpers';
 
 import { Slider } from './Slider';
 
 const sizes = ['l', 'm', 's'];
-const pointerSizes = ['small', 'large', 'none'];
 const views = ['default', 'accent', 'gradient'];
-const sliderAligns = ['center', 'left', 'right', 'none'];
-const labelPlacements = ['top', 'left'];
-const scaleAligns = ['side', 'bottom'];
-const orientations: Array<string> = ['vertical', 'horizontal'];
+const labelPlacements = ['outer', 'inner'];
+const rangeValuesPlacement = ['outer', 'inner'];
 
 const meta: Meta<typeof Slider> = {
     title: 'plasma_web/Slider',
@@ -34,24 +30,9 @@ const meta: Meta<typeof Slider> = {
                 type: 'inline-radio',
             },
         },
-        pointerSize: {
-            options: pointerSizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'select',
-            },
-        },
         ...disableProps([
             'value',
             'onChangeCommitted',
-            'onChangeTextField',
-            'onBlurTextField',
-            'onKeyDownTextField',
             'ariaLabel',
             'onChange',
             'fontSizeMultiplier',
@@ -71,9 +52,8 @@ type StorySingleProps = StoryProps;
 type StorySingle = StoryObj<StorySingleProps>;
 type StoryDouble = StoryObj<StoryProps>;
 
-const SliderWrapper = styled.div<{ isVertical?: boolean }>`
-    width: ${({ isVertical }) => (isVertical ? 'auto' : '25rem')};
-    height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
+const SliderWrapper = styled.div`
+    width: 25rem;
 `;
 
 const StoryDefault = (args: StorySingleProps) => {
@@ -87,86 +67,41 @@ const StoryDefault = (args: StorySingleProps) => {
         setValue(values);
     };
 
-    const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
-    const isVertical = orientation === 'vertical';
-
     return (
-        <SliderWrapper isVertical={isVertical}>
-            <Slider
-                value={value}
-                orientation={orientation}
-                labelPlacement={labelPlacement}
-                labelContent={showIcon ? <IconMic size={rest.size === 's' ? 'xs' : 's'} /> : null}
-                onChangeCommitted={onChangeCommittedHandle}
-                onChange={onChangeHandle}
-                {...rest}
-            />
+        <SliderWrapper>
+            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
         </SliderWrapper>
     );
 };
 
 export const Default: StorySingle = {
     argTypes: {
-        sliderAlign: {
-            options: sliderAligns,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'vertical' },
-        },
         labelPlacement: {
             options: labelPlacements,
             control: {
                 type: 'inline-radio',
             },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        labelReversed: {
-            control: {
-                type: 'boolean',
-                expanded: true,
-            },
-            if: { arg: 'orientation', eq: 'vertical' },
-        },
-        scaleAlign: {
-            options: scaleAligns,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
         },
-        orientation: {
-            options: orientations,
+        rangeValuesPlacement: {
+            options: rangeValuesPlacement,
             control: {
                 type: 'inline-radio',
             },
         },
-        reversed: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'orientation', eq: 'vertical' },
-        },
     },
     args: {
         view: 'default',
         size: 'm',
-        pointerSize: 'small',
         min: 0,
         max: 100,
-        orientation: 'horizontal',
-        ariaLabel: 'Цена микрофона',
+        disabled: false,
+        ariaLabel: 'Цена товара',
         multipleStepSize: 10,
-        label: 'Цена микрофона',
-        labelPlacement: 'top',
-        sliderAlign: 'center',
-        scaleAlign: 'bottom',
-        showScale: true,
+        label: 'Цена товара',
+        labelPlacement: 'outer',
+        rangeValuesPlacement: 'outer',
+        showRangeValues: true,
         showCurrentValue: false,
-        showIcon: true,
-        reversed: false,
-        labelReversed: false,
-        disabled: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -206,7 +141,7 @@ const StoryMultipleValues = (args: StoryProps) => {
     };
 
     return (
-        <SliderWrapper isVertical={args.orientation === 'vertical'}>
+        <SliderWrapper>
             <Slider
                 value={value}
                 onKeyDownTextField={onKeyDownTextField}
@@ -223,7 +158,6 @@ export const MultipleValues: StoryDouble = {
     args: {
         view: 'default',
         size: 'm',
-        pointerSize: 'small',
         min: 0,
         max: 100,
         disabled: false,
@@ -231,14 +165,5 @@ export const MultipleValues: StoryDouble = {
         ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
         multipleStepSize: 10,
     },
-    argTypes: {
-        pointerSize: {
-            options: ['small', 'large'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        ...disableProps(['orientation']),
-    },
     render: (args) => <StoryMultipleValues {...args} />,
 };

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

@@ -86,7 +86,7 @@ export var notificationRoot = function notificationRoot(Root) {
     })))));
   });
 };
-export var noticationConfig = {
+export var notificationConfig = {
   name: 'Notification',
   tag: 'div',
   layout: notificationRoot,

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

@@ -10,9 +10,9 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="Notification" />
 
 ## Использование
-Компонент `Notification` может использоваться для создания собственных систем оповещения. 
+Компонент `Notification` может использоваться для создания собственных систем оповещения.
 Вид компонента контролируется свойствами (props).
-Текстовая часть оповещения состоит из `title` и `children`. 
+Текстовая часть оповещения состоит из `title` и `children`.
 Слева или сверху от нее, также можно пробросить иконку через свойство `icon`.
 Также есть часть `actions`, в которой предполагается отображение кнопок для взаимодействия.
 
@@ -34,24 +34,32 @@ ReactDOM.render(
 ```
 
 ### Вызов уведомления
-После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
-Функция принимает значения свойств компонента `Notification`:
+После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`, который приведет к отображению оповещения.
+Функция принимает значения свойств компонента `Notification`, включая необязательное поле `id`. И возвращает сгенерированный или переданный `id`, по которому можно закрыть оповещение через вызов `closeNotification`.
 
 ```tsx live
 import React from 'react';
-import { Button, addNotification, NotificationsProvider } from '@salutejs/{{ package }}';
+import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
 
 export function App() {
-    const handleClick = React.useCallback(() => {
+    const handleShow = React.useCallback(() => {
         addNotification({
+            id: 'incoming-call',
             title: 'Входящий вызов',
             children: 'Принять?',
         }, 1000);
     }, []);
 
+    const handleHide = React.useCallback(() => {
+        closeNotification('incoming-call');
+    }, []);
+
     return (
         <NotificationsProvider>
-            <Button text="Показать оповещение" onClick={handleClick} />
+            <ButtonGroup>
+                <Button text="Показать оповещение" onClick={handleShow} />
+                <Button text="Скрыть оповещение" onClick={handleHide} />
+            </ButtonGroup>
         </NotificationsProvider>
     );
 }

package/styled-components/es/components/Notification/NotificationsPortal.js

@@ -24,7 +24,9 @@ var StyledPopup = /*#__PURE__*/styled(Popup).withConfig({
  */
 export var NotificationsPortal = function NotificationsPortal(_ref) {
   var config = _ref.config,
-    frame = _ref.frame;
+    frame = _ref.frame,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-right' : _ref$placement;
   var _useStoreon = useStoreon('notifications'),
     notifications = _useStoreon.notifications;
   var Notification = useMemo(function () {
@@ -33,7 +35,7 @@ export var NotificationsPortal = function NotificationsPortal(_ref) {
   return /*#__PURE__*/React.createElement(PopupProvider, null, notifications.length > 0 && /*#__PURE__*/React.createElement(StyledPopup, {
     opened: true,
     frame: frame,
-    placement: "bottom-right",
+    placement: placement,
     zIndex: "9100"
   }, /*#__PURE__*/React.createElement(StyledRoot, null, notifications.map(function (_ref2) {
     var id = _ref2.id,

package/styled-components/es/components/Notification/NotificationsProvider.js

@@ -5,11 +5,13 @@ import { NotificationsPortal } from './NotificationsPortal';
 export var NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     config = _ref.config,
-    frame = _ref.frame;
+    frame = _ref.frame,
+    placement = _ref.placement;
   return /*#__PURE__*/React.createElement(StoreContext.Provider, {
     value: NotificationsStore
   }, children, /*#__PURE__*/React.createElement(NotificationsPortal, {
     frame: frame,
+    placement: placement,
     config: config
   }));
 };

package/styled-components/es/components/Notification/index.js

@@ -1,4 +1,4 @@
 export { NotificationsProvider } from './NotificationsProvider';
-export { notificationRoot, noticationConfig } from './Notification';
+export { notificationRoot, notificationConfig } from './Notification';
 export { addNotification, closeNotification } from './NotificationsStore';
 export { classes as notificationClasses, tokens as notificationTokens } from './Notification.tokens';

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

@@ -4,13 +4,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 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); }
 import React, { forwardRef } from 'react';
-import { cx } from '../../utils';
 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, DoubleUncontrolled } from './components';
-import { classes } from './Slider.tokens';
-
 // TODO: проверить, можно ли обойтись без каста типов
 
 var isSingleValueProps = function isSingleValueProps(props, type) {
@@ -24,15 +21,9 @@ export var sliderRoot = function sliderRoot(Root) {
     var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'single' : _ref$type,
       props = _objectWithoutProperties(_ref, _excluded);
-    if (isSingleValueProps(props, type)) {
-      return /*#__PURE__*/React.createElement(Root, _extends({}, props, {
-        className: cx(props.orientation === 'vertical' && classes.verticalOrientation, props.className),
-        ref: ref
-      }), /*#__PURE__*/React.createElement(SingleSlider, props));
-    }
-    return /*#__PURE__*/React.createElement(Root, _extends({
+    return /*#__PURE__*/React.createElement(Root, _extends({}, props, {
       ref: ref
-    }, props), isDoubleValueProps(props, type) && /*#__PURE__*/React.createElement(DoubleUncontrolled, props));
+    }), isSingleValueProps(props, type) && /*#__PURE__*/React.createElement(SingleSlider, props), isDoubleValueProps(props, type) && /*#__PURE__*/React.createElement(DoubleUncontrolled, props));
   });
 };
 export var sliderConfig = {

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

@@ -76,29 +76,3 @@ export function App() {
     );
 }
 ```
-
-# Вертикальное отображение
-
-```tsx live
-import React from 'react';
-import { Slider  } from '@salutejs/{{ package }}';
-import { IconMic } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <section>
-            <Slider
-                onChangeCommitted={() => {}}
-                min={0}
-                max={100}
-                value={30}
-                label="Громкость"
-                labelContent={<IconMic size="s" />}
-                orientation="vertical"
-                sliderAlign="center"
-                size="m"
-            />
-        </section>
-    );
-}
-```

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

@@ -1,12 +1,6 @@
 export var classes = {
   labelPlacementOuter: 'slider-label-placement-outer',
   labelPlacementInner: 'slider-label-placement-inner',
-  labelPlacementBottom: 'slider-label-placement-bottom',
-  labelAlignLeft: 'slider-label-align-left',
-  labelAlignCenter: 'slider-label-align-center',
-  labelAlignRight: 'slider-label-align-right',
-  labelAlignNone: 'slider-label-align-none',
-  labelContentReversed: 'slider-label-content-reversed',
   rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
   rangeValuesPlacementInner: 'slider-range-values-placement-inner',
   maxRangeValue: 'slider-max-range-value',
@@ -15,17 +9,13 @@ export var classes = {
   textFieldActive: 'slider-text-field-active',
   firstTextField: 'slider-first-text-field',
   secondTextField: 'slider-second-text-field',
-  activeRangeValue: 'slider-active-range-value',
-  verticalOrientation: 'slider-vertical-orientation',
-  valuePlacementLeft: 'slider-value-placement-left',
-  reversed: 'slider-reversed'
+  activeRangeValue: 'slider-active-range-value'
 };
 export var tokens = {
-  size: '--plasma-slider-size',
+  height: '--plasma-slider-height',
   labelWrapperGap: '--plasma-slider-label-wrapper-gap',
   labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
   labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
-  labelWrapperVerticalMargin: '--plasma-slider-label-wrapper-vertical-margin',
   labelColor: '--plasma-slider-label-color',
   labelFontFamily: '--plasma-slider-label-font-family',
   labelFontSize: '--plasma-slider-label-font-size',
@@ -33,27 +23,31 @@ export var tokens = {
   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',
-  rangeValueHorizontalMargin: '--plasma-slider-range-value-horizontal-margin',
-  rangeValueHorizontalOffset: '--plasma-slider-range-value-horizontal-offset',
-  rangeValueVerticalMargin: '--plasma-slider-range-value-vertical-margin',
   rangeValueColor: '--plasma-slider-range-value-color',
-  valueFontFamily: '--plasma-slider-value-font-family',
-  valueFontSize: '--plasma-slider-value-font-size',
-  valueFontStyle: '--plasma-slider-value-font-style',
-  valueFontWeight: '--plasma-slider-value-font-weight',
-  valueLetterSpacing: '--plasma-slider-value-letter-spacing',
-  valueLineHeight: '--plasma-slider-value-line-height',
+  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',
-  thumbSizeLarge: '--plasma-slider-thumb-size-large',
   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',
-  railThickness: '--plasma-slider-rail-thickness',
+  railHeight: '--plasma-slider-rail-height',
   railBorderRadius: '--plasma-slider-rail-border-radius',
   railIndent: '--plasma-slider-rail-indent',
   fillColor: '--plasma-slider-fill-color',

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

@@ -1,5 +1,5 @@
 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 _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "pointerSize", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
+var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
 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; }
@@ -38,8 +38,6 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     labelContentLeft = _ref.labelContentLeft,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
-    _ref$pointerSize = _ref.pointerSize,
-    pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
     onChangeCommitted = _ref.onChangeCommitted,
     onChangeTextField = _ref.onChangeTextField,
     onBlurTextField = _ref.onBlurTextField,
@@ -66,30 +64,20 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     setState = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    firstInputHovered = _useState4[0],
-    setFirstInputHovered = _useState4[1];
+    firstInputActive = _useState4[0],
+    setFirstInputActive = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    firstInputFocused = _useState6[0],
-    setFirstInputFocused = _useState6[1];
-  var _useState7 = useState(false),
+    secondInputActive = _useState6[0],
+    setSecondInputActive = _useState6[1];
+  var _useState7 = useState(value[0]),
     _useState8 = _slicedToArray(_useState7, 2),
-    secondInputHovered = _useState8[0],
-    setSecondInputHovered = _useState8[1];
-  var _useState9 = useState(false),
+    firstValue = _useState8[0],
+    setFirstValue = _useState8[1];
+  var _useState9 = useState(value[1]),
     _useState10 = _slicedToArray(_useState9, 2),
-    secondInputFocused = _useState10[0],
-    setSecondInputFocused = _useState10[1];
-  var firstInputActive = firstInputHovered || firstInputFocused;
-  var secondInputActive = secondInputHovered || secondInputFocused;
-  var _useState11 = useState(value[0]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    firstValue = _useState12[0],
-    setFirstValue = _useState12[1];
-  var _useState13 = useState(value[1]),
-    _useState14 = _slicedToArray(_useState13, 2),
-    secondValue = _useState14[0],
-    setSecondValue = _useState14[1];
+    secondValue = _useState10[0],
+    setSecondValue = _useState10[1];
   var firstHandleRef = useRef(null);
   var secondHandleRef = useRef(null);
   var firstHandleValue = useRef(value[0]);
@@ -114,16 +102,6 @@ export var DoubleSlider = function DoubleSlider(_ref) {
       });
     });
   }, [value, stepSize, min, max, setFirstValue, setSecondValue]);
-  useEffect(function () {
-    var onMouseUp = function onMouseUp() {
-      setFirstInputFocused(false);
-      setSecondInputFocused(false);
-    };
-    window.addEventListener('mouseup', onMouseUp);
-    return function () {
-      window.removeEventListener('mouseup', onMouseUp);
-    };
-  }, []);
   var setStepSize = useCallback(function (newStepSize) {
     setState(function (prevState) {
       return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -265,20 +243,16 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     ariaLabelLeft = _ref3[0],
     ariaLabelRight = _ref3[1];
   var currentFirstSliderValue = Math.max(state.firstValue, min);
-  var settings = sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
   return /*#__PURE__*/React.createElement(DoubleWrapper, null, hasLabelContent && /*#__PURE__*/React.createElement(LabelWrapper, null, labelContentLeft && /*#__PURE__*/React.createElement(LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(SliderWrapper, null, /*#__PURE__*/React.createElement(SliderBase, _extends({
     min: min,
     max: max,
-    size: size,
     disabled: disabled,
     setStepSize: setStepSize,
     railFillWidth: state.railFillWidth,
-    settings: settings,
-    railFillXPosition: state.railFillXPosition,
-    orientation: "horizontal"
+    settings: sizeData[size],
+    railFillXPosition: state.railFillXPosition
   }, rest), /*#__PURE__*/React.createElement(Handler, {
     ref: firstHandleRef,
-    size: pointerSize,
     stepSize: state.stepSize,
     multipleStepSize: multipleStepSize,
     onChangeCommitted: onFirstHandleChangeCommitted,
@@ -288,23 +262,18 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     disabled: disabled,
     bounds: [min, state.secondValue],
     side: "left",
-    orientation: "horizontal",
-    position: state.xFirstHandle,
+    xPosition: state.xFirstHandle,
     zIndex: state.firstHandleZIndex,
     value: currentFirstSliderValue,
     ariaLabel: ariaLabelLeft,
-    onMouseDown: function onMouseDown() {
-      return setFirstInputFocused(true);
-    },
     onMouseEnter: function onMouseEnter() {
-      return setFirstInputHovered(true);
+      return setFirstInputActive(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setFirstInputHovered(false);
+      return setFirstInputActive(false);
     }
   }), /*#__PURE__*/React.createElement(Handler, {
     ref: secondHandleRef,
-    size: pointerSize,
     stepSize: state.stepSize,
     multipleStepSize: multipleStepSize,
     onChangeCommitted: onSecondHandleChangeCommitted,
@@ -315,19 +284,15 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     disabled: disabled,
     bounds: [state.firstValue, max],
     side: "right",
-    orientation: "horizontal",
-    position: state.xSecondHandle,
+    xPosition: state.xSecondHandle,
     zIndex: state.secondHandleZIndex,
     value: Math.max(state.secondValue, min),
     ariaLabel: ariaLabelRight,
-    onMouseDown: function onMouseDown() {
-      return setSecondInputFocused(true);
-    },
     onMouseEnter: function onMouseEnter() {
-      return setSecondInputHovered(true);
+      return setSecondInputActive(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setSecondInputHovered(false);
+      return setSecondInputActive(false);
     }
   })), /*#__PURE__*/React.createElement(InputsWrapper, null, /*#__PURE__*/React.createElement(StyledInput, {
     className: cx(classes.firstTextField, firstInputActiveClass),