@salutejs/plasma-new-hope 0.176.0-canary.1511.11569320253.0 → 0.176.0-canary.1511.11570259013.0

package/emotion/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx

@@ -4,14 +4,18 @@ 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 labelPlacements = ['outer', 'inner'];
-const rangeValuesPlacement = ['outer', 'inner'];
+const sliderAligns = ['center', 'left', 'right', 'none'];
+const labelPlacements = ['top', 'left'];
+const scaleAligns = ['side', 'bottom'];
+const orientations: Array<string> = ['vertical', 'horizontal'];
 
 const meta: Meta<typeof Slider> = {
     title: 'plasma_web/Slider',
@@ -30,9 +34,24 @@ 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',
@@ -40,6 +59,14 @@ const meta: Meta<typeof Slider> = {
             'settings',
             'hasHoverAnimation',
             'type',
+            'labelContentLeft',
+            'rangeValuesPlacement',
+            'name',
+            'defaultValue',
+            'labelContent',
+            'showRangeValues',
+            'hideMinValueDiff',
+            'hideMaxValueDiff',
         ]),
     },
 };
@@ -52,8 +79,9 @@ type StorySingleProps = StoryProps;
 type StorySingle = StoryObj<StorySingleProps>;
 type StoryDouble = StoryObj<StoryProps>;
 
