@salutejs/sdds-serv 0.314.0-canary.2020.15824629894.0 → 0.314.0-canary.2021.15776478579.0

package/emotion/cjs/components/Steps/Steps.stories.tsx

@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, getConfigVariations } from '@salutejs/plasma-sb-utils';
+import { IconMic } from '@salutejs/plasma-icons';
+
+import { Steps } from './Steps';
+import { config } from './Steps.config';
+
+import type { StepItemProps } from '.';
+
+const { views, sizes } = getConfigVariations(config);
+
+const meta: Meta<typeof Steps> = {
+    title: 'Navigation/Steps',
+    decorators: [InSpacingDecorator],
+    component: Steps,
+};
+
+export default meta;
+
+type Story = StoryObj<ComponentProps<typeof Steps>>;
+
+const renderIndicator = ({ status, size }) => {
+    let iconSize;
+    if (size === 'xs' || size === 's') {
+        iconSize = 'xs';
+    } else if (status === 'active') {
+        iconSize = 's';
+    } else {
+        iconSize = 'xs';
+    }
+
+    return <IconMic color="inherit" size={iconSize} />;
+};
+
+const DefaultStory = (args) => {
+    const {
+        maxWidth,
+        title,
+        content,
+        size,
+        indicatorType,
+        quantity,
+        hasContent,
+        loading,
+        disabled,
+        simple,
+        ...rest
+    } = args;
+
+    const innerTitle = title || 'Title';
+
+    const [items, setItems] = useState([]);
+
+    useEffect(() => {
+        const newItems = new Array(quantity).fill(null).map((_, index) => {
+            const indicator = index + 1;
+            const status = index === 0 ? 'active' : 'inactive';
+
+            if (simple) {
+                return {
+                    indicator,
+                    status,
+                };
+            }
+
+            return {
+                title: innerTitle,
+                content,
+                indicator,
+                status,
+            };
+        });
+
+        setItems(newItems);
+    }, [loading, quantity, simple]);
+
+    useEffect(() => {
+        setItems((curItems) =>
+            curItems.map((item, index) => {
+                if (indicatorType === 'numbered') {
+                    return simple
+                        ? { ...item, indicator: index + 1 }
+                        : { ...item, title: innerTitle, content, indicator: index + 1 };
+                }
+
+                if (indicatorType === 'bullet') {
+                    return simple
+                        ? { ...item, indicator: undefined }
+                        : { ...item, title: innerTitle, content, indicator: undefined };
+                }
+
+                if (indicatorType === 'icon') {
+                    return simple
+                        ? { ...item, indicator: renderIndicator }
+                        : { ...item, title: innerTitle, content, indicator: renderIndicator };
+                }
+
+                return item;
+            }),
+        );
+    }, [indicatorType, innerTitle, content, simple]);
+
+    useEffect(() => {
+        setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
+    }, [disabled]);
+
+    const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
+        if (prevIndex !== undefined) {
+            items[prevIndex].status = 'completed';
+        }
+
+        items[index].status = 'active';
+
+        setItems([...items]);
+    };
+
+    return (
+        <div style={{ maxWidth, height: '600px' }}>
+            <Steps
+                size={size}
+                items={items}
+                onChange={onChange}
+                hasLoader={loading}
+                hasContent={hasContent}
+                {...rest}
+            />
+        </div>
+    );
+};
+
+export const Default: Story = {
+    args: {
+        view: 'default',
+        itemView: 'default',
+        size: 'm',
+        maxWidth: '100%',
+        quantity: 6,
+        title: 'Title',
+        content: 'Content',
+        contentAlign: 'left',
+        indicatorType: 'numbered',
+        orientation: 'horizontal',
+        hasLine: true,
+        hasContent: 'all',
+        disabled: false,
+        loading: false,
+        simple: false,
+    },
+    argTypes: {
+        maxWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        itemView: {
+            options: ['default', 'negative', 'warning', 'positive'],
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        orientation: {
+            options: ['horizontal', 'vertical'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        contentAlign: {
+            options: ['left', 'center'],
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'orientation', eq: 'horizontal' },
+        },
+        indicatorType: {
+            options: ['numbered', 'bullet', 'icon'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        hasContent: {
+            options: ['all', 'active', 'none'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        simple: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    render: (args) => <DefaultStory {...args} />,
+};

package/emotion/cjs/components/Steps/index.js

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "Steps", {
-    enumerable: true,
-    get: function() {
-        return _Steps.Steps;
-    }
+  enumerable: true,
+  get: function get() {
+    return _Steps.Steps;
+  }
 });
-var _Steps = require("./Steps");
+var _Steps = /*#__PURE__*/require("./Steps");

package/emotion/cjs/components/Switch/Switch.config.js

@@ -1,198 +1,38 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-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-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-xs-font-family);\n                ",
-        ": var(--plasma-typo-body-xs-font-style);\n                ",
-        ": var(--plasma-typo-body-xs-font-weight);\n                ",
-        ": var(--plasma-typo-body-xs-line-height);\n                ",
-        ": var(--plasma-typo-body-xs-font-size);\n                ",
-        ": var(--plasma-typo-body-xs-letter-spacing);\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.75rem;\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-xs-letter-spacing);\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.75rem;\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-body-l-font-family);\n                ",
-        ": var(--plasma-typo-body-l-font-style);\n                ",
-        ": var(--plasma-typo-body-l-font-weight);\n                ",
-        ": var(--plasma-typo-body-l-line-height);\n                ",
-        ": var(--plasma-typo-body-l-font-size);\n                ",
-        ": var(--plasma-typo-body-l-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-xs-letter-spacing);\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.75rem;\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 2.75rem;\n                ",
-        ": 1.75rem;\n                ",
-        ": calc(var(",
-        ") / 2);\n                ",
-        ": 1.5rem;\n                ",
-        ": calc(var(",
-        ") / 2);\n                ",
-        ": 0.125rem;\n                ",
-        ": 0.125rem;\n                ",
-        ": 1.25;\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 2rem;\n                ",
-        ": 1.25rem;\n                ",
-        ": calc(var(",
-        ") / 2);\n                ",
-        ": 1rem;\n                ",
-        ": calc(var(",
-        ") / 2);\n                ",
-        ": 0.125rem;\n                ",
-        ": 0.125rem;\n                ",
-        ": 1.25;\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-secondary);\n                ",
-        ": initial;\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--surface-accent-hover);\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
-        ": var(--surface-transparent-tertiary-hover);\n                ",
-        ": 0;\n                ",
-        ": 0;\n                ",
-        ": var(--on-dark-surface-solid-default);\n                ",
-        ": var(--on-dark-surface-solid-default);\n                ",
-        ": 0 1px 1px rgba(0, 0, 0, 0.11);\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.4;\n            "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-accent);\n            "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
-    defaults: {
-        view: 'default',
-        size: 'm',
-        toggleSize: 'l',
-        labelPosition: 'before',
-        focused: 'true'
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    toggleSize: 'l',
+    labelPosition: 'before',
+    focused: 'true'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-line-height);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-line-height);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": 0.25rem;\n                ", ": 0.75rem;\n            "])), _emotion.switchTokens.fontFamily, _emotion.switchTokens.fontStyle, _emotion.switchTokens.fontWeight, _emotion.switchTokens.lineHeight, _emotion.switchTokens.fontSize, _emotion.switchTokens.letterSpacing, _emotion.switchTokens.descriptionFontFamily, _emotion.switchTokens.descriptionFontStyle, _emotion.switchTokens.descriptionFontWeight, _emotion.switchTokens.descriptionLineHeight, _emotion.switchTokens.descriptionFontSize, _emotion.switchTokens.descriptionLetterSpacing, _emotion.switchTokens.verticalGap, _emotion.switchTokens.labelOffset),
+      m: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-line-height);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-line-height);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": 0.25rem;\n                ", ": 0.75rem;\n            "])), _emotion.switchTokens.fontFamily, _emotion.switchTokens.fontStyle, _emotion.switchTokens.fontWeight, _emotion.switchTokens.lineHeight, _emotion.switchTokens.fontSize, _emotion.switchTokens.letterSpacing, _emotion.switchTokens.descriptionFontFamily, _emotion.switchTokens.descriptionFontStyle, _emotion.switchTokens.descriptionFontWeight, _emotion.switchTokens.descriptionLineHeight, _emotion.switchTokens.descriptionFontSize, _emotion.switchTokens.descriptionLetterSpacing, _emotion.switchTokens.verticalGap, _emotion.switchTokens.labelOffset),
+      l: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-line-height);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-line-height);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": 0.25rem;\n                ", ": 0.75rem;\n            "])), _emotion.switchTokens.fontFamily, _emotion.switchTokens.fontStyle, _emotion.switchTokens.fontWeight, _emotion.switchTokens.lineHeight, _emotion.switchTokens.fontSize, _emotion.switchTokens.letterSpacing, _emotion.switchTokens.descriptionFontFamily, _emotion.switchTokens.descriptionFontStyle, _emotion.switchTokens.descriptionFontWeight, _emotion.switchTokens.descriptionLineHeight, _emotion.switchTokens.descriptionFontSize, _emotion.switchTokens.descriptionLetterSpacing, _emotion.switchTokens.verticalGap, _emotion.switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.75rem;\n                ", ": 1.75rem;\n                ", ": calc(var(", ") / 2);\n                ", ": 1.5rem;\n                ", ": calc(var(", ") / 2);\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 1.25;\n            "])), _emotion.switchTokens.trackWidth, _emotion.switchTokens.trackHeight, _emotion.switchTokens.trackBorderRadius, _emotion.switchTokens.trackHeight, _emotion.switchTokens.thumbSize, _emotion.switchTokens.thumbBorderRadius, _emotion.switchTokens.thumbSize, _emotion.switchTokens.thumbOffsetOn, _emotion.switchTokens.thumbOffsetOff, _emotion.switchTokens.thumbPressScale),
+      s: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2rem;\n                ", ": 1.25rem;\n                ", ": calc(var(", ") / 2);\n                ", ": 1rem;\n                ", ": calc(var(", ") / 2);\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 1.25;\n            "])), _emotion.switchTokens.trackWidth, _emotion.switchTokens.trackHeight, _emotion.switchTokens.trackBorderRadius, _emotion.switchTokens.trackHeight, _emotion.switchTokens.thumbSize, _emotion.switchTokens.thumbBorderRadius, _emotion.switchTokens.thumbSize, _emotion.switchTokens.thumbOffsetOn, _emotion.switchTokens.thumbOffsetOff, _emotion.switchTokens.thumbPressScale)
+    },
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-secondary);\n                ", ": initial;\n                ", ": var(--surface-accent);\n                ", ": var(--surface-accent-hover);\n                ", ": var(--surface-transparent-tertiary);\n                ", ": var(--surface-transparent-tertiary-hover);\n                ", ": 0;\n                ", ": 0;\n                ", ": var(--on-dark-surface-solid-default);\n                ", ": var(--on-dark-surface-solid-default);\n                ", ": 0 1px 1px rgba(0, 0, 0, 0.11);\n            "])), _emotion.switchTokens.labelColor, _emotion.switchTokens.descriptionColor, _emotion.switchTokens.descriptionMaxLines, _emotion.switchTokens.trackBackgroundColorOn, _emotion.switchTokens.trackBackgroundColorOnHover, _emotion.switchTokens.trackBackgroundColorOff, _emotion.switchTokens.trackBackgroundColorOffHover, _emotion.switchTokens.trackBorderWidthOn, _emotion.switchTokens.trackBorderWidthOff, _emotion.switchTokens.thumbBackgroundColorOn, _emotion.switchTokens.thumbBackgroundColorOff, _emotion.switchTokens.thumbBoxShadow)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.4;\n            "])), _emotion.switchTokens.disabledOpacity)
     },
