@alfalab/core-components 30.8.0-beta.0 → 31.0.0-beta.0

package/steps/esm/components/step/index.css

@@ -0,0 +1,154 @@
+/* hash: j46l8 */
+:root {
+    --color-light-border-link: #007aff;
+    --color-light-border-primary: #dbdee1;
+    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-quaternary: #dbdee1;
+    --color-light-text-primary: #0b1f35;
+    --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+}
+:root {
+    --focus-color: var(--color-light-border-link);
+}
+:root {
+    --steps-option-svg-color: var(--color-light-graphic-positive);
+    --steps-dash-border: 2px solid var(--color-light-graphic-positive);
+}
+.steps__step_xd38j {
+    display: flex;
+    outline: none
+}
+.steps__step_xd38j:not(.steps__vertical_xd38j) {
+        align-items: center;
+    }
+.steps__step_xd38j.steps__interactive_xd38j:not(.steps__disabled_xd38j):hover {
+    cursor: pointer;
+}
+.steps__step_xd38j.steps__disabled_xd38j:hover .steps__text_xd38j {
+        background: unset;
+    }
+.steps__step_xd38j.steps__disabled_xd38j .steps__indicator_xd38j {
+        cursor: unset;
+    }
+.steps__indicator_xd38j {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-right: var(--gap-2xs)
+}
+.steps__indicator_xd38j.steps__vertical_xd38j {
+        flex-direction: column;
+        margin-right: var(--gap-xs);
+    }
+.steps__option_xd38j {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-graphic-primary);
+    background: var(--color-light-graphic-quaternary);
+    min-width: 24px;
+    height: 24px;
+    border-radius: 50%
+}
+.steps__option_xd38j.steps__vertical_xd38j {
+        margin-top: var(--gap-xs);
+    }
+.steps__dash_xd38j {
+    flex: 1 1 auto;
+    min-width: 24px;
+    border-top: 2px solid var(--color-light-border-primary);
+    margin-right: var(--gap-xs)
+}
+.steps__dash_xd38j.steps__completed_xd38j {
+        border-top: var(--steps-dash-border);
+    }
+.steps__dash_xd38j.steps__vertical_xd38j {
+        min-width: unset;
+        min-height: 24px;
+        margin-right: 0;
+        margin-top: var(--gap-xs);
+        border-left: 2px solid var(--color-light-border-primary);
+        border-top: none;
+    }
+.steps__dash_xd38j.steps__completed_xd38j.steps__vertical_xd38j {
+        border-left: var(--steps-dash-border);
+    }
+.steps__text_xd38j {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    transition: background 0.2s;
+    padding: var(--gap-xs);
+    color: var(--color-light-text-primary);
+    border-radius: var(--gap-xs);
+    height: min-content
+}
+.steps__text_xd38j.steps__interactive_xd38j:not(.steps__disabled_xd38j):hover {
+            background: var(--color-light-bg-primary-inverted-alpha-7);
+        }
+.steps__text_xd38j.steps__interactive_xd38j:not(.steps__disabled_xd38j):active {
+            background: var(--color-light-bg-primary-inverted-alpha-15);
+        }
+.steps__focused_xd38j {
+    outline: var(--gap-3xs) solid var(--focus-color);
+    outline-offset: var(--gap-3xs);
+}
+.steps__selected_xd38j .steps__text_xd38j {
+        color: var(--color-light-graphic-primary);
+    }
+.steps__selected_xd38j .steps__option_xd38j {
+        color: var(--color-light-graphic-primary-inverted);
+        background: var(--color-light-graphic-primary);
+    }
+.steps__checkbox_xd38j {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-light-graphic-quaternary);
+}
+.steps__dot_xd38j {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-light-graphic-quaternary);
+}
+.steps__selected_xd38j .steps__checkbox_xd38j {
+    border: 2px solid var(--color-light-graphic-primary)
+}
+.steps__selected_xd38j .steps__checkbox_xd38j .steps__dot_xd38j {
+        background: var(--color-light-graphic-primary);
+    }
+.steps__option_xd38j:not(.steps__error_xd38j).steps__unordered_xd38j {
+    background: unset;
+}
+.steps__badge_xd38j {
+    padding: 0
+}
+.steps__badge_xd38j > [class*='positive'] {
+        color: var(--steps-option-svg-color);
+        background-color: var(--steps-option-svg-color);
+    }