-const SliderWrapper = styled.div`
-    width: 25rem;
+const SliderWrapper = styled.div<{ isVertical?: boolean }>`
+    width: ${({ isVertical }) => (isVertical ? 'auto' : '25rem')};
+    height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
 `;
 
 const StoryDefault = (args: StorySingleProps) => {
@@ -67,41 +95,86 @@ const StoryDefault = (args: StorySingleProps) => {
         setValue(values);
     };
 
+    const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
+    const isVertical = orientation === 'vertical';
+
     return (
-        <SliderWrapper>
-            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
+        <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>
     );
 };
 
 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' },
         },
-        rangeValuesPlacement: {
-            options: rangeValuesPlacement,
+        orientation: {
+            options: orientations,
             control: {
                 type: 'inline-radio',
             },
         },
+        reversed: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'orientation', eq: 'vertical' },
+        },
     },
     args: {
         view: 'default',
         size: 'm',
+        pointerSize: 'small',
         min: 0,
         max: 100,
-        disabled: false,
-        ariaLabel: 'Цена товара',
+        orientation: 'horizontal',
+        ariaLabel: 'Цена микрофона',
         multipleStepSize: 10,
-        label: 'Цена товара',
-        labelPlacement: 'outer',
-        rangeValuesPlacement: 'outer',
-        showRangeValues: true,
+        label: 'Цена микрофона',
+        labelPlacement: 'top',
+        sliderAlign: 'center',
+        scaleAlign: 'bottom',
+        showScale: true,
         showCurrentValue: false,
+        showIcon: true,
+        reversed: false,
+        labelReversed: false,
+        disabled: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -141,7 +214,7 @@ const StoryMultipleValues = (args: StoryProps) => {
     };
 
     return (
-        <SliderWrapper>
+        <SliderWrapper isVertical={args.orientation === 'vertical'}>
             <Slider
                 value={value}
                 onKeyDownTextField={onKeyDownTextField}
@@ -158,6 +231,7 @@ export const MultipleValues: StoryDouble = {
     args: {
         view: 'default',
         size: 'm',
+        pointerSize: 'small',
         min: 0,
         max: 100,
         disabled: false,
@@ -165,5 +239,14 @@ export const MultipleValues: StoryDouble = {
         ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
         multipleStepSize: 10,
     },
+    argTypes: {
+        pointerSize: {
+            options: ['small', 'large'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...disableProps(['orientation']),
+    },
     render: (args) => <StoryMultipleValues {...args} />,
 };

package/emotion/es/components/NumberInput/NumberInput.tokens.js

@@ -23,11 +23,12 @@ export var tokens = {
   disabledOpacity: '--plasma-number-input_disabled-opacity',
   // Action button view tokens
   iconButtonColor: '--plasma-number-input_icon-button_color',
-  iconButtonColorSolidHover: '--plasma-number-input_icon-button_color_solid-hover',
   iconButtonBackgroundColor: '--plasma-number-input_icon-button_background-color',
   iconButtonColorHover: '--plasma-number-input_icon-button_color-hover',
+  iconButtonColorSolidHover: '--plasma-number-input_icon-button_color_solid-hover',
   iconButtonBackgroundColorHover: '--plasma-number-input_icon-button_background-color-hover',
   iconButtonColorActive: '--plasma-number-input_icon-button_color-active',
+  iconButtonColorSolidActive: '--plasma-number-input_icon-button_color_solid-active',
   iconButtonBackgroundColorActive: '--plasma-number-input_icon-button_background-color-active',
   actionButtonDisabledOpacity: '--plasma-number-input_action-button_disabled-opacity',
   // Action button size tokens

package/emotion/es/components/NumberInput/ui/Input/Input.js

@@ -176,7 +176,7 @@ export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: handleClickInputWrapper
   }, /*#__PURE__*/React.createElement(TextWrapper, {
     ref: textWrapperRef
-  }, textBefore && /*#__PURE__*/React.createElement(AdditionalText, {
+  }, !isLoading && textBefore && /*#__PURE__*/React.createElement(AdditionalText, {
     className: classes.textBefore
   }, textBefore), isLoading ? /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))) : /*#__PURE__*/React.createElement(DynamicInput, null, /*#__PURE__*/React.createElement(Input, _extends({
     ref: inputForkRef,
@@ -192,7 +192,7 @@ export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   }, rest)), /*#__PURE__*/React.createElement(InputWidthHelper, {
     ref: inputHelperRef
-  }, value)), textAfter && /*#__PURE__*/React.createElement(AdditionalText, {
+  }, value)), !isLoading && textAfter && /*#__PURE__*/React.createElement(AdditionalText, {
     className: classes.textAfter
   }, textAfter)));
 });

package/emotion/es/components/NumberInput/variations/_segmentation/base.js

@@ -3,4 +3,4 @@ import { classes, privateTokens, tokens } from '../../NumberInput.tokens';
 import { StyledIconButton } from '../../ui/ActionButton/ActionButton.styles';
 import { AdditionalText, Input, InputWrapper, StyledSpinner } from '../../ui/Input/Input.styles';
 import { spinnerTokens } from '../../../Spinner';
-export var base = /*#__PURE__*/css(InputWrapper, "{border-radius:var(", tokens.inputWrapperBorderRadius, ");}", StyledIconButton, "{", privateTokens.segmentationBorderRadius, ":var(", tokens.iconButtonRadius, ");&.", classes.segmentedView, ",&.", classes.solidView, "{", privateTokens.segmentationBorderRadius, ":var(", tokens.iconButtonSegmentationRadius, ", var(", tokens.iconButtonRadius, "));}&.", classes.actionButtonDecrement, "{border-radius:var(", tokens.iconButtonRadius, ") var(", privateTokens.segmentationBorderRadius, ") var(", privateTokens.segmentationBorderRadius, ") var(", tokens.iconButtonRadius, ");}&.", classes.actionButtonIncrement, "{border-radius:var(", privateTokens.segmentationBorderRadius, ") var(", tokens.iconButtonRadius, ") var(", tokens.iconButtonRadius, ") var(", privateTokens.segmentationBorderRadius, ");}}&.", classes.segmentedView, "{", InputWrapper, "{border-radius:var(", tokens.iconButtonSegmentationRadius, ");}}&.", classes.solidView, "{position:relative;&:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(100% - var(", tokens.iconButtonWidth, ") * 2);height:100%;background:var(", tokens.backgroundColorSolid, ");}", InputWrapper, "{position:relative;color:var(", tokens.colorSolid, ");&:not(", classes.errorAnimation, ").", classes.manualInput, ":focus-within{background-color:var(", tokens.backgroundColorSolidFocus, ");box-shadow:inset 0 0 0 var(", tokens.inputWrapperBorderWidth, ") var(", tokens.borderColorSolidFocus, ");}}", StyledIconButton, "{:hover,:active{background-color:var(", tokens.iconButtonBackgroundColor, ");color:var(", tokens.iconButtonColorSolidHover, ");}&.", classes.actionButtonDecrementDisabled, ",&.", classes.actionButtonIncrementDisabled, "{opacity:1;svg{opacity:var(", tokens.actionButtonDisabledOpacity, ");}:hover,:active{color:var(", tokens.iconButtonColor, ");svg{opacity:var(", tokens.actionButtonDisabledOpacity, ");}}}}&.", classes.clearView, "{", StyledIconButton, "{&.", classes.actionButtonDecrementDisabled, ",&.", classes.actionButtonIncrementDisabled, "{:hover,:active{background-color:transparent;}}}}", StyledSpinner, "{", spinnerTokens.color, ":var(", tokens.loaderSpinnerColorSolid, ");}", Input, "{caret-color:var(", tokens.caretColorSolid, ", var(", tokens.caretColor, "));&:not(.", classes.errorAnimation, "){color:var(", tokens.colorSolid, ");}}", AdditionalText, "{color:var(", tokens.additionalTextColorSolid, ");}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTnVtYmVySW5wdXQvdmFyaWF0aW9ucy9fc2VnbWVudGF0aW9uL2Jhc2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT3VCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTnVtYmVySW5wdXQvdmFyaWF0aW9ucy9fc2VnbWVudGF0aW9uL2Jhc2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHByaXZhdGVUb2tlbnMsIHRva2VucyB9IGZyb20gJy4uLy4uL051bWJlcklucHV0LnRva2Vucyc7XG5pbXBvcnQgeyBTdHlsZWRJY29uQnV0dG9uIH0gZnJvbSAnLi4vLi4vdWkvQWN0aW9uQnV0dG9uL0FjdGlvbkJ1dHRvbi5zdHlsZXMnO1xuaW1wb3J0IHsgQWRkaXRpb25hbFRleHQsIElucHV0LCBJbnB1dFdyYXBwZXIsIFN0eWxlZFNwaW5uZXIgfSBmcm9tICcuLi8uLi91aS9JbnB1dC9JbnB1dC5zdHlsZXMnO1xuaW1wb3J0IHsgc3Bpbm5lclRva2VucyB9IGZyb20gJy4uLy4uLy4uL1NwaW5uZXInO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICAke0lucHV0V3JhcHBlcn0ge1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuaW5wdXRXcmFwcGVyQm9yZGVyUmFkaXVzfSk7XG4gICAgfVxuXG4gICAgJHtTdHlsZWRJY29uQnV0dG9ufSB7XG4gICAgICAgICR7cHJpdmF0ZVRva2Vucy5zZWdtZW50YXRpb25Cb3JkZXJSYWRpdXN9OiB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pO1xuXG4gICAgICAgICYuJHtjbGFzc2VzLnNlZ21lbnRlZFZpZXd9LCAmLiR7Y2xhc3Nlcy5zb2xpZFZpZXd9IHtcbiAgICAgICAgICAgICR7cHJpdmF0ZVRva2Vucy5zZWdtZW50YXRpb25Cb3JkZXJSYWRpdXN9OiB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblNlZ21lbnRhdGlvblJhZGl1c30sIHZhcigke3Rva2Vucy5pY29uQnV0dG9uUmFkaXVzfSkpO1xuICAgICAgICB9XG5cbiAgICAgICAgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uRGVjcmVtZW50fSB7XG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pIHZhcigke3ByaXZhdGVUb2tlbnMuc2VnbWVudGF0aW9uQm9yZGVyUmFkaXVzfSkgdmFyKCR7cHJpdmF0ZVRva2Vucy5zZWdtZW50YXRpb25Cb3JkZXJSYWRpdXN9KSB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pO1xuICAgICAgICB9XG5cbiAgICAgICAgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uSW5jcmVtZW50fSB7XG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHtwcml2YXRlVG9rZW5zLnNlZ21lbnRhdGlvbkJvcmRlclJhZGl1c30pIHZhcigke3Rva2Vucy5pY29uQnV0dG9uUmFkaXVzfSkgdmFyKCR7dG9rZW5zLmljb25CdXR0b25SYWRpdXN9KSB2YXIoJHtwcml2YXRlVG9rZW5zLnNlZ21lbnRhdGlvbkJvcmRlclJhZGl1c30pO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgJi4ke2NsYXNzZXMuc2VnbWVudGVkVmlld30ge1xuICAgICAgICAke0lucHV0V3JhcHBlcn0ge1xuICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLmljb25CdXR0b25TZWdtZW50YXRpb25SYWRpdXN9KTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnNvbGlkVmlld30ge1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAgICAgJjpiZWZvcmUge1xuICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICB0b3A6IDA7XG4gICAgICAgICAgICBsZWZ0OiA1MCU7XG4gICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSk7XG4gICAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gdmFyKCR7dG9rZW5zLmljb25CdXR0b25XaWR0aH0pICogMik7XG4gICAgICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMuYmFja2dyb3VuZENvbG9yU29saWR9KTtcbiAgICAgICAgfVxuXG4gICAgICAgICR7SW5wdXRXcmFwcGVyfSB7XG4gICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmNvbG9yU29saWR9KTtcbiAgICAgICAgICAgIFxuICAgICAgICAgICAgJjpub3QoJHtjbGFzc2VzLmVycm9yQW5pbWF0aW9ufSkuJHtjbGFzc2VzLm1hbnVhbElucHV0fTpmb2N1cy13aXRoaW4ge1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5iYWNrZ3JvdW5kQ29sb3JTb2xpZEZvY3VzfSk7XG4gICAgICAgICAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmlucHV0V3JhcHBlckJvcmRlcldpZHRofSkgdmFyKCR7dG9rZW5zLmJvcmRlckNvbG9yU29saWRGb2N1c30pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJHtTdHlsZWRJY29uQnV0dG9ufSB7XG4gICAgICAgICAgICA6aG92ZXIsXG4gICAgICAgICAgICA6YWN0aXZlIHsgICAgICAgICAgICAgICAgXG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3J9KTtcbiAgICAgICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmljb25CdXR0b25Db2xvclNvbGlkSG92ZXJ9KTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uRGVjcmVtZW50RGlzYWJsZWR9LCAmLiR7Y2xhc3Nlcy5hY3Rpb25CdXR0b25JbmNyZW1lbnREaXNhYmxlZH0ge1xuICAgICAgICAgICAgICAgIG9wYWNpdHk6IDE7XG5cbiAgICAgICAgICAgICAgICBzdmcge1xuICAgICAgICAgICAgICAgICAgICBvcGFjaXR5OiB2YXIoJHt0b2tlbnMuYWN0aW9uQnV0dG9uRGlzYWJsZWRPcGFjaXR5fSk7XG4gICAgICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAgICAgOmhvdmVyLFxuICAgICAgICAgICAgICAgIDphY3RpdmUge1xuICAgICAgICAgICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmljb25CdXR0b25Db2xvcn0pO1xuXG4gICAgICAgICAgICAgICAgICAgIHN2ZyB7XG4gICAgICAgICAgICAgICAgICAgICAgICBvcGFjaXR5OiB2YXIoJHt0b2tlbnMuYWN0aW9uQnV0dG9uRGlzYWJsZWRPcGFjaXR5fSk7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cblxuICAgICAgICAmLiR7Y2xhc3Nlcy5jbGVhclZpZXd9IHtcbiAgICAgICAgICAgICR7U3R5bGVkSWNvbkJ1dHRvbn0ge1xuICAgICAgICAgICAgICAgICYuJHtjbGFzc2VzLmFjdGlvbkJ1dHRvbkRlY3JlbWVudERpc2FibGVkfSwgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uSW5jcmVtZW50RGlzYWJsZWR9IHtcbiAgICAgICAgICAgICAgICAgICAgOmhvdmVyLFxuICAgICAgICAgICAgICAgICAgICA6YWN0aXZlIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJHtTdHlsZWRTcGlubmVyfSB7XG4gICAgICAgICAgICAke3NwaW5uZXJUb2tlbnMuY29sb3J9OiB2YXIoJHt0b2tlbnMubG9hZGVyU3Bpbm5lckNvbG9yU29saWR9KTtcbiAgICAgICAgfVxuICAgIFxuICAgICAgICAke0lucHV0fSB7XG4gICAgICAgICAgICBjYXJldC1jb2xvcjogdmFyKCR7dG9rZW5zLmNhcmV0Q29sb3JTb2xpZH0sIHZhcigke3Rva2Vucy5jYXJldENvbG9yfSkpO1xuXG4gICAgICAgICAgICAmOm5vdCguJHtjbGFzc2VzLmVycm9yQW5pbWF0aW9ufSl7XG4gICAgICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5jb2xvclNvbGlkfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICBcbiAgICAgICAgJHtBZGRpdGlvbmFsVGV4dH0ge1xuICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5hZGRpdGlvbmFsVGV4dENvbG9yU29saWR9KTtcbiAgICAgICAgfVxuICAgIH1cbmA7XG4iXX0= */"));
+export var base = /*#__PURE__*/css(InputWrapper, "{border-radius:var(", tokens.inputWrapperBorderRadius, ");}", StyledIconButton, "{", privateTokens.segmentationBorderRadius, ":var(", tokens.iconButtonRadius, ");&.", classes.segmentedView, ",&.", classes.solidView, "{", privateTokens.segmentationBorderRadius, ":var(", tokens.iconButtonSegmentationRadius, ", var(", tokens.iconButtonRadius, "));}&.", classes.actionButtonDecrement, "{border-radius:var(", tokens.iconButtonRadius, ") var(", privateTokens.segmentationBorderRadius, ") var(", privateTokens.segmentationBorderRadius, ") var(", tokens.iconButtonRadius, ");}&.", classes.actionButtonIncrement, "{border-radius:var(", privateTokens.segmentationBorderRadius, ") var(", tokens.iconButtonRadius, ") var(", tokens.iconButtonRadius, ") var(", privateTokens.segmentationBorderRadius, ");}}&.", classes.segmentedView, "{", InputWrapper, "{border-radius:var(", tokens.iconButtonSegmentationRadius, ");}}&.", classes.solidView, "{position:relative;&:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(100% - var(", tokens.iconButtonWidth, ") * 2);height:100%;background:var(", tokens.backgroundColorSolid, ");}", InputWrapper, "{position:relative;color:var(", tokens.colorSolid, ");&:not(", classes.errorAnimation, ").", classes.manualInput, ":focus-within{background-color:var(", tokens.backgroundColorSolidFocus, ");box-shadow:inset 0 0 0 var(", tokens.inputWrapperBorderWidth, ") var(", tokens.borderColorSolidFocus, ");}}", StyledIconButton, "{:hover,:active{background-color:var(", tokens.iconButtonBackgroundColor, ");}:hover{color:var(", tokens.iconButtonColorSolidHover, ");}:active{color:var(", tokens.iconButtonColorSolidActive, ");}&.", classes.actionButtonDecrementDisabled, ",&.", classes.actionButtonIncrementDisabled, "{opacity:1;svg{opacity:var(", tokens.actionButtonDisabledOpacity, ");}:hover,:active{color:var(", tokens.iconButtonColor, ");svg{opacity:var(", tokens.actionButtonDisabledOpacity, ");}}}}&.", classes.clearView, "{", StyledIconButton, "{&.", classes.actionButtonDecrementDisabled, ",&.", classes.actionButtonIncrementDisabled, "{:hover,:active{background-color:transparent;}}}}", StyledSpinner, "{", spinnerTokens.color, ":var(", tokens.loaderSpinnerColorSolid, ");}", Input, "{caret-color:var(", tokens.caretColorSolid, ", var(", tokens.caretColor, "));&:not(.", classes.errorAnimation, "){color:var(", tokens.colorSolid, ");}}", AdditionalText, "{color:var(", tokens.additionalTextColorSolid, ");}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTnVtYmVySW5wdXQvdmFyaWF0aW9ucy9fc2VnbWVudGF0aW9uL2Jhc2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT3VCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTnVtYmVySW5wdXQvdmFyaWF0aW9ucy9fc2VnbWVudGF0aW9uL2Jhc2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHByaXZhdGVUb2tlbnMsIHRva2VucyB9IGZyb20gJy4uLy4uL051bWJlcklucHV0LnRva2Vucyc7XG5pbXBvcnQgeyBTdHlsZWRJY29uQnV0dG9uIH0gZnJvbSAnLi4vLi4vdWkvQWN0aW9uQnV0dG9uL0FjdGlvbkJ1dHRvbi5zdHlsZXMnO1xuaW1wb3J0IHsgQWRkaXRpb25hbFRleHQsIElucHV0LCBJbnB1dFdyYXBwZXIsIFN0eWxlZFNwaW5uZXIgfSBmcm9tICcuLi8uLi91aS9JbnB1dC9JbnB1dC5zdHlsZXMnO1xuaW1wb3J0IHsgc3Bpbm5lclRva2VucyB9IGZyb20gJy4uLy4uLy4uL1NwaW5uZXInO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICAke0lucHV0V3JhcHBlcn0ge1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuaW5wdXRXcmFwcGVyQm9yZGVyUmFkaXVzfSk7XG4gICAgfVxuXG4gICAgJHtTdHlsZWRJY29uQnV0dG9ufSB7XG4gICAgICAgICR7cHJpdmF0ZVRva2Vucy5zZWdtZW50YXRpb25Cb3JkZXJSYWRpdXN9OiB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pO1xuXG4gICAgICAgICYuJHtjbGFzc2VzLnNlZ21lbnRlZFZpZXd9LCAmLiR7Y2xhc3Nlcy5zb2xpZFZpZXd9IHtcbiAgICAgICAgICAgICR7cHJpdmF0ZVRva2Vucy5zZWdtZW50YXRpb25Cb3JkZXJSYWRpdXN9OiB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblNlZ21lbnRhdGlvblJhZGl1c30sIHZhcigke3Rva2Vucy5pY29uQnV0dG9uUmFkaXVzfSkpO1xuICAgICAgICB9XG5cbiAgICAgICAgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uRGVjcmVtZW50fSB7XG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pIHZhcigke3ByaXZhdGVUb2tlbnMuc2VnbWVudGF0aW9uQm9yZGVyUmFkaXVzfSkgdmFyKCR7cHJpdmF0ZVRva2Vucy5zZWdtZW50YXRpb25Cb3JkZXJSYWRpdXN9KSB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pO1xuICAgICAgICB9XG5cbiAgICAgICAgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uSW5jcmVtZW50fSB7XG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHtwcml2YXRlVG9rZW5zLnNlZ21lbnRhdGlvbkJvcmRlclJhZGl1c30pIHZhcigke3Rva2Vucy5pY29uQnV0dG9uUmFkaXVzfSkgdmFyKCR7dG9rZW5zLmljb25CdXR0b25SYWRpdXN9KSB2YXIoJHtwcml2YXRlVG9rZW5zLnNlZ21lbnRhdGlvbkJvcmRlclJhZGl1c30pO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgJi4ke2NsYXNzZXMuc2VnbWVudGVkVmlld30ge1xuICAgICAgICAke0lucHV0V3JhcHBlcn0ge1xuICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLmljb25CdXR0b25TZWdtZW50YXRpb25SYWRpdXN9KTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnNvbGlkVmlld30ge1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAgICAgJjpiZWZvcmUge1xuICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICB0b3A6IDA7XG4gICAgICAgICAgICBsZWZ0OiA1MCU7XG4gICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSk7XG4gICAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gdmFyKCR7dG9rZW5zLmljb25CdXR0b25XaWR0aH0pICogMik7XG4gICAgICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMuYmFja2dyb3VuZENvbG9yU29saWR9KTtcbiAgICAgICAgfVxuXG4gICAgICAgICR7SW5wdXRXcmFwcGVyfSB7XG4gICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmNvbG9yU29saWR9KTtcbiAgICAgICAgICAgIFxuICAgICAgICAgICAgJjpub3QoJHtjbGFzc2VzLmVycm9yQW5pbWF0aW9ufSkuJHtjbGFzc2VzLm1hbnVhbElucHV0fTpmb2N1cy13aXRoaW4ge1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5iYWNrZ3JvdW5kQ29sb3JTb2xpZEZvY3VzfSk7XG4gICAgICAgICAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmlucHV0V3JhcHBlckJvcmRlcldpZHRofSkgdmFyKCR7dG9rZW5zLmJvcmRlckNvbG9yU29saWRGb2N1c30pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJHtTdHlsZWRJY29uQnV0dG9ufSB7XG4gICAgICAgICAgICA6aG92ZXIsXG4gICAgICAgICAgICA6YWN0aXZlIHsgICAgICAgICAgICAgICAgXG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3J9KTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgOmhvdmVyIHsgICAgICAgICAgICAgICAgXG4gICAgICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5pY29uQnV0dG9uQ29sb3JTb2xpZEhvdmVyfSk7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIDphY3RpdmUgeyAgICAgICAgICAgICAgICBcbiAgICAgICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmljb25CdXR0b25Db2xvclNvbGlkQWN0aXZlfSk7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICYuJHtjbGFzc2VzLmFjdGlvbkJ1dHRvbkRlY3JlbWVudERpc2FibGVkfSwgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uSW5jcmVtZW50RGlzYWJsZWR9IHtcbiAgICAgICAgICAgICAgICBvcGFjaXR5OiAxO1xuXG4gICAgICAgICAgICAgICAgc3ZnIHtcbiAgICAgICAgICAgICAgICAgICAgb3BhY2l0eTogdmFyKCR7dG9rZW5zLmFjdGlvbkJ1dHRvbkRpc2FibGVkT3BhY2l0eX0pO1xuICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgIDpob3ZlcixcbiAgICAgICAgICAgICAgICA6YWN0aXZlIHtcbiAgICAgICAgICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5pY29uQnV0dG9uQ29sb3J9KTtcblxuICAgICAgICAgICAgICAgICAgICBzdmcge1xuICAgICAgICAgICAgICAgICAgICAgICAgb3BhY2l0eTogdmFyKCR7dG9rZW5zLmFjdGlvbkJ1dHRvbkRpc2FibGVkT3BhY2l0eX0pO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJi4ke2NsYXNzZXMuY2xlYXJWaWV3fSB7XG4gICAgICAgICAgICAke1N0eWxlZEljb25CdXR0b259IHtcbiAgICAgICAgICAgICAgICAmLiR7Y2xhc3Nlcy5hY3Rpb25CdXR0b25EZWNyZW1lbnREaXNhYmxlZH0sICYuJHtjbGFzc2VzLmFjdGlvbkJ1dHRvbkluY3JlbWVudERpc2FibGVkfSB7XG4gICAgICAgICAgICAgICAgICAgIDpob3ZlcixcbiAgICAgICAgICAgICAgICAgICAgOmFjdGl2ZSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgICR7U3R5bGVkU3Bpbm5lcn0ge1xuICAgICAgICAgICAgJHtzcGlubmVyVG9rZW5zLmNvbG9yfTogdmFyKCR7dG9rZW5zLmxvYWRlclNwaW5uZXJDb2xvclNvbGlkfSk7XG4gICAgICAgIH1cbiAgICBcbiAgICAgICAgJHtJbnB1dH0ge1xuICAgICAgICAgICAgY2FyZXQtY29sb3I6IHZhcigke3Rva2Vucy5jYXJldENvbG9yU29saWR9LCB2YXIoJHt0b2tlbnMuY2FyZXRDb2xvcn0pKTtcblxuICAgICAgICAgICAgJjpub3QoLiR7Y2xhc3Nlcy5lcnJvckFuaW1hdGlvbn0pe1xuICAgICAgICAgICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuY29sb3JTb2xpZH0pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgXG4gICAgICAgICR7QWRkaXRpb25hbFRleHR9IHtcbiAgICAgICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuYWRkaXRpb25hbFRleHRDb2xvclNvbGlkfSk7XG4gICAgICAgIH1cbiAgICB9XG5gO1xuIl19 */"));

package/emotion/es/components/Slider/Slider.js

@@ -4,10 +4,13 @@ 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) {
@@ -21,9 +24,15 @@ export var sliderRoot = function sliderRoot(Root) {
     var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'single' : _ref$type,
       props = _objectWithoutProperties(_ref, _excluded);
-    return /*#__PURE__*/React.createElement(Root, _extends({}, props, {
+    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({
       ref: ref
-    }), isSingleValueProps(props, type) && /*#__PURE__*/React.createElement(SingleSlider, props), isDoubleValueProps(props, type) && /*#__PURE__*/React.createElement(DoubleUncontrolled, props));
+    }, props), isDoubleValueProps(props, type) && /*#__PURE__*/React.createElement(DoubleUncontrolled, props));
   });
 };
 export var sliderConfig = {

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

@@ -76,3 +76,29 @@ 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 style={{ height: '300px' }}>
+            <Slider
+                onChangeCommitted={() => {}}
+                min={0}
+                max={100}
+                value={30}
+                label="Громкость"
+                labelContent={<IconMic size="s" />}
+                orientation="vertical"
+                sliderAlign="center"
+                size="m"
+            />
+        </section>
+    );
+}
+```

