@salutejs/sdds-cs 0.319.0-canary.2020.15698332896.0 → 0.319.0-canary.2020.15831403447.0

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

@@ -1,361 +0,0 @@
-import React, { ComponentProps, useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import styled from 'styled-components';
-
-import { Button } from '../Button';
-import { BodyM } from '../Typography';
-
-import { Sheet } from '.';
-import type { SheetProps } from '.';
-
-const meta: Meta<SheetProps> = {
-    title: 'Overlay/Sheet',
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        handlePlacement: {
-            options: ['inner', 'outer'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-    args: {
-        withBlur: false,
-        withOverlay: true,
-        withTransition: true,
-        hasHandle: true,
-        isHeaderFixed: false,
-        isFooterFixed: false,
-        handlePlacement: 'outer',
-        fullScreen: false,
-    },
-};
-
-export default meta;
-
-type StorySheetProps = ComponentProps<typeof Sheet> & {
-    storyHasHeader: boolean;
-    storyHasFooter: boolean;
-};
-
-const StyledBody = styled(BodyM)`
-    padding-bottom: 200px;
-`;
-
-const StyledBodyFullScreen = styled(BodyM)`
-    height: calc(100vh - 10rem);
-`;
-
-type StorySheetPropsExtension = StorySheetProps & {
-    fullScreen: boolean;
-};
-const StoryDefault = ({
-    withOverlay,
-    withTransition,
-    storyHasFooter,
-    isFooterFixed,
-    storyHasHeader,
-    isHeaderFixed,
-    hasHandle,
-    withBlur,
-    handlePlacement,
-    fullScreen,
-}: StorySheetPropsExtension) => {
-    const [opened, setOpened] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setOpened(true)}>Открыть</Button>
-            <Sheet
-                opened={opened}
-                handlePlacement={handlePlacement}
-                withOverlay={withOverlay}
-                withTransition={withTransition}
-                onClose={() => setOpened(false)}
-                hasHandle={hasHandle}
-                withBlur={withBlur}
-                contentHeader={
-                    storyHasHeader ? (
-                        <div>
-                            <h4>header</h4>
-                        </div>
-                    ) : undefined
-                }
-                isHeaderFixed={isHeaderFixed}
-                contentFooter={
-                    storyHasFooter ? (
-                        <div>
-                            <p>footer</p>
-                        </div>
-                    ) : undefined
-                }
-                isFooterFixed={isFooterFixed}
-            >
-                {fullScreen ? <StyledBodyFullScreen>body</StyledBodyFullScreen> : <StyledBody>body</StyledBody>}
-            </Sheet>
-        </>
-    );
-};
-
-export const Default: StoryObj<StorySheetProps> = {
-    args: {
-        storyHasHeader: true,
-        storyHasFooter: true,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryWithoutOverlay = () => {
-    const [opened, setOpened] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setOpened(true)}>Открыть</Button>
-            <Sheet opened={opened} withOverlay={false} onClose={() => setOpened(false)}>
-                <StyledBody>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                    consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
-                    fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
-                    placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
-                    dolorem labore quaerat vero maxime ab ipsa nihil.
-                </StyledBody>
-            </Sheet>
-        </>
-    );
-};
-
-export const WithoutOverlay: StoryObj = {
-    render: () => <StoryWithoutOverlay />,
-};
-
-const StoryWithScroll = ({
-    withOverlay,
-    withTransition,
-    storyHasFooter,
-    isFooterFixed,
-    storyHasHeader,
-    isHeaderFixed,
-    hasHandle,
-    withBlur,
-}: StorySheetProps) => {
-    const [opened, setOpened] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setOpened(true)}>Открыть</Button>
-            <Sheet
-                opened={opened}
-                withOverlay={withOverlay}
-                withTransition={withTransition}
-                onClose={() => setOpened(false)}
-                hasHandle={hasHandle}
-                withBlur={withBlur}
-                contentHeader={
-                    storyHasHeader ? (
-                        <div>
-                            <h4>header</h4>
-                        </div>
-                    ) : undefined
-                }
-                isHeaderFixed={isHeaderFixed}
-                contentFooter={
-                    storyHasFooter ? (
-                        <div>
-                            <p>footer</p>
-                        </div>
-                    ) : undefined
-                }
-                isFooterFixed={isFooterFixed}
-            >
-                <BodyM>
-                    <Button onClick={() => setOpened(false)}>Закрыть</Button>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
-                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
-                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
-                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
-                    </p>
-                    <Button onClick={() => setOpened(false)}>Закрыть</Button>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
-                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
-                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
-                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
-                    </p>
-                </BodyM>
-            </Sheet>
-        </>
-    );
-};
-
-export const WithScroll: StoryObj<StorySheetProps> = {
-    args: {
-        storyHasHeader: true,
-        storyHasFooter: true,
-    },
-    render: (args) => <StoryWithScroll {...args} />,
-};
-
-const StoryWithInsideScroll = ({
-    withOverlay,
-    withTransition,
-    storyHasFooter,
-    isFooterFixed,
-    storyHasHeader,
-    isHeaderFixed,
-    hasHandle,
-    withBlur,
-}: StorySheetProps) => {
-    const [opened, setOpened] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setOpened(true)}>Открыть</Button>
-            <Sheet
-                opened={opened}
-                withOverlay={withOverlay}
-                withTransition={withTransition}
-                onClose={() => setOpened(false)}
-                hasHandle={hasHandle}
-                withBlur={withBlur}
-                contentHeader={
-                    storyHasHeader ? (
-                        <div>
-                            <h4>header</h4>
-                        </div>
-                    ) : undefined
-                }
-                isHeaderFixed={isHeaderFixed}
-                contentFooter={
-                    storyHasFooter ? (
-                        <div>
-                            <p>footer</p>
-                        </div>
-                    ) : undefined
-                }
-                isFooterFixed={isFooterFixed}
-            >
-                <p>Вложенные кнопки</p>
-                <div
-                    style={{
-                        height: '150px',
-                        overflowY: 'scroll',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '1rem',
-                    }}
-                >
-                    <Button>Кнопка 1</Button>
-                    <Button>Кнопка 2</Button>
-                    <Button>Кнопка 3</Button>
-                    <Button>Кнопка 4</Button>
-                    <Button>Кнопка 5</Button>
-                    <Button>Кнопка 6</Button>
-                    <Button>Кнопка 7</Button>
-                    <Button>Кнопка 8</Button>
-                </div>
-                <BodyM>Lorem ipsum dolor sit amet consectetur adipisicing elit.</BodyM>
-            </Sheet>
-        </>
-    );
-};
-
-export const WithInsideScroll: StoryObj<StorySheetProps> = {
-    args: {
-        storyHasHeader: true,
-        storyHasFooter: true,
-    },
-    render: (args) => <StoryWithInsideScroll {...args} />,
-};
-
-const StoryWithDoubleScroll = ({
-    withOverlay,
-    withTransition,
-    storyHasFooter,
-    isFooterFixed,
-    storyHasHeader,
-    isHeaderFixed,
-    hasHandle,
-    withBlur,
-}: StorySheetProps) => {
-    const [opened, setOpened] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setOpened(true)}>Открыть</Button>
-            <Sheet
-                opened={opened}
-                withOverlay={withOverlay}
-                withTransition={withTransition}
-                onClose={() => setOpened(false)}
-                hasHandle={hasHandle}
-                withBlur={withBlur}
-                contentHeader={
-                    storyHasHeader ? (
-                        <div>
-                            <h4>header</h4>
-                        </div>
-                    ) : undefined
-                }
-                isHeaderFixed={isHeaderFixed}
-                contentFooter={
-                    storyHasFooter ? (
-                        <div>
-                            <p>footer</p>
-                        </div>
-                    ) : undefined
-                }
-                isFooterFixed={isFooterFixed}
-            >
-                <BodyM>
-                    <Button onClick={() => setOpened(false)}>Закрыть</Button>
-                    <p>Вложенные кнопки</p>
-                    <div
-                        style={{
-                            height: '150px',
-                            overflowY: 'scroll',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '1rem',
-                        }}
-                    >
-                        <Button>Кнопка 1</Button>
-                        <Button>Кнопка 2</Button>
-                        <Button>Кнопка 3</Button>
-                        <Button>Кнопка 4</Button>
-                        <Button>Кнопка 5</Button>
-                        <Button>Кнопка 6</Button>
-                        <Button>Кнопка 7</Button>
-                        <Button>Кнопка 8</Button>
-                    </div>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
-                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
-                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
-                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
-                    </p>
-                    <Button onClick={() => setOpened(false)}>Закрыть</Button>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
-                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
-                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
-                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
-                    </p>
-                </BodyM>
-            </Sheet>
-        </>
-    );
-};
-
-export const WithDoubleScroll: StoryObj<StorySheetProps> = {
-    args: {
-        storyHasHeader: true,
-        storyHasFooter: true,
-    },
-    render: (args) => <StoryWithDoubleScroll {...args} />,
-};

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

@@ -1,116 +0,0 @@
-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/Slider/Slider.component-test.js

@@ -1,220 +0,0 @@
-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'].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();
-    });
-  });
-});