@salutejs/sdds-serv 0.314.0-canary.2021.15824070198.0 → 0.314.0-canary.2022.15754718552.0

package/emotion/es/components/Skeleton/LineSkeleton.config.js

@@ -1,224 +1,29 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-body-l-line-height);\n                ",
-        ": var(--plasma-typo-body-l-font-size);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-body-xs-line-height);\n                ",
-        ": var(--plasma-typo-body-xs-font-size);\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-body-xxs-line-height);\n                ",
-        ": var(--plasma-typo-body-xxs-font-size);\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-dspl-l-line-height);\n                ",
-        ": var(--plasma-typo-dspl-l-font-size);\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-dspl-m-line-height);\n                ",
-        ": var(--plasma-typo-dspl-m-font-size);\n            "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-dspl-s-line-height);\n                ",
-        ": var(--plasma-typo-dspl-s-font-size);\n            "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-h1-line-height);\n                ",
-        ": var(--plasma-typo-h1-font-size);\n            "
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-h2-line-height);\n                ",
-        ": var(--plasma-typo-h2-font-size);\n            "
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject10() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-h3-line-height);\n                ",
-        ": var(--plasma-typo-h3-font-size);\n            "
-    ]);
-    _templateObject10 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject11() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-h4-line-height);\n                ",
-        ": var(--plasma-typo-h4-font-size);\n            "
-    ]);
-    _templateObject11 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject12() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-h5-line-height);\n                ",
-        ": var(--plasma-typo-h5-font-size);\n            "
-    ]);
-    _templateObject12 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject13() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-text-l-line-height);\n                ",
-        ": var(--plasma-typo-text-l-font-size);\n            "
-    ]);
-    _templateObject13 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject14() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-text-m-line-height);\n                ",
-        ": var(--plasma-typo-text-m-font-size);\n            "
-    ]);
-    _templateObject14 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject15() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-text-s-line-height);\n                ",
-        ": var(--plasma-typo-text-s-font-size);\n            "
-    ]);
-    _templateObject15 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject16() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-text-xs-line-height);\n                ",
-        ": var(--plasma-typo-text-xs-font-size);\n            "
-    ]);
-    _templateObject16 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, skeletonTokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
-    defaults: {
-        size: 'bodyM'
-    },
-    variations: {
-        size: {
-            bodyL: css(_templateObject(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            bodyM: css(_templateObject1(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            bodyS: css(_templateObject2(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            bodyXS: css(_templateObject3(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            bodyXXS: css(_templateObject4(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            dsplL: css(_templateObject5(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            dsplM: css(_templateObject6(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            dsplS: css(_templateObject7(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            h1: css(_templateObject8(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            h2: css(_templateObject9(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            h3: css(_templateObject10(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            h4: css(_templateObject11(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            h5: css(_templateObject12(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            textL: css(_templateObject13(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            textM: css(_templateObject14(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            textS: css(_templateObject15(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-            textXS: css(_templateObject16(), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight)
-        }
+  defaults: {
+    size: 'bodyM'
+  },
+  variations: {
+    size: {
+      bodyL: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-body-l-line-height);\n                ", ": var(--plasma-typo-body-l-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      bodyM: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-body-m-line-height);\n                ", ": var(--plasma-typo-body-m-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      bodyS: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-body-s-line-height);\n                ", ": var(--plasma-typo-body-s-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      bodyXS: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-body-xs-line-height);\n                ", ": var(--plasma-typo-body-xs-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      bodyXXS: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-body-xxs-line-height);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      dsplL: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-dspl-l-line-height);\n                ", ": var(--plasma-typo-dspl-l-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      dsplM: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-dspl-m-line-height);\n                ", ": var(--plasma-typo-dspl-m-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      dsplS: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-dspl-s-line-height);\n                ", ": var(--plasma-typo-dspl-s-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      h1: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-h1-line-height);\n                ", ": var(--plasma-typo-h1-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      h2: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-h2-line-height);\n                ", ": var(--plasma-typo-h2-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      h3: /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-h3-line-height);\n                ", ": var(--plasma-typo-h3-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      h4: /*#__PURE__*/css(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-h4-line-height);\n                ", ": var(--plasma-typo-h4-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      h5: /*#__PURE__*/css(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-h5-line-height);\n                ", ": var(--plasma-typo-h5-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      textL: /*#__PURE__*/css(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-text-l-line-height);\n                ", ": var(--plasma-typo-text-l-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      textM: /*#__PURE__*/css(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-text-m-line-height);\n                ", ": var(--plasma-typo-text-m-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      textS: /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-text-s-line-height);\n                ", ": var(--plasma-typo-text-s-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
+      textXS: /*#__PURE__*/css(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-text-xs-line-height);\n                ", ": var(--plasma-typo-text-xs-font-size);\n            "])), skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight)
     }
-};
+  }
+};

package/emotion/es/components/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 import { component, mergeConfig, lineSkeletonConfig, textSkeleton, RectSkeleton, withSkeleton } from '@salutejs/plasma-new-hope/emotion';
 import { config as lineSkeletonCustomConfig } from './LineSkeleton.config';
-var mergedLineSkeletonConfig = mergeConfig(lineSkeletonConfig, lineSkeletonCustomConfig);
-export var LineSkeleton = component(mergedLineSkeletonConfig);
-export var TextSkeleton = textSkeleton(LineSkeleton);
-export { RectSkeleton, withSkeleton };
+var mergedLineSkeletonConfig = /*#__PURE__*/mergeConfig(lineSkeletonConfig, lineSkeletonCustomConfig);
+export var LineSkeleton = /*#__PURE__*/component(mergedLineSkeletonConfig);
+export var TextSkeleton = /*#__PURE__*/textSkeleton(LineSkeleton);
+export { RectSkeleton, withSkeleton };

package/emotion/es/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { radiuses } from '@salutejs/plasma-new-hope/emotion';
+
+import { Button as BasicButton } from '../Button/Button';
+
+import { LineSkeleton, TextSkeleton, RectSkeleton, withSkeleton } from './Skeleton';
+
+type StoryLineSkeletonProps = ComponentProps<typeof LineSkeleton>;
+type StoryTextSkeletonProps = ComponentProps<typeof TextSkeleton>;
+type StoryRectSkeletonProps = ComponentProps<typeof RectSkeleton>;
+type BasicButtonProps = ComponentProps<typeof BasicButton>;
+
+const meta: Meta = {
+    title: 'Data Display/Skeleton',
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+const roundnessKeys = Object.keys(radiuses).map((r) => String(r));
+
+const textSizes = [
+    'bodyL',
+    'bodyM',
+    'bodyS',
+    'bodyXS',
+    'bodyXXS',
+    'dsplL',
+    'dsplM',
+    'dsplS',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'textL',
+    'textM',
+    'textS',
+    'textXS',
+];
+
+const Default: StoryObj = {
+    argTypes: {
+        roundness: {
+            options: roundnessKeys,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        roundness: '16',
+        customGradientColor: '',
+        lighter: false,
+    },
+};
+
+export const Line: StoryObj<StoryLineSkeletonProps> = {
+    argTypes: {
+        size: {
+            options: textSizes,
+            control: {
+                type: 'select',
+            },
+        },
+        ...Default.argTypes,
+    },
+    args: {
+        size: 'bodyM',
+        ...Default.args,
+    },
+    render: (args) => <LineSkeleton {...args} />,
+};
+
+export const Text: StoryObj<StoryTextSkeletonProps> = {
+    argTypes: {
+        size: {
+            options: textSizes,
+            control: {
+                type: 'select',
+            },
+        },
+        ...Default.argTypes,
+    },
+    args: {
+        size: 'textM',
+        lines: 5,
+        width: '',
+        ...Default.args,
+    },
+    render: (args) => <TextSkeleton {...args} />,
+};
+
+export const Rect: StoryObj<StoryRectSkeletonProps> = {
+    argTypes: {
+        ...Default.argTypes,
+    },
+    args: {
+        width: '4rem',
+        height: '4rem',
+        ...Default.args,
+    },
+    render: (args) => <RectSkeleton {...args} />,
+};
+
+const ButtonSkeleton = withSkeleton<BasicButtonProps>(BasicButton);
+
+export const Button: StoryObj = {
+    args: {
+        skeleton: true,
+    },
+    render: (args) => <ButtonSkeleton view="default" text="test" {...args} />,
+};

package/emotion/es/components/Skeleton/index.js

@@ -1 +1 @@
-export { LineSkeleton, TextSkeleton, RectSkeleton, withSkeleton } from './Skeleton';
+export { LineSkeleton, TextSkeleton, RectSkeleton, withSkeleton } from './Skeleton';

package/emotion/es/components/Slider/Slider.component-test.js

@@ -0,0 +1,220 @@
+var _StandardTypoStyle, _PadMe, _PadMe2, _PadMe3, _PadMe4, _PadMe5, _PadMe6, _PadMe7, _PadMe8, _PadMe9, _PadMe10, _PadMe11, _PadMe12, _PadMe13, _PadMe14, _PadMe15, _PadMe16, _PadMe17, _PadMe18, _PadMe19, _PadMe20, _PadMe21, _PadMe22;
+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 from 'react';
+import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils';
+import { createGlobalStyle } from 'styled-components';
+import { standard as standardTypo } from '@salutejs/plasma-typo';
+import { IconMic } from '@salutejs/plasma-icons';
+var StandardTypoStyle = /*#__PURE__*/createGlobalStyle(standardTypo);
+describe('plasma-web: Slider', function () {
+  var _Slider, _CypressTestDecorator, _CypressTestDecorator2, _CypressTestDecorator3, _CypressTestDecorator4, _Slider2, _Slider3, _Slider4;
+  var Slider = getComponent('Slider');
+  var CypressTestDecoratorWithTypo = function CypressTestDecoratorWithTypo(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/React.createElement(CypressTestDecorator, null, _StandardTypoStyle || (_StandardTypoStyle = /*#__PURE__*/React.createElement(StandardTypoStyle, null)), children);
+  };
+  it('simple', function () {
+    mount( /*#__PURE__*/React.createElement(CypressTestDecoratorWithTypo, null, _Slider || (_Slider = /*#__PURE__*/React.createElement(Slider, {
+      min: 0,
+      max: 100,
+      value: 50
+    })), _PadMe || (_PadMe = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      min: 0,
+      max: 100,
+      value: [25, 75]
+    })));
+    cy.matchImageSnapshot();
+  });
+  it('_view', function () {
+    mount(_CypressTestDecorator || (_CypressTestDecorator = /*#__PURE__*/React.createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/React.createElement(Slider, {
+      value: 50,
+      min: 0,
+      max: 100,
+      view: "default"
+    }), _PadMe2 || (_PadMe2 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      value: 50,
+      min: 0,
+      max: 100,
+      view: "accent"
+    }), _PadMe3 || (_PadMe3 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      value: 50,
+      min: 0,
+      max: 100,
+      view: "gradient"
+    }))));
+    cy.matchImageSnapshot();
+  });
+  it('_size', function () {
+    mount(_CypressTestDecorator2 || (_CypressTestDecorator2 = /*#__PURE__*/React.createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/React.createElement(Slider, {
+      value: 50,
+      min: 0,
+      max: 100,
+      size: "s"
+    }), _PadMe4 || (_PadMe4 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      value: 50,
+      min: 0,
+      max: 100,
+      size: "m"
+    }), _PadMe5 || (_PadMe5 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      value: 50,
+      min: 0,
+      max: 100,
+      size: "l"
+    }))));
+    cy.matchImageSnapshot();
+  });
+  it('_disabled', function () {
+    mount(_CypressTestDecorator3 || (_CypressTestDecorator3 = /*#__PURE__*/React.createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/React.createElement(Slider, {
+      value: 50,
+      min: 0,
+      max: 100
+    }), _PadMe6 || (_PadMe6 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      value: 50,
+      min: 0,
+      max: 100,
+      disabled: true
+    }))));
+    cy.matchImageSnapshot();
+  });
+  it('_placement', function () {
+    mount(_CypressTestDecorator4 || (_CypressTestDecorator4 = /*#__PURE__*/React.createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/React.createElement(Slider, {
+      label: "Text",
+      value: 50,
+      min: 0,
+      max: 100,
+      labelPlacement: "inner"
+    }), _PadMe7 || (_PadMe7 = /*#__PURE__*/React.createElement(PadMe, null)), _PadMe8 || (_PadMe8 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      label: "Text",
+      value: 50,
+      min: 0,
+      max: 100,
+      labelPlacement: "outer"
+    }), _PadMe9 || (_PadMe9 = /*#__PURE__*/React.createElement(PadMe, null)), _PadMe10 || (_PadMe10 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      label: "Text",
+      value: 50,
+      min: 0,
+      max: 100,
+      rangeValuesPlacement: "inner"
+    }), _PadMe11 || (_PadMe11 = /*#__PURE__*/React.createElement(PadMe, null)), _PadMe12 || (_PadMe12 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      label: "Text",
+      value: 50,
+      min: 0,
+      max: 100,
+      rangeValuesPlacement: "outer"
+    }), _PadMe13 || (_PadMe13 = /*#__PURE__*/React.createElement(PadMe, null)), _PadMe14 || (_PadMe14 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      label: "Text",
+      value: 50,
+      min: 0,
+      max: 100,
+      showRangeValues: true
+    }), _PadMe15 || (_PadMe15 = /*#__PURE__*/React.createElement(PadMe, null)), _PadMe16 || (_PadMe16 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      label: "Text",
+      value: 50,
+      min: 0,
+      max: 100,
+      showRangeValues: false
+    }), _PadMe17 || (_PadMe17 = /*#__PURE__*/React.createElement(PadMe, null)), _PadMe18 || (_PadMe18 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      label: "Text",
+      value: 50,
+      min: 0,
+      max: 100,
+      showCurrentValue: true
+    }), _PadMe19 || (_PadMe19 = /*#__PURE__*/React.createElement(PadMe, null)), _PadMe20 || (_PadMe20 = /*#__PURE__*/React.createElement(PadMe, null)), /*#__PURE__*/React.createElement(Slider, {
+      label: "Text",
+      value: 50,
+      min: 0,
+      max: 100,
+      showCurrentValue: false
+    }))));
+    cy.matchImageSnapshot();
+  });
+  it('_vertical: simple', function () {
+    mount( /*#__PURE__*/React.createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        height: '20rem'
+      }
+    }, _Slider2 || (_Slider2 = /*#__PURE__*/React.createElement(Slider, {
+      value: 0,
+      min: 0,
+      max: 100,
+      size: "s",
+      orientation: "vertical"
+    })), _PadMe21 || (_PadMe21 = /*#__PURE__*/React.createElement(PadMe, null)), _Slider3 || (_Slider3 = /*#__PURE__*/React.createElement(Slider, {
+      value: 50,
+      min: 0,
+      max: 100,
+      size: "m",
+      orientation: "vertical"
+    })), _PadMe22 || (_PadMe22 = /*#__PURE__*/React.createElement(PadMe, null)), _Slider4 || (_Slider4 = /*#__PURE__*/React.createElement(Slider, {
+      value: 100,
+      min: 0,
+      max: 100,
+      size: "l",
+      orientation: "vertical"
+    })))));
+    cy.matchImageSnapshot();
+  });
+  ['s', 'm', 'l'].map(function (size) {
+    return it("_vertical: sliderAlign, ".concat(size), function () {
+      var showIcon = true;
+      var props = {
+        value: 40,
+        min: 0,
+        max: 100,
+        size: size,
+        orientation: 'vertical',
+        label: 'Громкость',
+        labelContent: showIcon ? /*#__PURE__*/React.createElement(IconMic, {
+          size: size === 's' ? 'xs' : 's'
+        }) : null,
+        showCurrentValue: true,
+        showScale: true
+      };
+      mount( /*#__PURE__*/React.createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'center',
+          height: '14rem'
+        }
+      }, /*#__PURE__*/React.createElement(Slider, _extends({
+        sliderAlign: "right"
+      }, props)), /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '0 0.75rem'
+        }
+      }), /*#__PURE__*/React.createElement(Slider, _extends({
+        sliderAlign: "center"
+      }, props)), /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '0 0.75rem'
+        }
+      }), /*#__PURE__*/React.createElement(Slider, _extends({
+        sliderAlign: "left"
+      }, props))), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'center',
+          marginTop: '2rem',
+          height: '14rem'
+        }
+      }, /*#__PURE__*/React.createElement(Slider, _extends({
+        sliderAlign: "center",
+        reversed: true
+      }, props)), /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '0 0.75rem'
+        }
+      }), /*#__PURE__*/React.createElement(Slider, _extends({
+        sliderAlign: "center",
+        reversed: true,
+        labelReversed: true
+      }, props)), /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '0 0.75rem'
+        }
+      }))));
+      cy.matchImageSnapshot();
+    });
+  });
+});