package/emotion/es/components/Slider/Slider.tokens.js

@@ -1,6 +1,12 @@
 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',
@@ -9,13 +15,17 @@ export var classes = {
   textFieldActive: 'slider-text-field-active',
   firstTextField: 'slider-first-text-field',
   secondTextField: 'slider-second-text-field',
-  activeRangeValue: 'slider-active-range-value'
+  activeRangeValue: 'slider-active-range-value',
+  verticalOrientation: 'slider-vertical-orientation',
+  valuePlacementLeft: 'slider-value-placement-left',
+  reversed: 'slider-reversed'
 };
 export var tokens = {
-  height: '--plasma-slider-height',
+  size: '--plasma-slider-size',
   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',
@@ -23,31 +33,27 @@ 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',
-  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',
+  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',
   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',
-  railHeight: '--plasma-slider-rail-height',
+  railThickness: '--plasma-slider-rail-thickness',
   railBorderRadius: '--plasma-slider-rail-border-radius',
   railIndent: '--plasma-slider-rail-indent',
   fillColor: '--plasma-slider-fill-color',

package/emotion/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", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
+var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "pointerSize", "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,6 +38,8 @@ 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,
@@ -64,20 +66,30 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     setState = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    firstInputActive = _useState4[0],
-    setFirstInputActive = _useState4[1];
+    firstInputHovered = _useState4[0],
+    setFirstInputHovered = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    secondInputActive = _useState6[0],
-    setSecondInputActive = _useState6[1];
-  var _useState7 = useState(value[0]),
+    firstInputFocused = _useState6[0],
+    setFirstInputFocused = _useState6[1];
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    firstValue = _useState8[0],
-    setFirstValue = _useState8[1];
-  var _useState9 = useState(value[1]),
+    secondInputHovered = _useState8[0],
+    setSecondInputHovered = _useState8[1];
+  var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    secondValue = _useState10[0],
-    setSecondValue = _useState10[1];
+    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];
   var firstHandleRef = useRef(null);
   var secondHandleRef = useRef(null);
   var firstHandleValue = useRef(value[0]);
