@salutejs/plasma-new-hope 0.80.0 → 0.81.0-canary.1194.9108495550.0

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = void 0;
+var _Slider = /*#__PURE__*/require("../../../../components/Slider");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Slider2 = /*#__PURE__*/require("./Slider.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Slider.sliderConfig, _Slider2.config);
+var Slider = exports.Slider = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+
+/**
+ * Слайдер позволяет определить числовое значение в пределах указанного промежутка.
+ * Можно указать два значения.
+ */

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

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Slider } from './Slider';
+
+const sizes = ['l', 'm', 's'];
+const views = ['default', 'accent', 'gradient'];
+const labelPlacements = ['outer', 'inner'];
+const rangeValuesPlacement = ['outer', 'inner'];
+
+const meta: Meta<typeof Slider> = {
+    title: 'plasma_b2c/Slider',
+    component: Slider,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...disableProps([
+            'value',
+            'onChangeCommitted',
+            'ariaLabel',
+            'onChange',
+            'fontSizeMultiplier',
+            'gap',
+            'settings',
+            'hasHoverAnimation',
+        ]),
+    },
+};
+
+export default meta;
+
+type StoryProps = Omit<ComponentProps<typeof Slider>, 'value' | 'onChangeCommitted'>;
+type StorySingleProps = StoryProps;
+
+type StorySingle = StoryObj<StorySingleProps>;
+type StoryDouble = StoryObj<StoryProps>;
+
+const SliderWrapper = styled.div`
+    width: 25rem;
+`;
+
+const StoryDefault = (args: StorySingleProps) => {
+    const [value, setValue] = useState(30);
+
+    const onChangeCommittedHandle = (values) => {
+        setValue(values);
+    };
+
+    const onChangeHandle = (values) => {
+        setValue(values);
+    };
+
+    return (
+        <SliderWrapper>
+            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
+        </SliderWrapper>
+    );
+};
+
+export const Default: StorySingle = {
+    argTypes: {
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        rangeValuesPlacement: {
+            options: rangeValuesPlacement,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        view: 'default',
+        size: 'm',
+        min: 0,
+        max: 100,
+        disabled: false,
+        ariaLabel: 'Цена товара',
+        multipleStepSize: 10,
+        label: 'Цена товара',
+        labelPlacement: 'outer',
+        rangeValuesPlacement: 'outer',
+        showRangeValues: true,
+        showCurrentValue: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryMultipleValues = (args: StoryProps) => {
+    const [value, setValue] = useState([10, 80]);
+    const sortValues = (values) => {
+        return values
+            .map((val) => {
+                if (val < args.min) {
+                    return args.min;
+                }
+                if (val > args.max) {
+                    return args.max;
+                }
+                return val;
+            })
+            .sort((a, b) => a - b);
+    };
+
+    const onChangeHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onBlurTextField = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onKeyDownTextField = (values, event) => {
+        if (event.key === 'Enter') {
+            setValue(sortValues(values));
+        }
+    };
+
+    return (
+        <SliderWrapper>
+            <Slider
+                value={value}
+                onKeyDownTextField={onKeyDownTextField}
+                onBlurTextField={onBlurTextField}
+                onChange={onChangeHandle}
+                {...args}
+            />
+        </SliderWrapper>
+    );
+};
+
+export const MultipleValues: StoryDouble = {
+    args: {
+        view: 'default',
+        size: 'm',
+        min: 0,
+        max: 100,
+        disabled: false,
+        label: 'Цена товара',
+        ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
+        multipleStepSize: 10,
+    },
+    render: (args) => <StoryMultipleValues {...args} />,
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Slider = /*#__PURE__*/require("../../../../components/Slider");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-solid-default);", ":var(--surface-solid-tertiary);", ":var(--surface-solid-default);", ":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),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent);", ":var(--surface-solid-tertiary);", ":var(--surface-accent);", ":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),
+      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;", ":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.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = void 0;
+var _Slider = /*#__PURE__*/require("../../../../components/Slider");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Slider2 = /*#__PURE__*/require("./Slider.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Slider.sliderConfig, _Slider2.config);
+var Slider = exports.Slider = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+
+/**
+ * Слайдер позволяет определить числовое значение в пределах указанного промежутка.
+ * Можно указать два значения.
+ */

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

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Slider } from './Slider';
+
+const sizes = ['l', 'm', 's'];
+const views = ['default', 'accent', 'gradient'];
+const labelPlacements = ['outer', 'inner'];
+const rangeValuesPlacement = ['outer', 'inner'];
+
+const meta: Meta<typeof Slider> = {
+    title: 'plasma_web/Slider',
+    component: Slider,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...disableProps([
+            'value',
+            'onChangeCommitted',
+            'ariaLabel',
+            'onChange',
+            'fontSizeMultiplier',
+            'gap',
+            'settings',
+            'hasHoverAnimation',
+        ]),
+    },
+};
+
+export default meta;
+
+type StoryProps = Omit<ComponentProps<typeof Slider>, 'value' | 'onChangeCommitted'>;
+type StorySingleProps = StoryProps;
+
+type StorySingle = StoryObj<StorySingleProps>;
+type StoryDouble = StoryObj<StoryProps>;
+
+const SliderWrapper = styled.div`
+    width: 25rem;
+`;
+
+const StoryDefault = (args: StorySingleProps) => {
+    const [value, setValue] = useState(30);
+
+    const onChangeCommittedHandle = (values) => {
+        setValue(values);
+    };
+
+    const onChangeHandle = (values) => {
+        setValue(values);
+    };
+
+    return (
+        <SliderWrapper>
+            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
+        </SliderWrapper>
+    );
+};
+
+export const Default: StorySingle = {
+    argTypes: {
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        rangeValuesPlacement: {
+            options: rangeValuesPlacement,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        view: 'default',
+        size: 'm',
+        min: 0,
+        max: 100,
+        disabled: false,
+        ariaLabel: 'Цена товара',
+        multipleStepSize: 10,
+        label: 'Цена товара',
+        labelPlacement: 'outer',
+        rangeValuesPlacement: 'outer',
+        showRangeValues: true,
+        showCurrentValue: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryMultipleValues = (args: StoryProps) => {
+    const [value, setValue] = useState([10, 80]);
+    const sortValues = (values) => {
+        return values
+            .map((val) => {
+                if (val < args.min) {
+                    return args.min;
+                }
+                if (val > args.max) {
+                    return args.max;
+                }
+                return val;
+            })
+            .sort((a, b) => a - b);
+    };
+
+    const onChangeHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onBlurTextField = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onKeyDownTextField = (values, event) => {
+        if (event.key === 'Enter') {
+            setValue(sortValues(values));
+        }
+    };
+
+    return (
+        <SliderWrapper>
+            <Slider
+                value={value}
+                onKeyDownTextField={onKeyDownTextField}
+                onBlurTextField={onBlurTextField}
+                onChange={onChangeHandle}
+                {...args}
+            />
+        </SliderWrapper>
+    );
+};
+
+export const MultipleValues: StoryDouble = {
+    args: {
+        view: 'default',
+        size: 'm',
+        min: 0,
+        max: 100,
+        disabled: false,
+        label: 'Цена товара',
+        ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
+        multipleStepSize: 10,
+    },
+    render: (args) => <StoryMultipleValues {...args} />,
+};

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/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 {};