package/steps/esm/components/step/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/steps/esm/components/step/index.js

@@ -0,0 +1,7 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '../../../../badge/esm';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
+export { Step } from './Component.js';

package/steps/esm/index.css

@@ -0,0 +1,18 @@
+/* hash: hx0e0 */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.steps__component_jlvbf {
+    display: flex;
+    align-items: center;
+    flex-direction: row
+}
+.steps__component_jlvbf.steps__vertical_jlvbf {
+        flex-direction: column;
+        align-items: flex-start;
+    }

package/steps/esm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/steps/esm/index.js

@@ -0,0 +1,8 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '../../badge/esm';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import './components/step/Component.js';
+export { Steps } from './Component.js';

package/steps/index.css

@@ -0,0 +1,18 @@
+/* hash: hx0e0 */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.steps__component_jlvbf {
+    display: flex;
+    align-items: center;
+    flex-direction: row
+}
+.steps__component_jlvbf.steps__vertical_jlvbf {
+        flex-direction: column;
+        align-items: flex-start;
+    }

package/steps/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/steps/index.js

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../badge');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/ExclamationCircleMIcon');
+require('./components/step/Component.js');
+var Component = require('./Component.js');
+
+
+
+exports.Steps = Component.Steps;

package/steps/modern/Component.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+type StepsProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дочерние элементы
+     */
+    children: ReactNode;
+    /**
+     * Активный шаг, указанный по умолчанию
+     * @default 1
+     */
+    defaultActiveStep?: number;
+    /**
+     * Активный шаг
+     */
+    activeStep?: number;
+    /**
+     * Управление возможностью отключения пометки пройденного шага
+     * @default true
+     */
+    isMarkCompletedSteps?: boolean;
+    /**
+     * Управление ориентацией компонента
+     * @default false
+     */
+    isVerticalAlign?: boolean;
+    /**
+     * Управление отображением номера шага
+     */
+    ordered?: boolean;
+    /**
+     * Включение / отключение интерактивности шагов
+     */
+    interactive?: boolean;
+    /**
+     * Кастомный метод для управления состоянием disabled шага и
+     * возможностью перехода на этот шаг
+     * @param stepNumber - номер шага
+     * @return Флаг состояния disabled
+     */
+    checkIsStepDisabled?: (stepNumber: number) => boolean;
+    /**
+     * Кастомный метод для управления состоянием шага error
+     * @param stepNumber - номер шага
+     * @return Флаг состояния error
+     */
+    checkIsStepError?: (stepNumber: number) => boolean;
+    /**
+     * Обработчик клика на шаг
+     * @param stepNumber - номер активного шага
+     */
+    onChange?: (stepNumber: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Steps: React.FC<StepsProps>;
+export { StepsProps, Steps };

package/steps/modern/Component.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import cn from 'classnames';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import '../../badge/modern';
+import { Step } from './components/step/Component.js';
+
+var styles = {"component":"steps__component_jlvbf","vertical":"steps__vertical_jlvbf"};
+require('./index.css');
+
+const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeStepProp, isMarkCompletedSteps = true, isVerticalAlign = false, ordered = true, interactive = true, checkIsStepDisabled, checkIsStepError, onChange, dataTestId, }) => {
+    const [activeStep, setActiveStep] = useState(activeStepProp || defaultActiveStep);
+    const stepsLength = React.Children.count(children);
+    useEffect(() => {
+        if (activeStepProp) {
+            setActiveStep(activeStepProp);
+        }
+    }, [activeStepProp]);
+    const handleStepClick = (stepNumber) => {
+        setActiveStep(stepNumber);
+        if (onChange) {
+            onChange(stepNumber);
+        }
+    };
+    if (!stepsLength)
+        return null;
+    return (React.createElement("div", { className: cn(className, styles.component, {
+            [styles.vertical]: isVerticalAlign,
+        }), "data-test-id": dataTestId }, React.Children.map(children, (step, index) => {
+        const stepNumber = index + 1;
+        const isSelected = stepNumber === activeStep;
+        const isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
+        const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
+        const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
+        const isNotLastStep = stepsLength !== stepNumber;
+        const isInteractive = !disabled && interactive;
+        return (React.createElement(Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isError: isError, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber }, step));
+    })));
+};
+
+export { Steps };