-    variations: {
-        size: {
-            s: (0, _emotion.css)(_templateObject(), _emotion.switchTokens.fontFamily, _emotion.switchTokens.fontStyle, _emotion.switchTokens.fontWeight, _emotion.switchTokens.lineHeight, _emotion.switchTokens.fontSize, _emotion.switchTokens.letterSpacing, _emotion.switchTokens.descriptionFontFamily, _emotion.switchTokens.descriptionFontStyle, _emotion.switchTokens.descriptionFontWeight, _emotion.switchTokens.descriptionLineHeight, _emotion.switchTokens.descriptionFontSize, _emotion.switchTokens.descriptionLetterSpacing, _emotion.switchTokens.verticalGap, _emotion.switchTokens.labelOffset),
-            m: (0, _emotion.css)(_templateObject1(), _emotion.switchTokens.fontFamily, _emotion.switchTokens.fontStyle, _emotion.switchTokens.fontWeight, _emotion.switchTokens.lineHeight, _emotion.switchTokens.fontSize, _emotion.switchTokens.letterSpacing, _emotion.switchTokens.descriptionFontFamily, _emotion.switchTokens.descriptionFontStyle, _emotion.switchTokens.descriptionFontWeight, _emotion.switchTokens.descriptionLineHeight, _emotion.switchTokens.descriptionFontSize, _emotion.switchTokens.descriptionLetterSpacing, _emotion.switchTokens.verticalGap, _emotion.switchTokens.labelOffset),
-            l: (0, _emotion.css)(_templateObject2(), _emotion.switchTokens.fontFamily, _emotion.switchTokens.fontStyle, _emotion.switchTokens.fontWeight, _emotion.switchTokens.lineHeight, _emotion.switchTokens.fontSize, _emotion.switchTokens.letterSpacing, _emotion.switchTokens.descriptionFontFamily, _emotion.switchTokens.descriptionFontStyle, _emotion.switchTokens.descriptionFontWeight, _emotion.switchTokens.descriptionLineHeight, _emotion.switchTokens.descriptionFontSize, _emotion.switchTokens.descriptionLetterSpacing, _emotion.switchTokens.verticalGap, _emotion.switchTokens.labelOffset)
-        },
-        toggleSize: {
-            l: (0, _emotion.css)(_templateObject3(), _emotion.switchTokens.trackWidth, _emotion.switchTokens.trackHeight, _emotion.switchTokens.trackBorderRadius, _emotion.switchTokens.trackHeight, _emotion.switchTokens.thumbSize, _emotion.switchTokens.thumbBorderRadius, _emotion.switchTokens.thumbSize, _emotion.switchTokens.thumbOffsetOn, _emotion.switchTokens.thumbOffsetOff, _emotion.switchTokens.thumbPressScale),
-            s: (0, _emotion.css)(_templateObject4(), _emotion.switchTokens.trackWidth, _emotion.switchTokens.trackHeight, _emotion.switchTokens.trackBorderRadius, _emotion.switchTokens.trackHeight, _emotion.switchTokens.thumbSize, _emotion.switchTokens.thumbBorderRadius, _emotion.switchTokens.thumbSize, _emotion.switchTokens.thumbOffsetOn, _emotion.switchTokens.thumbOffsetOff, _emotion.switchTokens.thumbPressScale)
-        },
-        view: {
-            default: (0, _emotion.css)(_templateObject5(), _emotion.switchTokens.labelColor, _emotion.switchTokens.descriptionColor, _emotion.switchTokens.descriptionMaxLines, _emotion.switchTokens.trackBackgroundColorOn, _emotion.switchTokens.trackBackgroundColorOnHover, _emotion.switchTokens.trackBackgroundColorOff, _emotion.switchTokens.trackBackgroundColorOffHover, _emotion.switchTokens.trackBorderWidthOn, _emotion.switchTokens.trackBorderWidthOff, _emotion.switchTokens.thumbBackgroundColorOn, _emotion.switchTokens.thumbBackgroundColorOff, _emotion.switchTokens.thumbBoxShadow)
-        },
-        disabled: {
-            true: (0, _emotion.css)(_templateObject6(), _emotion.switchTokens.disabledOpacity)
-        },
-        focused: {
-            true: (0, _emotion.css)(_templateObject7(), _emotion.switchTokens.trackFocusColor)
-        }
+    focused: {
+      "true": /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-accent);\n            "])), _emotion.switchTokens.trackFocusColor)
     }