@@ -102,6 +114,16 @@ 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), {}, {
@@ -243,16 +265,20 @@ 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: sizeData[size],
-    railFillXPosition: state.railFillXPosition
+    settings: settings,
+    railFillXPosition: state.railFillXPosition,
+    orientation: "horizontal"
   }, rest), /*#__PURE__*/React.createElement(Handler, {
     ref: firstHandleRef,
+    size: pointerSize,
     stepSize: state.stepSize,
     multipleStepSize: multipleStepSize,
     onChangeCommitted: onFirstHandleChangeCommitted,
@@ -262,18 +288,23 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     disabled: disabled,
     bounds: [min, state.secondValue],
     side: "left",
-    xPosition: state.xFirstHandle,
+    orientation: "horizontal",
+    position: state.xFirstHandle,
     zIndex: state.firstHandleZIndex,
     value: currentFirstSliderValue,
     ariaLabel: ariaLabelLeft,
+    onMouseDown: function onMouseDown() {
+      return setFirstInputFocused(true);
+    },
     onMouseEnter: function onMouseEnter() {
-      return setFirstInputActive(true);
+      return setFirstInputHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setFirstInputActive(false);
+      return setFirstInputHovered(false);
     }
   }), /*#__PURE__*/React.createElement(Handler, {
     ref: secondHandleRef,
+    size: pointerSize,
     stepSize: state.stepSize,
     multipleStepSize: multipleStepSize,
     onChangeCommitted: onSecondHandleChangeCommitted,
@@ -284,15 +315,19 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     disabled: disabled,
     bounds: [state.firstValue, max],
     side: "right",
-    xPosition: state.xSecondHandle,
+    orientation: "horizontal",
+    position: state.xSecondHandle,
     zIndex: state.secondHandleZIndex,
     value: Math.max(state.secondValue, min),
     ariaLabel: ariaLabelRight,
+    onMouseDown: function onMouseDown() {
+      return setSecondInputFocused(true);
+    },
     onMouseEnter: function onMouseEnter() {
-      return setSecondInputActive(true);
+      return setSecondInputHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setSecondInputActive(false);
+      return setSecondInputHovered(false);
     }
   })), /*#__PURE__*/React.createElement(InputsWrapper, null, /*#__PURE__*/React.createElement(StyledInput, {
     className: cx(classes.firstTextField, firstInputActiveClass),