package/steps/modern/components/step/Component.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+type StepProps = {
+    /**
+     * Название шага
+     */
+    children: ReactNode;
+    /**
+     * Номер шага
+     */
+    stepNumber: number;
+    /**
+     * Маркер того, что текущий шаг выбран
+     */
+    isSelected: boolean;
+    /**
+     * Маркер того, что текущий шаг доступен для клика
+     */
+    disabled: boolean;
+    /**
+     * Управление отображением номера шага
+     */
+    ordered?: boolean;
+    /**
+     * Включение / отключение интерактивности шагов
+     */
+    interactive?: boolean;
+    /**
+     * Маркер того, что на текущем шаге есть ошибка
+     */
+    isError: boolean;
+    /**
+     * Маркер того, что текущий шаг нужно пометить как завершенный
+     */
+    isStepCompleted: boolean;
+    /**
+     * Управление ориентацией компонента
+     * @default false
+     */
+    isVerticalAlign?: boolean;
+    /**
+     * Указывает, является ли текущий шаг последним в списке
+     */
+    isNotLastStep?: boolean;
+    /**
+     * Обработчик нажатия на текущей шаг
+     * @param stepNumber - номер шага
+     */
+    onClick: (stepNumber: number) => void;
+};
+declare const Step: React.FC<StepProps>;
+export { StepProps, Step };

package/steps/modern/components/step/Component.js

@@ -0,0 +1,71 @@
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useFocus } from '@alfalab/hooks';
+import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import { Badge } from '../../../../badge/modern';
+
+var styles = {"step":"steps__step_xd38j","vertical":"steps__vertical_xd38j","interactive":"steps__interactive_xd38j","disabled":"steps__disabled_xd38j","text":"steps__text_xd38j","indicator":"steps__indicator_xd38j","option":"steps__option_xd38j","dash":"steps__dash_xd38j","completed":"steps__completed_xd38j","focused":"steps__focused_xd38j","selected":"steps__selected_xd38j","checkbox":"steps__checkbox_xd38j","dot":"steps__dot_xd38j","error":"steps__error_xd38j","unordered":"steps__unordered_xd38j","badge":"steps__badge_xd38j"};
+require('./index.css');
+
+const Step = ({ children, stepNumber, isSelected, disabled, ordered, isError, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, }) => {
+    const stepRef = useRef(null);
+    const [focused] = useFocus(stepRef, 'keyboard');
+    const handleButtonClick = () => {
+        if (!disabled && onClick) {
+            onClick(stepNumber);
+        }
+    };
+    const handleTextClick = (e) => {
+        if (!interactive) {
+            e.stopPropagation();
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            handleButtonClick();
+        }
+    };
+    const getStepContent = () => {
+        if (isStepCompleted && !isError) {
+            return (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: 'positive', className: styles.badge, content: React.createElement(CheckmarkCircleMIcon, null) }));
+        }
+        if (isError) {
+            return (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: 'negative', className: styles.badge, content: React.createElement(ExclamationCircleMIcon, null) }));
+        }
+        if (!ordered) {
+            return (React.createElement("div", { className: styles.checkbox },
+                React.createElement("span", { className: styles.dot })));
+        }
+        return stepNumber;
+    };
+    const renderDash = () => (React.createElement("div", { className: cn(styles.dash, {
+            [styles.vertical]: isVerticalAlign,
+            [styles.completed]: isStepCompleted,
+        }) }));
+    return (React.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn(styles.step, {
+            [styles.completed]: isStepCompleted,
+            [styles.error]: isError,
+            [styles.selected]: isSelected,
+            [styles.disabled]: disabled,
+            [styles.focused]: focused,
+            [styles.vertical]: isVerticalAlign,
+            [styles.interactive]: interactive,
+        }), onClick: handleButtonClick, onKeyDown: handleKeyDown },
+        React.createElement("div", { className: cn(styles.indicator, {
+                [styles.vertical]: isVerticalAlign,
+                [styles.interactive]: interactive,
+            }) },
+            React.createElement("div", { className: cn(styles.option, {
+                    [styles.unordered]: !ordered,
+                    [styles.vertical]: isVerticalAlign,
+                    [styles.error]: isError,
+                }) }, getStepContent()),
+            isNotLastStep && isVerticalAlign && renderDash()),
+        React.createElement("div", { className: cn(styles.text, {
+                [styles.interactive]: interactive,
+            }), onClick: handleTextClick }, children),
+        isNotLastStep && !isVerticalAlign && renderDash()));
+};
+
+export { Step };