-};
+  }
+};

package/emotion/cjs/components/Switch/Switch.js

@@ -1,15 +1,11 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "Switch", {
-    enumerable: true,
-    get: function() {
-        return Switch;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _Switchconfig = require("./Switch.config");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.switchConfig, _Switchconfig.config);
-var SwitchComponent = (0, _emotion.component)(mergedConfig);
-var Switch = SwitchComponent;
+exports.Switch = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Switch = /*#__PURE__*/require("./Switch.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.switchConfig, _Switch.config);
+var SwitchComponent = /*#__PURE__*/(0, _emotion.component)(mergedConfig);
+var Switch = exports.Switch = SwitchComponent;

package/emotion/cjs/components/Switch/Switch.stories.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import styled from 'styled-components';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import { Switch } from '.';
+import type { SwitchProps } from '.';
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+
+const meta: Meta<SwitchProps> = {
+    title: 'Data Entry/Switch',
+    component: Switch,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        label: {
+            control: {
+                type: 'text',
+            },
+        },
+        description: {
+            control: {
+                type: 'text',
+            },
+        },
+        labelPosition: {
+            options: ['before', 'after'],
+            control: { type: 'select' },
+        },
+        size: {
+            control: { type: 'select' },
+        },
+        toggleSize: {
+            control: { type: 'select' },
+        },
+        ...disableProps([
+            'id',
+            'onFocus',
+            'onBlur',
+            'onChange',
+            'value',
+            'checked',
+            'focused',
+            'pressed',
+            'outlined',
+            'theme',
+            'as',
+            'forwardedAs',
+            'view',
+            'placeholder',
+            'name',
+            'type',
+            'readOnly',
+            'required',
+            'minLength',
+            'maxLength',
+        ]),
+    },
+    args: {
+        label: 'Label',
+        description: 'Description',
+        labelPosition: 'before',
+    },
+};
+
+export default meta;
+
+const StyledWrapper = styled.div`
+    width: 13.75rem;
+`;
+
+const StoryDefault = (args: SwitchProps) => {
+    const value = 0;
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <StyledWrapper>
+            <Switch
+                value={value}
+                checked={checked}
+                onChange={(event) => {
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...args}
+            />
+        </StyledWrapper>
+    );
+};
+
+export const Default: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

package/emotion/cjs/components/Switch/index.js

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "Switch", {
-    enumerable: true,
-    get: function() {
-        return _Switch.Switch;
-    }
+  enumerable: true,
+  get: function get() {
+    return _Switch.Switch;
+  }
 });
-var _Switch = require("./Switch");
+var _Switch = /*#__PURE__*/require("./Switch");