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

package/emotion/es/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',
@@ -52,8 +71,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 +87,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 +206,7 @@ const StoryMultipleValues = (args: StoryProps) => {
     };
 
     return (
-        <SliderWrapper>
+        <SliderWrapper isVertical={args.orientation === 'vertical'}>
             <Slider
                 value={value}
                 onKeyDownTextField={onKeyDownTextField}
@@ -158,6 +223,7 @@ export const MultipleValues: StoryDouble = {
     args: {
         view: 'default',
         size: 'm',
+        pointerSize: 'small',
         min: 0,
         max: 100,
         disabled: false,
@@ -165,5 +231,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/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -12,7 +12,6 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
-const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -21,6 +20,7 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
+    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: string) => {
+const getContentLeft = (contentLeftOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: string) => {
+const getContentRight = (contentRightOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,47 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
-            {items.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="clear"
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    value={helperText}
-                    size={size as HeaderSize}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
-        </Tabs>
-    );
-};
-
-const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText, width } = props;
+const StoryHeaderTabs = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        stretch,
+    } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="clear"
+                    view="divider"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={helperText}
+                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                    contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -653,60 +637,37 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HeaderTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        helperText: '',
-        itemQuantity: 6,
-        width: '12rem',
+        hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
-        clip: {
-            options: headerClips,
+        size: {
+            options: headerSizes,
             control: {
                 type: 'select',
             },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
-        stretch: {
-            table: {
-                disable: true,
-            },
-        },
         contentLeft: {
-            table: {
-                disable: true,
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
             },
         },
         contentRight: {
-            table: {
-                disable: true,
+            options: contentRightOptions,
+            control: {
+                type: 'select',
             },
         },
-        hasDivider: {
+        clip: {
             table: {
                 disable: true,
             },
         },
-        size: {
-            options: headerSizes,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryHeaderScroll {...args} />;
-            default:
-                return <StoryHeaderDefault {...args} />;
-        }
     },
+    render: (args) => <StoryHeaderTabs {...args} />,
 };

package/es/components/Slider/Slider.css

@@ -1,20 +1,22 @@
-.Handler_styles_8crx5z_h1tnrnip__2d4342c7{cursor:pointer;position:absolute;z-index:1;top:0;left:0;}
-.Handler_styles_8crx5z_s12uu2lj__2d4342c7{position:absolute;z-index:1;top:var(--plasma-slider-current-value-top-offset);text-align:center;width:100%;margin-left:-0.125rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-family:var(--plasma-slider-current-value-font-family);font-size:var(--plasma-slider-current-value-font-size);font-style:var(--plasma-slider-current-value-font-style);font-weight:var(--plasma-slider-current-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-current-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-current-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-current-value-letter-spacing);letter-spacing:var(--plasma-slider-current-value-letter-spacing);line-height:var(--plasma-slider-current-value-line-height);}
+.base_1s3f6q8_b1c93yiw__8f5ba4a1.base_1s3f6q8_sliderVerticalOrientation__8f5ba4a1{height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
 
-.Thumb_styles_4w4gzn_tqbdf8b__14129a5b{width:var(--plasma-slider-thumb-size);height:var(--plasma-slider-thumb-size);position:relative;left:-0.125rem;top:-0.125rem;border-radius:50%;box-sizing:border-box;background:var(--plasma-slider-thumb-background-color);margin:0.125rem;-webkit-transition:border-color 0.1s ease-in-out;transition:border-color 0.1s ease-in-out;position:relative;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:after{background:var(--plasma-slider-thumb-border-color);margin:-0.125rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:not([disabled]):hover:after,.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:not([disabled]):active:after{background:var(--plasma-slider-thumb-focus-border-color);}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b[disabled]{cursor:not-allowed;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:focus{outline:none;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b::before{content:'';position:absolute;top:0.125rem;left:0.125rem;right:0.125rem;bottom:0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:50%;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b.Thumb_styles_4w4gzn_focusVisible__14129a5b:focus::before,.Thumb_styles_4w4gzn_tqbdf8b__14129a5b[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem var(--plasma-slider-thumb-focus-border-color);}
+.Handler_styles_irtcgm_s1tnrnip__e8f853c5{position:absolute;z-index:1;top:var(--plasma-slider-current-value-top-offset);text-align:center;width:100%;margin-left:-0.125rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-family:var(--plasma-slider-value-font-family);font-size:var(--plasma-slider-value-font-size);font-style:var(--plasma-slider-value-font-style);font-weight:var(--plasma-slider-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-value-letter-spacing);letter-spacing:var(--plasma-slider-value-letter-spacing);line-height:var(--plasma-slider-value-line-height);}
+.Handler_styles_irtcgm_h12uu2lj__e8f853c5{cursor:pointer;position:absolute;z-index:1;top:0;left:0;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;--thumb-size:var(--h12uu2lj-0);}.Handler_styles_irtcgm_h12uu2lj__e8f853c5.Handler_styles_irtcgm_sliderVerticalOrientation__e8f853c5{right:0;bottom:auto;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Handler_styles_irtcgm_h12uu2lj__e8f853c5.Handler_styles_irtcgm_sliderVerticalOrientation__e8f853c5 .Handler_styles_irtcgm_s1tnrnip__e8f853c5{margin:0;top:0;bottom:0;right:0;left:calc(var(--plasma-slider-size) - (var(--plasma-slider-size) - var(--thumb-size)) / 2 + 0.25rem);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.Handler_styles_irtcgm_h12uu2lj__e8f853c5.Handler_styles_irtcgm_sliderValuePlacementLeft__e8f853c5 .Handler_styles_irtcgm_s1tnrnip__e8f853c5{left:auto;right:calc(var(--plasma-slider-size) - (var(--plasma-slider-size) - var(--thumb-size)) / 2 + 0.3125rem);-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
 
-.SliderBase_styles_9s4eb3_s33crq1__d6fac54b{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-height);}
-.SliderBase_styles_9s4eb3_rnaoqfb__d6fac54b{height:100%;}
-.SliderBase_styles_9s4eb3_r1bro5xo__d6fac54b{position:relative;top:50%;height:var(--plasma-slider-rail-height);border-radius:var(--plasma-slider-rail-border-radius);background-color:var(--plasma-slider-rail-background-color);overflow:hidden;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
-.SliderBase_styles_9s4eb3_fdg7yhg__d6fac54b{position:absolute;height:100%;top:0;left:0;background:var(--plasma-slider-fill-color);width:0;}
-.SliderBase_styles_9s4eb3_i17ya4q3__d6fac54b{visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;}
+.Thumb_styles_uyn20e_tqbdf8b__de0962c7{width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);min-height:var(--thumb-size);position:relative;border-radius:50%;box-sizing:border-box;background:var(--plasma-slider-thumb-background-color);margin:0.0625rem;-webkit-transition:border-color 0.1s ease-in-out;transition:border-color 0.1s ease-in-out;position:relative;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:after{background:var(--plasma-slider-thumb-border-color);margin:-0.0625rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:not([disabled]):hover:after,.Thumb_styles_uyn20e_tqbdf8b__de0962c7:not([disabled]):active:after{background:var(--plasma-slider-thumb-focus-border-color);}.Thumb_styles_uyn20e_tqbdf8b__de0962c7[disabled]{cursor:not-allowed;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:focus{outline:none;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:50%;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7.Thumb_styles_uyn20e_focusVisible__de0962c7:focus::before,.Thumb_styles_uyn20e_tqbdf8b__de0962c7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem var(--plasma-slider-thumb-focus-border-color);}
 
-.Single_styles_1r9f1e0_l1p4kc08__4db690dd{color:var(--plasma-slider-label-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-slider-label-wrapper-gap);}
+.SliderBase_styles_1qt1224_r33crq1__8fd7c64a{position:relative;top:50%;height:var(--plasma-slider-rail-thickness);border-radius:var(--plasma-slider-rail-border-radius);background-color:var(--plasma-slider-rail-background-color);overflow:hidden;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.SliderBase_styles_1qt1224_snaoqfb__8fd7c64a{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-size);}.SliderBase_styles_1qt1224_snaoqfb__8fd7c64a.SliderBase_styles_1qt1224_sliderVerticalOrientation__8fd7c64a{width:var(--plasma-slider-size);height:auto;}.SliderBase_styles_1qt1224_snaoqfb__8fd7c64a.SliderBase_styles_1qt1224_sliderVerticalOrientation__8fd7c64a .SliderBase_styles_1qt1224_r33crq1__8fd7c64a{top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:var(--plasma-slider-rail-thickness);height:100%;}
+.SliderBase_styles_1qt1224_r1bro5xo__8fd7c64a{height:100%;}
+.SliderBase_styles_1qt1224_fdg7yhg__8fd7c64a{position:absolute;height:100%;top:0;left:0;background:var(--plasma-slider-fill-color);width:0;}
+.SliderBase_styles_1qt1224_i17ya4q3__8fd7c64a{visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;border:none;}
 
-.Single_styles_1r9f1e0_lozb535__4db690dd{font-family:var(--plasma-slider-label-font-family);font-size:var(--plasma-slider-label-font-size);font-style:var(--plasma-slider-label-font-style);font-weight:var(--plasma-slider-label-font-weight);-webkit-letter-spacing:var(--plasma-slider-label-letter-spacing);-moz-letter-spacing:var(--plasma-slider-label-letter-spacing);-ms-letter-spacing:var(--plasma-slider-label-letter-spacing);letter-spacing:var(--plasma-slider-label-letter-spacing);line-height:var(--plasma-slider-label-line-height);}
-.Single_styles_1r9f1e0_s1w9icbd__4db690dd{color:var(--plasma-slider-range-value-color);font-family:var(--plasma-slider-range-value-font-family);font-size:var(--plasma-slider-range-value-font-size);font-style:var(--plasma-slider-range-value-font-style);font-weight:var(--plasma-slider-range-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-range-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-range-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-range-value-letter-spacing);letter-spacing:var(--plasma-slider-range-value-letter-spacing);line-height:var(--plasma-slider-range-value-line-height);-webkit-transition:opacity 0.1s ease-in-out;transition:opacity 0.1s ease-in-out;}.Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderHideMinValue__4db690dd,.Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderHideMaxValue__4db690dd{opacity:0;}.Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderActiveRangeValue__4db690dd{color:var(--plasma-slider-label-color);}
-.Single_styles_1r9f1e0_s1d2sfgl__4db690dd{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementOuter__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd{position:absolute;bottom:var(--plasma-slider-range-value-bottom-offset);left:0;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementOuter__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderMaxRangeValue__4db690dd{left:unset;right:0;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementInner__4db690dd{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementInner__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd{margin-right:var(--plasma-slider-range-min-value-margin);}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementInner__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderMaxRangeValue__4db690dd{margin-right:0;margin-left:var(--plasma-slider-range-max-value-margin);}
-.Single_styles_1r9f1e0_ss3ujqx__4db690dd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;opacity:var(--plasma-slider-disabled-opacity);}.Single_styles_1r9f1e0_ss3ujqx__4db690dd.Single_styles_1r9f1e0_sliderLabelPlacementOuter__4db690dd{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Single_styles_1r9f1e0_ss3ujqx__4db690dd.Single_styles_1r9f1e0_sliderLabelPlacementOuter__4db690dd .Single_styles_1r9f1e0_l1p4kc08__4db690dd{margin-bottom:var(--plasma-slider-label-wrapper-margin-bottom);}.Single_styles_1r9f1e0_ss3ujqx__4db690dd.Single_styles_1r9f1e0_sliderLabelPlacementInner__4db690dd .Single_styles_1r9f1e0_l1p4kc08__4db690dd{margin-right:var(--plasma-slider-label-wrapper-margin-right);}
+.Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{color:var(--plasma-slider-label-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-slider-label-wrapper-gap);}
+.Single_styles_1h7n2s2_ly2gexi__5fe9b6cf{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
+.Single_styles_1h7n2s2_lozb535__5fe9b6cf{font-family:var(--plasma-slider-label-font-family);font-size:var(--plasma-slider-label-font-size);font-style:var(--plasma-slider-label-font-style);font-weight:var(--plasma-slider-label-font-weight);-webkit-letter-spacing:var(--plasma-slider-label-letter-spacing);-moz-letter-spacing:var(--plasma-slider-label-letter-spacing);-ms-letter-spacing:var(--plasma-slider-label-letter-spacing);letter-spacing:var(--plasma-slider-label-letter-spacing);line-height:var(--plasma-slider-label-line-height);}
+.Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{color:var(--plasma-slider-range-value-color);font-family:var(--plasma-slider-value-font-family);font-size:var(--plasma-slider-value-font-size);font-style:var(--plasma-slider-value-font-style);font-weight:var(--plasma-slider-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-value-letter-spacing);letter-spacing:var(--plasma-slider-value-letter-spacing);line-height:var(--plasma-slider-value-line-height);-webkit-transition:opacity 0.1s ease-in-out;transition:opacity 0.1s ease-in-out;}.Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderHideMinValue__5fe9b6cf,.Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderHideMaxValue__5fe9b6cf{opacity:0;}.Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderActiveRangeValue__5fe9b6cf{color:var(--plasma-slider-label-color);}
+.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementOuter__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{position:absolute;bottom:calc(var(--plasma-slider-rail-thickness) * -1.5 - var(--plasma-slider-range-value-bottom-offset));left:0;}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementOuter__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf{left:unset;right:0;}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementInner__5fe9b6cf{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementInner__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{margin-right:var(--plasma-slider-range-value-horizontal-margin);}.Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf.Single_styles_1h7n2s2_sliderRangeValuesPlacementInner__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf{margin-right:0;margin-left:var(--plasma-slider-range-value-horizontal-margin);}
+.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;opacity:var(--plasma-slider-disabled-opacity);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementOuter__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementOuter__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{margin-bottom:var(--plasma-slider-label-wrapper-margin-bottom);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementInner__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{margin-right:var(--plasma-slider-label-wrapper-margin-right);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementBottom__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementBottom__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelContentReversed__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelContentReversed__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf .Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf{width:var(--plasma-slider-size);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementInner__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{margin-right:0;margin-bottom:var(--plasma-slider-label-wrapper-vertical-margin);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignLeft__5fe9b6cf{-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignLeft__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignRight__5fe9b6cf{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementBottom__5fe9b6cf{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelPlacementBottom__5fe9b6cf .Single_styles_1h7n2s2_l1p4kc08__5fe9b6cf{margin-top:var(--plasma-slider-label-wrapper-vertical-margin);margin-right:0;margin-bottom:0;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf .Single_styles_1h7n2s2_s1d2sfgl__5fe9b6cf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{position:static;bottom:0;left:0;margin-bottom:var(--plasma-slider-range-value-vertical-margin);}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignCenter__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf{left:0;right:0;bottom:0;margin-top:var(--plasma-slider-range-value-vertical-margin);margin-bottom:0;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignLeft__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf,.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignRight__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{margin-right:0;margin-bottom:0;position:absolute;top:0;right:calc( var(--plasma-slider-rail-thickness) / 2 + var(--plasma-slider-size) / 2 + var(--plasma-slider-range-value-horizontal-offset) );}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignLeft__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf,.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignRight__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf.Single_styles_1h7n2s2_sliderMaxRangeValue__5fe9b6cf{margin-right:0;margin-left:0;top:auto;bottom:0;}.Single_styles_1h7n2s2_ss3ujqx__5fe9b6cf.Single_styles_1h7n2s2_sliderVerticalOrientation__5fe9b6cf.Single_styles_1h7n2s2_sliderLabelAlignRight__5fe9b6cf .Single_styles_1h7n2s2_s1w9icbd__5fe9b6cf{left:calc(var(--plasma-slider-size) + var(--plasma-slider-rail-thickness));}
 
 .base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_i13qvwoy__5f4dd9b9{width:100%;font:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;line-height:inherit;}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_i19ry60d__5f4dd9b9{width:100%;font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_i1j28rg8__5f4dd9b9{height:var(--plasma-textfield-height);border-radius:var(--plasma-textfield-border-radius);padding:var(--plasma-textfield-padding);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_i1j28rg8__5f4dd9b9.base_1xdmaqh_hasChips__5f4dd9b9{padding-top:var(--plasma-textfield-padding-with-chips);padding-bottom:var(--plasma-textfield-padding-with-chips);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_i1j28rg8__5f4dd9b9.base_1xdmaqh_hasEmptyContentLeft__5f4dd9b9{padding-left:var(--plasma-textfield-padding-with-chips);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_i1j28rg8__5f4dd9b9.base_1xdmaqh_hasEmptyContentRight__5f4dd9b9{padding-right:var(--plasma-textfield-padding-with-chips);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_l1gjsnfi__5f4dd9b9,.base_1xdmaqh_b13ve66i__5f4dd9b9:not(.base_1xdmaqh_labelPlacementInner__5f4dd9b9) .base_1xdmaqh_s16itze4__5f4dd9b9{font-family:var(--plasma-textfield__label-font-family);font-size:var(--plasma-textfield__label-font-size);font-style:var(--plasma-textfield__label-font-style);font-weight:var(--plasma-textfield__label-font-weight);-webkit-letter-spacing:var(--plasma-textfield__label-letter-spacing);-moz-letter-spacing:var(--plasma-textfield__label-letter-spacing);-ms-letter-spacing:var(--plasma-textfield__label-letter-spacing);letter-spacing:var(--plasma-textfield__label-letter-spacing);line-height:var(--plasma-textfield__label-line-height);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_s1skqnhr__5f4dd9b9{margin:var(--plasma-textfield__hint-margin);width:var(--plasma-textfield__hint-target-size);height:var(--plasma-textfield__hint-target-size);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_hgy0im1__5f4dd9b9{width:var(--plasma-textfield__hint-target-size);height:var(--plasma-textfield__hint-target-size);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_t600610__5f4dd9b9{font-family:var(--plasma-textfield__title-caption-font-family);font-size:var(--plasma-textfield__title-caption-font-size);font-style:var(--plasma-textfield__title-caption-font-style);font-weight:var(--plasma-textfield__title-caption-font-weight);-webkit-letter-spacing:var(--plasma-textfield__title-caption-letter-spacing);-moz-letter-spacing:var(--plasma-textfield__title-caption-letter-spacing);-ms-letter-spacing:var(--plasma-textfield__title-caption-letter-spacing);letter-spacing:var(--plasma-textfield__title-caption-letter-spacing);line-height:var(--plasma-textfield__title-caption-line-height);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_l7hnwwb__5f4dd9b9{margin-top:var(--plasma-textfield__left-helper-offset);font-family:var(--plasma-textfield__left-helper-font-family);font-size:var(--plasma-textfield__left-helper-font-size);font-style:var(--plasma-textfield__left-helper-font-style);font-weight:var(--plasma-textfield__left-helper-font-weight);-webkit-letter-spacing:var(--plasma-textfield__left-helper-letter-spacing);-moz-letter-spacing:var(--plasma-textfield__left-helper-letter-spacing);-ms-letter-spacing:var(--plasma-textfield__left-helper-letter-spacing);letter-spacing:var(--plasma-textfield__left-helper-letter-spacing);line-height:var(--plasma-textfield__left-helper-line-height);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_smqgwd8__5f4dd9b9,.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_s14qvple__5f4dd9b9{font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_smqgwd8__5f4dd9b9{margin:var(--plasma-textfield__before-text-margin);}.base_1xdmaqh_b13ve66i__5f4dd9b9 .base_1xdmaqh_s14qvple__5f4dd9b9{margin:var(--plasma-textfield__after-text-margin);}
 

package/es/components/Slider/Slider.js

@@ -1,10 +1,11 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef } from 'react';
+import { cx } from '../../utils/index.js';
 import { base } from './variations/_view/base.js';
 import { base as base$1 } from './variations/_size/base.js';
 import { base as base$2 } from './variations/_disabled/base.js';
 import { SingleSlider } from './components/Single/Single.js';
-import '../../utils/react.js';
+import { classes } from './Slider.tokens.js';
 import '@linaria/react';
 import 'react-draggable';
 import '@linaria/core';
@@ -15,6 +16,7 @@ import 'react-dom';
 import { DoubleUncontrolled } from './components/DoubleUncontrolled/DoubleUncontrolled.js';
 
 var _excluded = ["type"];
+
 // TODO: проверить, можно ли обойтись без каста типов
 
 var isSingleValueProps = function isSingleValueProps(props, type) {
@@ -28,9 +30,15 @@ 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));
   });
 };
 var sliderConfig = {

package/es/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport type { RootPropsOmitOnChangeAndDefaultValue } from '../../engines';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { SingleSlider, DoubleUncontrolled } from './components';\nimport type { SingleSliderProps, DoubleUncontrolledProps } from './components';\nimport { SliderProps } from './Slider.types';\n\n// TODO: проверить, можно ли обойтись без каста типов\n\nconst isSingleValueProps = (props: SliderProps, type: string): props is SingleSliderProps =>\n    typeof props.value === 'number' || (type === 'single' && typeof props.value !== 'object');\n\nconst isDoubleValueProps = (props: SliderProps, type: string): props is DoubleUncontrolledProps =>\n    typeof props.value === 'object' || type === 'double';\n\nexport const sliderRoot = (Root: RootPropsOmitOnChangeAndDefaultValue<HTMLDivElement, SliderProps>) =>\n    forwardRef<HTMLDivElement, SliderProps>(({ type = 'single', ...props }, ref) => {\n        return (\n            <Root {...props} ref={ref}>\n                {isSingleValueProps(props, type) && <SingleSlider {...props} />}\n                {isDoubleValueProps(props, type) && <DoubleUncontrolled {...props} />}\n            </Root>\n        );\n    });\n\nexport const sliderConfig = {\n    name: 'Slider',\n    tag: 'div',\n    layout: sliderRoot,\n    base: '',\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["isSingleValueProps","props","type","value","_typeof","isDoubleValueProps","sliderRoot","Root","forwardRef","_ref","ref","_ref$type","_objectWithoutProperties","_excluded","React","createElement","_extends","SingleSlider","DoubleUncontrolled","sliderConfig","name","tag","layout","base","variations","view","css","viewCSS","size","sizeCSS","disabled","disabledCSS","attrs","defaults"],"mappings":";;;;;;;;;;;;;;;;;AAWA;;AAEA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAkB,EAAEC,IAAY,EAAA;AAAA,EAAA,OACxD,OAAOD,KAAK,CAACE,KAAK,KAAK,QAAQ,IAAKD,IAAI,KAAK,QAAQ,IAAIE,OAAA,CAAOH,KAAK,CAACE,KAAK,MAAK,QAAS,CAAA;AAAA,CAAA,CAAA;AAE7F,IAAME,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIJ,KAAkB,EAAEC,IAAY,EAAA;EAAA,OACxDE,OAAA,CAAOH,KAAK,CAACE,KAAK,MAAK,QAAQ,IAAID,IAAI,KAAK,QAAQ,CAAA;AAAA,CAAA,CAAA;IAE3CI,UAAU,GAAG,SAAbA,UAAUA,CAAIC,IAAuE,EAAA;AAAA,EAAA,oBAC9FC,UAAU,CAA8B,UAAAC,IAAA,EAAgCC,GAAG,EAAK;AAAA,IAAA,IAAAC,SAAA,GAAAF,IAAA,CAArCP,IAAI;AAAJA,MAAAA,IAAI,GAAAS,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;AAAKV,MAAAA,KAAK,GAAAW,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;IAChE,oBACIC,KAAA,CAAAC,aAAA,CAACR,IAAI,EAAAS,QAAA,KAAKf,KAAK,EAAA;AAAES,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAA,EACrBV,kBAAkB,CAACC,KAAK,EAAEC,IAAI,CAAC,iBAAIY,KAAA,CAAAC,aAAA,CAACE,YAAY,EAAKhB,KAAQ,CAAC,EAC9DI,kBAAkB,CAACJ,KAAK,EAAEC,IAAI,CAAC,iBAAIY,KAAA,CAAAC,aAAA,CAACG,kBAAkB,EAAKjB,KAAQ,CAClE,CAAC,CAAA;AAEf,GAAC,CAAC,CAAA;AAAA,EAAA;AAEC,IAAMkB,YAAY,GAAG;AACxBC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEhB,UAAU;AAClBiB,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,IAAAA;KACR;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,GAAG,EAAEG,MAAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;AACNJ,MAAAA,GAAG,EAAEK,MAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;AACX,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNR,IAAAA,IAAI,EAAE,SAAS;AACfG,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport type { RootPropsOmitOnChangeAndDefaultValue } from '../../engines';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { SingleSlider, DoubleUncontrolled } from './components';\nimport type { SingleSliderProps, DoubleUncontrolledProps } from './components';\nimport { SliderProps } from './Slider.types';\nimport { classes } from './Slider.tokens';\n\n// TODO: проверить, можно ли обойтись без каста типов\n\nconst isSingleValueProps = (props: SliderProps, type: string): props is SingleSliderProps =>\n    typeof props.value === 'number' || (type === 'single' && typeof props.value !== 'object');\n\nconst isDoubleValueProps = (props: SliderProps, type: string): props is DoubleUncontrolledProps =>\n    typeof props.value === 'object' || type === 'double';\n\nexport const sliderRoot = (Root: RootPropsOmitOnChangeAndDefaultValue<HTMLDivElement, SliderProps>) =>\n    forwardRef<HTMLDivElement, SliderProps>(({ type = 'single', ...props }, ref) => {\n        if (isSingleValueProps(props, type)) {\n            return (\n                <Root\n                    {...props}\n                    className={cx(props.orientation === 'vertical' && classes.verticalOrientation, props.className)}\n                    ref={ref}\n                >\n                    <SingleSlider {...props} />\n                </Root>\n            );\n        }\n\n        return (\n            <Root ref={ref} {...props}>\n                {isDoubleValueProps(props, type) && <DoubleUncontrolled {...props} />}\n            </Root>\n        );\n    });\n\nexport const sliderConfig = {\n    name: 'Slider',\n    tag: 'div',\n    layout: sliderRoot,\n    base: '',\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["isSingleValueProps","props","type","value","_typeof","isDoubleValueProps","sliderRoot","Root","forwardRef","_ref","ref","_ref$type","_objectWithoutProperties","_excluded","React","createElement","_extends","className","cx","orientation","classes","verticalOrientation","SingleSlider","DoubleUncontrolled","sliderConfig","name","tag","layout","base","variations","view","css","viewCSS","size","sizeCSS","disabled","disabledCSS","attrs","defaults"],"mappings":";;;;;;;;;;;;;;;;;;;AAaA;;AAEA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAkB,EAAEC,IAAY,EAAA;AAAA,EAAA,OACxD,OAAOD,KAAK,CAACE,KAAK,KAAK,QAAQ,IAAKD,IAAI,KAAK,QAAQ,IAAIE,OAAA,CAAOH,KAAK,CAACE,KAAK,MAAK,QAAS,CAAA;AAAA,CAAA,CAAA;AAE7F,IAAME,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIJ,KAAkB,EAAEC,IAAY,EAAA;EAAA,OACxDE,OAAA,CAAOH,KAAK,CAACE,KAAK,MAAK,QAAQ,IAAID,IAAI,KAAK,QAAQ,CAAA;AAAA,CAAA,CAAA;IAE3CI,UAAU,GAAG,SAAbA,UAAUA,CAAIC,IAAuE,EAAA;AAAA,EAAA,oBAC9FC,UAAU,CAA8B,UAAAC,IAAA,EAAgCC,GAAG,EAAK;AAAA,IAAA,IAAAC,SAAA,GAAAF,IAAA,CAArCP,IAAI;AAAJA,MAAAA,IAAI,GAAAS,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;AAAKV,MAAAA,KAAK,GAAAW,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAChE,IAAA,IAAIb,kBAAkB,CAACC,KAAK,EAAEC,IAAI,CAAC,EAAE;MACjC,oBACIY,KAAA,CAAAC,aAAA,CAACR,IAAI,EAAAS,QAAA,KACGf,KAAK,EAAA;AACTgB,QAAAA,SAAS,EAAEC,EAAE,CAACjB,KAAK,CAACkB,WAAW,KAAK,UAAU,IAAIC,OAAO,CAACC,mBAAmB,EAAEpB,KAAK,CAACgB,SAAS,CAAE;AAChGP,QAAAA,GAAG,EAAEA,GAAAA;OAELI,CAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACO,YAAY,EAAKrB,KAAQ,CACxB,CAAC,CAAA;AAEf,KAAA;AAEA,IAAA,oBACIa,KAAA,CAAAC,aAAA,CAACR,IAAI,EAAAS,QAAA,CAAA;AAACN,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,EAAKT,KAAK,CACpBI,EAAAA,kBAAkB,CAACJ,KAAK,EAAEC,IAAI,CAAC,iBAAIY,KAAA,CAAAC,aAAA,CAACQ,kBAAkB,EAAKtB,KAAQ,CAClE,CAAC,CAAA;AAEf,GAAC,CAAC,CAAA;AAAA,EAAA;AAEC,IAAMuB,YAAY,GAAG;AACxBC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAErB,UAAU;AAClBsB,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,IAAAA;KACR;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,GAAG,EAAEG,MAAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;AACNJ,MAAAA,GAAG,EAAEK,MAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;AACX,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNR,IAAAA,IAAI,EAAE,SAAS;AACfG,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;"}

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

@@ -1,6 +1,12 @@
 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 @@ 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'
 };
 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 @@ 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',