package/steps/modern/components/step/index.css

@@ -0,0 +1,154 @@
+/* hash: j46l8 */
+:root {
+    --color-light-border-link: #007aff;
+    --color-light-border-primary: #dbdee1;
+    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-quaternary: #dbdee1;
+    --color-light-text-primary: #0b1f35;
+    --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+}
+:root {
+    --focus-color: var(--color-light-border-link);
+}
+:root {
+    --steps-option-svg-color: var(--color-light-graphic-positive);
+    --steps-dash-border: 2px solid var(--color-light-graphic-positive);
+}
+.steps__step_xd38j {
+    display: flex;
+    outline: none
+}
+.steps__step_xd38j:not(.steps__vertical_xd38j) {
+        align-items: center;
+    }
+.steps__step_xd38j.steps__interactive_xd38j:not(.steps__disabled_xd38j):hover {
+    cursor: pointer;
+}
+.steps__step_xd38j.steps__disabled_xd38j:hover .steps__text_xd38j {
+        background: unset;
+    }
+.steps__step_xd38j.steps__disabled_xd38j .steps__indicator_xd38j {
+        cursor: unset;
+    }
+.steps__indicator_xd38j {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-right: var(--gap-2xs)
+}
+.steps__indicator_xd38j.steps__vertical_xd38j {
+        flex-direction: column;
+        margin-right: var(--gap-xs);
+    }
+.steps__option_xd38j {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-graphic-primary);
+    background: var(--color-light-graphic-quaternary);
+    min-width: 24px;
+    height: 24px;
+    border-radius: 50%
+}
+.steps__option_xd38j.steps__vertical_xd38j {
+        margin-top: var(--gap-xs);
+    }
+.steps__dash_xd38j {
+    flex: 1 1 auto;
+    min-width: 24px;
+    border-top: 2px solid var(--color-light-border-primary);
+    margin-right: var(--gap-xs)
+}
+.steps__dash_xd38j.steps__completed_xd38j {
+        border-top: var(--steps-dash-border);
+    }
+.steps__dash_xd38j.steps__vertical_xd38j {
+        min-width: unset;
+        min-height: 24px;
+        margin-right: 0;
+        margin-top: var(--gap-xs);
+        border-left: 2px solid var(--color-light-border-primary);
+        border-top: none;
+    }
+.steps__dash_xd38j.steps__completed_xd38j.steps__vertical_xd38j {
+        border-left: var(--steps-dash-border);
+    }
+.steps__text_xd38j {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    transition: background 0.2s;
+    padding: var(--gap-xs);
+    color: var(--color-light-text-primary);
+    border-radius: var(--gap-xs);
+    height: min-content
+}
+.steps__text_xd38j.steps__interactive_xd38j:not(.steps__disabled_xd38j):hover {
+            background: var(--color-light-bg-primary-inverted-alpha-7);
+        }
+.steps__text_xd38j.steps__interactive_xd38j:not(.steps__disabled_xd38j):active {
+            background: var(--color-light-bg-primary-inverted-alpha-15);
+        }
+.steps__focused_xd38j {
+    outline: var(--gap-3xs) solid var(--focus-color);
+    outline-offset: var(--gap-3xs);
+}
+.steps__selected_xd38j .steps__text_xd38j {
+        color: var(--color-light-graphic-primary);
+    }
+.steps__selected_xd38j .steps__option_xd38j {
+        color: var(--color-light-graphic-primary-inverted);
+        background: var(--color-light-graphic-primary);
+    }
+.steps__checkbox_xd38j {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-light-graphic-quaternary);
+}
+.steps__dot_xd38j {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-light-graphic-quaternary);
+}
+.steps__selected_xd38j .steps__checkbox_xd38j {
+    border: 2px solid var(--color-light-graphic-primary)
+}
+.steps__selected_xd38j .steps__checkbox_xd38j .steps__dot_xd38j {
+        background: var(--color-light-graphic-primary);
+    }
+.steps__option_xd38j:not(.steps__error_xd38j).steps__unordered_xd38j {
+    background: unset;
+}
+.steps__badge_xd38j {
+    padding: 0
+}
+.steps__badge_xd38j > [class*='positive'] {
+        color: var(--steps-option-svg-color);
+        background-color: var(--steps-option-svg-color);
+    }

package/steps/modern/components/step/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/steps/modern/components/step/index.js

@@ -0,0 +1,7 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import '../../../../badge/modern';
+export { Step } from './Component.js';

package/steps/modern/index.css

@@ -0,0 +1,18 @@
+/* hash: hx0e0 */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.steps__component_jlvbf {
+    display: flex;
+    align-items: center;
+    flex-direction: row
+}
+.steps__component_jlvbf.steps__vertical_jlvbf {
+        flex-direction: column;
+        align-items: flex-start;
+    }

package/steps/modern/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/steps/modern/index.js

@@ -0,0 +1,8 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import '../../badge/modern';
+import './components/step/Component.js';
+export { Steps } from './Component.js';

package/switch/Component.js

@@ -50,7 +50,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"switch__component_zjnt1","start":"switch__start_zjnt1","center":"switch__center_zjnt1","addons":"switch__addons_zjnt1","block":"switch__block_zjnt1","switch":"switch__switch_zjnt1","content":"switch__content_zjnt1","label":"switch__label_zjnt1","hint":"switch__hint_zjnt1","reversed":"switch__reversed_zjnt1","checked":"switch__checked_zjnt1","disabled":"switch__disabled_zjnt1","inactive":"switch__inactive_zjnt1","focused":"switch__focused_zjnt1"};
+var styles = {"component":"switch__component_16ljq","start":"switch__start_16ljq","center":"switch__center_16ljq","addons":"switch__addons_16ljq","block":"switch__block_16ljq","switch":"switch__switch_16ljq","content":"switch__content_16ljq","label":"switch__label_16ljq","hint":"switch__hint_16ljq","reversed":"switch__reversed_16ljq","checked":"switch__checked_16ljq","disabled":"switch__disabled_16ljq","inactive":"switch__inactive_16ljq","focused":"switch__focused_16ljq"};
 require('./index.css');
 
 var Switch = React.forwardRef(function (_a, ref) {