@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ea6161656e

package/components/Toggle/Toggle.d.ts

@@ -1,48 +1,130 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-export interface ToggleProps {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-    onChange?: (value: boolean) => void;
-    changeEventHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    warning?: boolean;
-    error?: boolean;
-    loading?: boolean;
-    autoFocus?: boolean;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    color?: React.CSSProperties['color'];
-}
-export interface ToggleState {
-    checked?: boolean;
-    focusByTab?: boolean;
-}
-export default class Toggle extends React.Component<ToggleProps, ToggleState> {
-    static propTypes: {
-        checked: PropTypes.Requireable<boolean>;
-        defaultChecked: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        error: PropTypes.Requireable<boolean>;
-        loading: PropTypes.Requireable<boolean>;
-        warning: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        disabled: boolean;
-        loading: boolean;
-    };
-    private input;
-    constructor(props: ToggleProps);
-    componentDidMount(): void;
-    /**
-     * @public
-     */
-    focus: () => void;
-    render(): JSX.Element;
-    private inputRef;
-    private handleChange;
-    private handleFocus;
-    private handleBlur;
-    private isUncontrolled;
-}
+import React, { AriaAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type ToggleSize = SizeProp;
+export interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {
+    children?: React.ReactNode;
+    /**
+     * Положение `children` относительно переключателя.
+     * @default 'right'
+     */
+    captionPosition?: 'left' | 'right';
+    /**
+     * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Делает `тогл` включенным по умолчанию.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Отключает `тогл`.
+     */
+    disabled?: boolean;
+    /**
+     * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * Событие вызывающееся при клике на `тогл`.
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Состояние валидации при предупреждении.
+     * @default false
+     */
+    warning?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Добавляет стили для состояния `loading` и отключает `тогл`.
+     */
+    loading?: boolean;
+    /**
+     * Если true, выставляет фокус на `тогле` после загрузки страницы.
+     */
+    autoFocus?: boolean;
+    /** Размер */
+    size?: SizeProp;
+    /**
+     * Событие вызывающееся, когда `тогл` получает фокус.
+     */
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Событие вызывающееся, когда `тогл` теряет фокус.
+     */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.
+     */
+    color?: React.CSSProperties['color'];
+    /**
+     * HTML-атрибут `id` для передачи во внутренний `<input />`.
+     */
+    id?: string;
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
+}
+export interface ToggleState {
+    checked?: boolean;
+    focusByTab?: boolean;
+}
+export declare const ToggleDataTids: {
+    readonly root: "Toggle__root";
+};
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>>;
+/**
+ * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+ */
+export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static propTypes: {
+        checked: PropTypes.Requireable<boolean>;
+        defaultChecked: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        warning: PropTypes.Requireable<boolean>;
+        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        color: (props: ToggleProps) => void;
+    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    private theme;
+    private emotion;
+    private input;
+    private setRootNode;
+    constructor(props: ToggleProps);
+    componentDidMount(): void;
+    /**
+     * @public
+     */
+    focus: () => void;
+    render(): JSX.Element;
+    private getContainerSizeClassName;
+    private getHandleSizeClassName;
+    private getButtonSizeClassName;
+    private getRootSizeClassName;
+    private getInputSizeClassName;
+    private getActiveHandleSizeClassName;
+    private getCaptionSizeClassName;
+    private renderMain;
+    private inputRef;
+    private handleChange;
+    private handleFocus;
+    private resetFocus;
+    private handleBlur;
+    private isUncontrolled;
+}
+export {};

package/components/Toggle/Toggle.md

@@ -0,0 +1,110 @@
+Базовый пример тогла.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Toggle checked={checked} onValueChange={setChecked}>
+  {checked ? 'On' : 'Off'}
+</Toggle>
+```
+
+Пример тогла включенного по умолчанию.
+
+```jsx harmony
+<Toggle defaultChecked>
+  Включен по умолчанию
+</Toggle>
+```
+
+Тогл с надписью слева от переключателя.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Toggle checked={checked} onValueChange={setChecked} captionPosition="left">
+  Показывать уведомления
+</Toggle>
+```
+
+Тогл с внешним `<label/>`.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+<Gapped>
+  <Toggle id="toggle-1" checked={checked} onValueChange={setChecked}/>
+  <label htmlFor="toggle-1">Внешний label</label>
+</Gapped>
+```
+
+Тогл получающий фокус после загрузки страницы.
+
+```jsx harmony
+<Toggle autoFocus>
+  Сразу с фокусом
+</Toggle>
+```
+
+Тоглы в различных стилях.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap="20px">
+  <Toggle warning>
+    Warning
+  </Toggle>
+  <Toggle error>
+    Error
+  </Toggle>
+  <Toggle loading>
+    Loading
+  </Toggle>
+  <Toggle disabled>
+    Disabled
+  </Toggle>
+</Gapped>
+```
+
+У тоглов есть 3 стандартных размера.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <Toggle size="small">
+    Маленький
+  </Toggle>
+  <Toggle size="medium">
+    Средний
+  </Toggle>
+  <Toggle size="large">
+    Большой
+  </Toggle>
+</Gapped>
+```
+
+Тогл с кастомным действием при получении и потере фокуса.
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle
+  onFocus={() => Toast.push('Я получил фокус!')}
+  onBlur={() => Toast.push('И потерял его...')}
+  >
+  С кастомными действиями при фокусе и его потере
+</Toggle>
+```
+
+Тогл с кастомным действием при переключении.
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle onChange={() => Toast.push("Запускаю кастомное действие")}>
+  Кастомное действие при переключении
+</Toggle>
+```

package/components/Toggle/Toggle.mixins/Toggle.mixins.js

@@ -0,0 +1,48 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import { isChrome } from "../../../lib/client";
+import { globalClasses } from "../Toggle.styles";
+export var toggleSizeMixin = function toggleSizeMixin(emotion) {
+  return function (fontSize, toggleHeight, toggleWidth) {
+    return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n\n    &::before {\n      width: ", ";\n    }\n  "])), toggleHeight, fontSize, toggleWidth);
+  };
+};
+export var buttonSizeMixin = function buttonSizeMixin(emotion) {
+  return function (labGrotesqueBaselineCompensation, fontSize, toggleHeight, toggleWidth, toggleBorderRadius, toggleButtonOffsetY) {
+    var labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);
+    var buttonFontSize = parseInt(fontSize);
+    var baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;
+    return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    width: ", ";\n    flex: 1 0 ", ";\n\n    border-radius: ", ";\n    line-height: ", ";\n\n    margin-top: calc(", " + ", "px);\n  "])), toggleHeight, toggleWidth, toggleWidth, toggleBorderRadius, toggleHeight, toggleButtonOffsetY, baselineCompensation);
+  };
+};
+export var captionSizeMixin = function captionSizeMixin(emotion) {
+  return function (fontSize, toggleHeight) {
+    return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n  "])), toggleHeight, fontSize);
+  };
+};
+export var handleMixin = function handleMixin(emotion) {
+  return function (toggleHandleSize, toggleHandleBorderRadius) {
+    return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "])), toggleHandleBorderRadius, toggleHandleSize, toggleHandleSize);
+  };
+};
+export var containerSizeMixin = function containerSizeMixin(emotion) {
+  return function (toggleBorderRadius) {
+    return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n  "])), toggleBorderRadius);
+  };
+};
+export var inputSizeMixin = function inputSizeMixin(emotion) {
+  return function (toggleHeight, toggleWidth) {
+    var handleWidthWithBorders = toggleHeight;
+    var height = parseInt(toggleHeight);
+    return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    &:checked ~ .", " .", " {\n      border-radius: ", "px 0 0 ", "px;\n    }\n    &:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ");\n    }\n  "])), globalClasses.containerDisabled, globalClasses.background, height * 0.5, height * 0.5, globalClasses.handle, toggleWidth, handleWidthWithBorders);
+  };
+};
+export var activeHandleSizeMixin = function activeHandleSizeMixin(emotion) {
+  return function (toggleHandleSize, toggleBorderWidth, toggleHandleActiveWidthIncrement, toggleWidth) {
+    var handleWidthWithBorders = toggleHandleSize;
+    var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + toggleBorderWidth + " + " + toggleHandleActiveWidthIncrement + ")";
+    return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    &:active:not(.", ") .", " {\n      width: ", ";\n    }\n    &:active:not(.", ") input:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ") translateX(-4px);\n    }\n  "])), globalClasses.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, toggleWidth, handleWidthWithBorders);
+  };
+};

package/components/Toggle/Toggle.mixins/Toggle.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Toggle.mixins.ts"],"names":["isChrome","globalClasses","toggleSizeMixin","emotion","fontSize","toggleHeight","toggleWidth","css","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","captionSizeMixin","handleMixin","toggleHandleSize","toggleHandleBorderRadius","containerSizeMixin","inputSizeMixin","handleWidthWithBorders","height","containerDisabled","background","handle","activeHandleSizeMixin","toggleBorderWidth","toggleHandleActiveWidthIncrement","handleActiveWidth","disabled"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { isChrome } from '../../lib/client';\n\nimport { globalClasses } from './Toggle.styles';\n\nexport const toggleSizeMixin = (emotion: Emotion) => (fontSize: string, toggleHeight: string, toggleWidth: string) => {\n  return emotion.css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n\n    &::before {\n      width: ${toggleWidth};\n    }\n  `;\n};\n\nexport const buttonSizeMixin =\n  (emotion: Emotion) =>\n  (\n    labGrotesqueBaselineCompensation: string,\n    fontSize: string,\n    toggleHeight: string,\n    toggleWidth: string,\n    toggleBorderRadius: string,\n    toggleButtonOffsetY: string,\n  ) => {\n    const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n    const buttonFontSize = parseInt(fontSize);\n    const baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n    return emotion.css`\n    height: ${toggleHeight};\n    width: ${toggleWidth};\n    flex: 1 0 ${toggleWidth};\n\n    border-radius: ${toggleBorderRadius};\n    line-height: ${toggleHeight};\n\n    margin-top: calc(${toggleButtonOffsetY} + ${baselineCompensation}px);\n  `;\n  };\n\nexport const captionSizeMixin = (emotion: Emotion) => (fontSize: string, toggleHeight: string) => {\n  return emotion.css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n  `;\n};\n\nexport const handleMixin = (emotion: Emotion) => (toggleHandleSize: string, toggleHandleBorderRadius: string) => {\n  return emotion.css`\n    border-radius: ${toggleHandleBorderRadius};\n    height: ${toggleHandleSize};\n    width: ${toggleHandleSize};\n  `;\n};\n\nexport const containerSizeMixin = (emotion: Emotion) => (toggleBorderRadius: string) => {\n  return emotion.css`\n    border-radius: ${toggleBorderRadius};\n  `;\n};\n\nexport const inputSizeMixin = (emotion: Emotion) => (toggleHeight: string, toggleWidth: string) => {\n  const handleWidthWithBorders = toggleHeight;\n  const height = parseInt(toggleHeight);\n  return emotion.css`\n    &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n      border-radius: ${height * 0.5}px 0 0 ${height * 0.5}px;\n    }\n    &:checked ~ .${globalClasses.handle} {\n      transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders});\n    }\n  `;\n};\n\nexport const activeHandleSizeMixin =\n  (emotion: Emotion) =>\n  (\n    toggleHandleSize: string,\n    toggleBorderWidth: string,\n    toggleHandleActiveWidthIncrement: string,\n    toggleWidth: string,\n  ) => {\n    const handleWidthWithBorders = toggleHandleSize;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${toggleBorderWidth} + ${toggleHandleActiveWidthIncrement})`;\n    return emotion.css`\n    &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n      width: ${handleActiveWidth};\n    }\n    &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n      transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders}) translateX(-4px);\n    }\n  `;\n  };\n"]}

package/components/Toggle/Toggle.mixins/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Toggle/Toggle.mixins.js",
+  "module": "Toggle.mixins",
+  "types": "../Toggle.mixins.d.ts",
+  "sideEffects": false
+}

package/components/Toggle/Toggle.mixins.d.ts

@@ -0,0 +1,8 @@
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const toggleSizeMixin: (emotion: Emotion) => (fontSize: string, toggleHeight: string, toggleWidth: string) => string;
+export declare const buttonSizeMixin: (emotion: Emotion) => (labGrotesqueBaselineCompensation: string, fontSize: string, toggleHeight: string, toggleWidth: string, toggleBorderRadius: string, toggleButtonOffsetY: string) => string;
+export declare const captionSizeMixin: (emotion: Emotion) => (fontSize: string, toggleHeight: string) => string;
+export declare const handleMixin: (emotion: Emotion) => (toggleHandleSize: string, toggleHandleBorderRadius: string) => string;
+export declare const containerSizeMixin: (emotion: Emotion) => (toggleBorderRadius: string) => string;
+export declare const inputSizeMixin: (emotion: Emotion) => (toggleHeight: string, toggleWidth: string) => string;
+export declare const activeHandleSizeMixin: (emotion: Emotion) => (toggleHandleSize: string, toggleBorderWidth: string, toggleHandleActiveWidthIncrement: string, toggleWidth: string) => string;

package/components/Toggle/Toggle.styles/Toggle.styles.js

@@ -0,0 +1,144 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42;
+
+import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { activeHandleSizeMixin, buttonSizeMixin, captionSizeMixin, containerSizeMixin, handleMixin, inputSizeMixin, toggleSizeMixin } from "../Toggle.mixins";
+export var globalClasses = prefix('toggle')({
+  handle: 'handle',
+  container: 'container',
+  disabled: 'disabled',
+  containerDisabled: 'container-disabled',
+  containerLoading: 'container-loading',
+  background: 'background'
+});
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        cursor: pointer;\n        align-items: baseline;\n        position: relative;\n\n        &::before {\n          // non-breaking space.\n          // makes a correct space for absolutely positioned button,\n          // and also height and baseline for toggle without caption.\n          content: '\\00A0';\n          display: inline-block;\n          flex: 0 0 auto;\n        }\n\n        &:hover .", " {\n          background: ", ";\n        }\n      "], ["\n        display: inline-flex;\n        cursor: pointer;\n        align-items: baseline;\n        position: relative;\n\n        &::before {\n          // non-breaking space.\n          // makes a correct space for absolutely positioned button,\n          // and also height and baseline for toggle without caption.\n          content: '\\\\00A0';\n          display: inline-block;\n          flex: 0 0 auto;\n        }\n\n        &:hover .", " {\n          background: ", ";\n        }\n      "])), globalClasses.handle, t.toggleBgHover);
+    },
+    rootSmall: function rootSmall(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), toggleSizeMixin(emotion)(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall));
+    },
+    rootMedium: function rootMedium(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), toggleSizeMixin(emotion)(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium));
+    },
+    rootLarge: function rootLarge(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), toggleSizeMixin(emotion)(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge));
+    },
+    activeHandleSmall: function activeHandleSmall(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), activeHandleSizeMixin(emotion)(t.toggleHandleSizeSmall, t.toggleBorderWidth, t.toggleHandleActiveWidthIncrement, t.toggleWidthSmall));
+    },
+    activeHandleMedium: function activeHandleMedium(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), activeHandleSizeMixin(emotion)(t.toggleHandleSizeMedium, t.toggleBorderWidth, t.toggleHandleActiveWidthIncrement, t.toggleWidthMedium));
+    },
+    activeHandleLarge: function activeHandleLarge(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), activeHandleSizeMixin(emotion)(t.toggleHandleSizeLarge, t.toggleBorderWidth, t.toggleHandleActiveWidthIncrement, t.toggleWidthLarge));
+    },
+    disableAnimation: function disableAnimation() {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        &,\n        * {\n          transition: none !important;\n        }\n      "])));
+    },
+    handle: function handle(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        bottom: ", ";\n        box-shadow: ", ";\n        left: ", ";\n        position: absolute;\n        top: ", ";\n        transition: 0.2s ease-in;\n      "])), t.toggleHandleBg, t.toggleBorderWidth, t.toggleHandleBoxShadowOld, t.toggleHandleLeft, t.toggleHandleTop);
+    },
+    handleSmall: function handleSmall(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), handleMixin(emotion)(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall));
+    },
+    handleMedium: function handleMedium(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), handleMixin(emotion)(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium));
+    },
+    handleLarge: function handleLarge(t) {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), handleMixin(emotion)(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge));
+    },
+    handleDisabled: function handleDisabled(t) {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        background: ", " !important; // override root hover/active styles\n      "])), t.toggleDisabledHandleBg);
+    },
+    input: function input(t) {
+      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        position: absolute;\n        opacity: 0;\n\n        &:focus {\n          outline: none;\n        }\n        &:checked ~ .", " {\n          box-shadow: inset 0 0 0 ", " ", ";\n          background: ", ";\n          transition: background 0s 0.2s;\n        }\n        &:checked ~ .", " {\n          box-shadow: inset 0 0 0 ", " ", ";\n          background: ", ";\n          transition: background 0s 0.2s;\n        }\n        &:checked ~ .", " {\n          background: ", ";\n          box-shadow: inset 0 0 0 ", " ", ";\n        }\n        &:checked ~ .", " .", " {\n          width: 70%;\n          background: ", ";\n        }\n        &:checked ~ .", " .", " {\n          width: 70%;\n          background: ", ";\n          box-shadow: inset 0 0 0 1px ", ";\n        }\n        &:checked ~ .", " {\n          background: ", ";\n          &:hover {\n            background: ", ";\n          }\n        }\n      "])), globalClasses.container, t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, globalClasses.containerDisabled, t.toggleBorderWidth, t.toggleBorderColorDisabledChecked, t.toggleBgDisabledChecked, globalClasses.containerLoading, t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, globalClasses.container, globalClasses.background, t.toggleBgChecked, globalClasses.containerDisabled, globalClasses.background, t.toggleBgDisabledChecked, t.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleCheckedBg, t.toggleCheckedBgHover);
+    },
+    inputSmall: function inputSmall(t) {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(emotion)(t.toggleHeightSmall, t.toggleWidthSmall));
+    },
+    inputMedium: function inputMedium(t) {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(emotion)(t.toggleHeightMedium, t.toggleWidthMedium));
+    },
+    inputLarge: function inputLarge(t) {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(emotion)(t.toggleHeightLarge, t.toggleWidthLarge));
+    },
+    input2022: function input2022(t) {
+      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        &:enabled {\n          ~ .", ", ~ .", " {\n            transition: 0.2s ease-in;\n          }\n          :not(:checked) {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n          }\n          :checked {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n          }\n        }\n        &:enabled:hover {\n          :not(:checked) {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n          }\n          :checked {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n          }\n        }\n        &:disabled {\n          :not(:checked) {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", " !important;\n              box-shadow: ", ";\n            }\n          }\n          :checked {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", " !important;\n              box-shadow: ", ";\n            }\n          }\n        }\n      "])), globalClasses.container, globalClasses.handle, globalClasses.container, t.toggleContainerBg, t.toggleContainerBoxShadow, globalClasses.handle, t.toggleHandleBg, t.toggleHandleBoxShadow, globalClasses.container, t.toggleContainerBgChecked, t.toggleContainerBoxShadowChecked, globalClasses.handle, t.toggleHandleBgChecked, t.toggleHandleBoxShadowChecked, globalClasses.container, t.toggleContainerBgHover, t.toggleContainerBoxShadowHover, globalClasses.handle, t.toggleHandleBgHover, t.toggleHandleBoxShadowHover, globalClasses.container, t.toggleContainerBgCheckedHover, t.toggleContainerBoxShadowCheckedHover, globalClasses.handle, t.toggleHandleBgCheckedHover, t.toggleHandleBoxShadowCheckedHover, globalClasses.container, t.toggleContainerBgDisabled, t.toggleContainerBoxShadowDisabled, globalClasses.handle, t.toggleHandleBgDisabled, t.toggleHandleBoxShadowDisabled, globalClasses.container, t.toggleContainerBgDisabledChecked, t.toggleContainerBoxShadowDisabledChecked, globalClasses.handle, t.toggleHandleBgDisabledChecked, t.toggleHandleBoxShadowDisabledChecked);
+    },
+    container: function container(t) {
+      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        box-shadow: inset 0 0 0 ", " ", ";\n        height: 100%;\n        overflow: hidden;\n        position: absolute;\n        width: 100%;\n        /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n        z-index: 0;\n      "])), t.toggleBorderWidth, t.toggleBorderColor);
+    },
+    containerSmall: function containerSmall(t) {
+      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), containerSizeMixin(emotion)(t.toggleBorderRadiusSmall));
+    },
+    containerMedium: function containerMedium(t) {
+      return emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), containerSizeMixin(emotion)(t.toggleBorderRadiusMedium));
+    },
+    containerLarge: function containerLarge(t) {
+      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), containerSizeMixin(emotion)(t.toggleBorderRadiusLarge));
+    },
+    containerDisabled: function containerDisabled(t) {
+      return emotion.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        box-shadow: inset 0 0 0 1px ", ";\n      "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
+    },
+    focused: function focused(t) {
+      return emotion.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n      "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+    },
+    activeBackground: function activeBackground() {
+      return emotion.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n        background: inherit;\n        bottom: 0;\n        left: 0;\n        position: absolute;\n        top: 0;\n        transition: 0.2s ease-in;\n        width: 10px;\n      "])));
+    },
+    disabledBackground: function disabledBackground(t) {
+      return emotion.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n        box-shadow: inset 0 0 0 1px ", ";\n        width: 0;\n      "])), t.toggleBorderColorDisabled);
+    },
+    activeBackgroundLoading: function activeBackgroundLoading(t) {
+      return emotion.css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.toggleBgActive);
+    },
+    isWarning: function isWarning(t) {
+      return emotion.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n      "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+    },
+    isError: function isError(t) {
+      return emotion.css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n      "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+    },
+    button: function button(t) {
+      return emotion.css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n        position: absolute;\n        left: 0;\n        top: 0;\n        background: ", ";\n        line-height: ", ";\n      "])), t.toggleBaseBg, t.toggleHeight);
+    },
+    buttonSmall: function buttonSmall(t) {
+      return emotion.css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), buttonSizeMixin(emotion)(t.labGrotesqueBaselineCompensation, t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall, t.toggleBorderRadiusSmall, t.toggleButtonOffsetY));
+    },
+    buttonMedium: function buttonMedium(t) {
+      return emotion.css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), buttonSizeMixin(emotion)(t.labGrotesqueBaselineCompensation, t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium, t.toggleBorderRadiusMedium, t.toggleButtonOffsetY));
+    },
+    buttonLarge: function buttonLarge(t) {
+      return emotion.css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), buttonSizeMixin(emotion)(t.labGrotesqueBaselineCompensation, t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge, t.toggleBorderRadiusLarge, t.toggleButtonOffsetY));
+    },
+    buttonRight: function buttonRight() {
+      return emotion.css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n        right: 0;\n        left: auto;\n      "])));
+    },
+    disabled: function disabled() {
+      return emotion.css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n      "])));
+    },
+    rootLeft: function rootLeft() {
+      return emotion.css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n        flex-direction: row-reverse;\n      "])));
+    },
+    caption: function caption(t) {
+      return emotion.css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        padding: 0 0 0 ", ";\n      "])), t.toggleTextColor, t.toggleCaptionGap);
+    },
+    captionSmall: function captionSmall(t) {
+      return emotion.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), captionSizeMixin(emotion)(t.toggleFontSizeSmall, t.toggleHeightSmall));
+    },
+    captionMedium: function captionMedium(t) {
+      return emotion.css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), captionSizeMixin(emotion)(t.toggleFontSizeMedium, t.toggleHeightMedium));
+    },
+    captionLarge: function captionLarge(t) {
+      return emotion.css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), captionSizeMixin(emotion)(t.toggleFontSizeLarge, t.toggleHeightLarge));
+    },
+    disabledCaption: function disabledCaption(t) {
+      return emotion.css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.textColorDisabled);
+    },
+    captionLeft: function captionLeft(t) {
+      return emotion.css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        padding: 0 ", " 0 0;\n      "])), t.toggleTextColor, t.toggleCaptionGap);
+    }
+  });
+};

package/components/Toggle/Toggle.styles/Toggle.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Toggle.styles.ts"],"names":["memoizeStyle","prefix","activeHandleSizeMixin","buttonSizeMixin","captionSizeMixin","containerSizeMixin","handleMixin","inputSizeMixin","toggleSizeMixin","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","getStyles","emotion","root","t","css","toggleBgHover","rootSmall","toggleFontSizeSmall","toggleHeightSmall","toggleWidthSmall","rootMedium","toggleFontSizeMedium","toggleHeightMedium","toggleWidthMedium","rootLarge","toggleFontSizeLarge","toggleHeightLarge","toggleWidthLarge","activeHandleSmall","toggleHandleSizeSmall","toggleBorderWidth","toggleHandleActiveWidthIncrement","activeHandleMedium","toggleHandleSizeMedium","activeHandleLarge","toggleHandleSizeLarge","disableAnimation","toggleHandleBg","toggleHandleBoxShadowOld","toggleHandleLeft","toggleHandleTop","handleSmall","toggleHandleBorderRadiusSmall","handleMedium","toggleHandleBorderRadiusMedium","handleLarge","toggleHandleBorderRadiusLarge","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","inputSmall","inputMedium","inputLarge","input2022","toggleContainerBg","toggleContainerBoxShadow","toggleHandleBoxShadow","toggleContainerBgChecked","toggleContainerBoxShadowChecked","toggleHandleBgChecked","toggleHandleBoxShadowChecked","toggleContainerBgHover","toggleContainerBoxShadowHover","toggleHandleBgHover","toggleHandleBoxShadowHover","toggleContainerBgCheckedHover","toggleContainerBoxShadowCheckedHover","toggleHandleBgCheckedHover","toggleHandleBoxShadowCheckedHover","toggleContainerBgDisabled","toggleContainerBoxShadowDisabled","toggleHandleBgDisabled","toggleHandleBoxShadowDisabled","toggleContainerBgDisabledChecked","toggleContainerBoxShadowDisabledChecked","toggleHandleBgDisabledChecked","toggleHandleBoxShadowDisabledChecked","containerSmall","toggleBorderRadiusSmall","containerMedium","toggleBorderRadiusMedium","containerLarge","toggleBorderRadiusLarge","toggleBgDisabled","toggleBorderColorDisabled","focused","toggleOutlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","toggleBaseBg","toggleHeight","buttonSmall","labGrotesqueBaselineCompensation","toggleButtonOffsetY","buttonMedium","buttonLarge","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","captionSmall","captionMedium","captionLarge","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport {\n  activeHandleSizeMixin,\n  buttonSizeMixin,\n  captionSizeMixin,\n  containerSizeMixin,\n  handleMixin,\n  inputSizeMixin,\n  toggleSizeMixin,\n} from './Toggle.mixins';\n\nexport const globalClasses = prefix('toggle')({\n  handle: 'handle',\n  container: 'container',\n  disabled: 'disabled',\n  containerDisabled: 'container-disabled',\n  containerLoading: 'container-loading',\n  background: 'background',\n});\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        display: inline-flex;\n        cursor: pointer;\n        align-items: baseline;\n        position: relative;\n\n        &::before {\n          // non-breaking space.\n          // makes a correct space for absolutely positioned button,\n          // and also height and baseline for toggle without caption.\n          content: '\\\\00A0';\n          display: inline-block;\n          flex: 0 0 auto;\n        }\n\n        &:hover .${globalClasses.handle} {\n          background: ${t.toggleBgHover};\n        }\n      `;\n    },\n    rootSmall(t: Theme) {\n      return emotion.css`\n        ${toggleSizeMixin(emotion)(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall)};\n      `;\n    },\n    rootMedium(t: Theme) {\n      return emotion.css`\n        ${toggleSizeMixin(emotion)(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium)};\n      `;\n    },\n    rootLarge(t: Theme) {\n      return emotion.css`\n        ${toggleSizeMixin(emotion)(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge)};\n      `;\n    },\n\n    activeHandleSmall(t: Theme) {\n      return emotion.css`\n        ${activeHandleSizeMixin(emotion)(\n          t.toggleHandleSizeSmall,\n          t.toggleBorderWidth,\n          t.toggleHandleActiveWidthIncrement,\n          t.toggleWidthSmall,\n        )};\n      `;\n    },\n    activeHandleMedium(t: Theme) {\n      return emotion.css`\n        ${activeHandleSizeMixin(emotion)(\n          t.toggleHandleSizeMedium,\n          t.toggleBorderWidth,\n          t.toggleHandleActiveWidthIncrement,\n          t.toggleWidthMedium,\n        )};\n      `;\n    },\n    activeHandleLarge(t: Theme) {\n      return emotion.css`\n        ${activeHandleSizeMixin(emotion)(\n          t.toggleHandleSizeLarge,\n          t.toggleBorderWidth,\n          t.toggleHandleActiveWidthIncrement,\n          t.toggleWidthLarge,\n        )};\n      `;\n    },\n\n    disableAnimation() {\n      return emotion.css`\n        &,\n        * {\n          transition: none !important;\n        }\n      `;\n    },\n\n    handle(t: Theme) {\n      return emotion.css`\n        background: ${t.toggleHandleBg};\n        bottom: ${t.toggleBorderWidth};\n        box-shadow: ${t.toggleHandleBoxShadowOld};\n        left: ${t.toggleHandleLeft};\n        position: absolute;\n        top: ${t.toggleHandleTop};\n        transition: 0.2s ease-in;\n      `;\n    },\n    handleSmall(t: Theme) {\n      return emotion.css`\n        ${handleMixin(emotion)(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall)};\n      `;\n    },\n    handleMedium(t: Theme) {\n      return emotion.css`\n        ${handleMixin(emotion)(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium)};\n      `;\n    },\n    handleLarge(t: Theme) {\n      return emotion.css`\n        ${handleMixin(emotion)(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge)};\n      `;\n    },\n\n    handleDisabled(t: Theme) {\n      return emotion.css`\n        background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n      `;\n    },\n\n    input(t: Theme) {\n      return emotion.css`\n        position: absolute;\n        opacity: 0;\n\n        &:focus {\n          outline: none;\n        }\n        &:checked ~ .${globalClasses.container} {\n          box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n          background: ${t.toggleBgChecked};\n          transition: background 0s 0.2s;\n        }\n        &:checked ~ .${globalClasses.containerDisabled} {\n          box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n          background: ${t.toggleBgDisabledChecked};\n          transition: background 0s 0.2s;\n        }\n        &:checked ~ .${globalClasses.containerLoading} {\n          background: ${t.toggleBorderColor};\n          box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n        }\n        &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n          width: 70%;\n          background: ${t.toggleBgChecked};\n        }\n        &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n          width: 70%;\n          background: ${t.toggleBgDisabledChecked};\n          box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n        }\n        &:checked ~ .${globalClasses.handle} {\n          background: ${t.toggleCheckedBg};\n          &:hover {\n            background: ${t.toggleCheckedBgHover};\n          }\n        }\n      `;\n    },\n    inputSmall(t: Theme) {\n      return emotion.css`\n        ${inputSizeMixin(emotion)(t.toggleHeightSmall, t.toggleWidthSmall)};\n      `;\n    },\n    inputMedium(t: Theme) {\n      return emotion.css`\n        ${inputSizeMixin(emotion)(t.toggleHeightMedium, t.toggleWidthMedium)};\n      `;\n    },\n    inputLarge(t: Theme) {\n      return emotion.css`\n        ${inputSizeMixin(emotion)(t.toggleHeightLarge, t.toggleWidthLarge)};\n      `;\n    },\n\n    input2022(t: Theme) {\n      return emotion.css`\n        &:enabled {\n          ~ .${globalClasses.container}, ~ .${globalClasses.handle} {\n            transition: 0.2s ease-in;\n          }\n          :not(:checked) {\n            ~ .${globalClasses.container} {\n              background: ${t.toggleContainerBg};\n              box-shadow: ${t.toggleContainerBoxShadow};\n            }\n            ~ .${globalClasses.handle} {\n              background: ${t.toggleHandleBg};\n              box-shadow: ${t.toggleHandleBoxShadow};\n            }\n          }\n          :checked {\n            ~ .${globalClasses.container} {\n              background: ${t.toggleContainerBgChecked};\n              box-shadow: ${t.toggleContainerBoxShadowChecked};\n            }\n            ~ .${globalClasses.handle} {\n              background: ${t.toggleHandleBgChecked};\n              box-shadow: ${t.toggleHandleBoxShadowChecked};\n            }\n          }\n        }\n        &:enabled:hover {\n          :not(:checked) {\n            ~ .${globalClasses.container} {\n              background: ${t.toggleContainerBgHover};\n              box-shadow: ${t.toggleContainerBoxShadowHover};\n            }\n            ~ .${globalClasses.handle} {\n              background: ${t.toggleHandleBgHover};\n              box-shadow: ${t.toggleHandleBoxShadowHover};\n            }\n          }\n          :checked {\n            ~ .${globalClasses.container} {\n              background: ${t.toggleContainerBgCheckedHover};\n              box-shadow: ${t.toggleContainerBoxShadowCheckedHover};\n            }\n            ~ .${globalClasses.handle} {\n              background: ${t.toggleHandleBgCheckedHover};\n              box-shadow: ${t.toggleHandleBoxShadowCheckedHover};\n            }\n          }\n        }\n        &:disabled {\n          :not(:checked) {\n            ~ .${globalClasses.container} {\n              background: ${t.toggleContainerBgDisabled};\n              box-shadow: ${t.toggleContainerBoxShadowDisabled};\n            }\n            ~ .${globalClasses.handle} {\n              background: ${t.toggleHandleBgDisabled} !important;\n              box-shadow: ${t.toggleHandleBoxShadowDisabled};\n            }\n          }\n          :checked {\n            ~ .${globalClasses.container} {\n              background: ${t.toggleContainerBgDisabledChecked};\n              box-shadow: ${t.toggleContainerBoxShadowDisabledChecked};\n            }\n            ~ .${globalClasses.handle} {\n              background: ${t.toggleHandleBgDisabledChecked} !important;\n              box-shadow: ${t.toggleHandleBoxShadowDisabledChecked};\n            }\n          }\n        }\n      `;\n    },\n\n    container(t: Theme) {\n      return emotion.css`\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n        height: 100%;\n        overflow: hidden;\n        position: absolute;\n        width: 100%;\n        /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n        z-index: 0;\n      `;\n    },\n    containerSmall(t: Theme) {\n      return emotion.css`\n        ${containerSizeMixin(emotion)(t.toggleBorderRadiusSmall)};\n      `;\n    },\n    containerMedium(t: Theme) {\n      return emotion.css`\n        ${containerSizeMixin(emotion)(t.toggleBorderRadiusMedium)};\n      `;\n    },\n    containerLarge(t: Theme) {\n      return emotion.css`\n        ${containerSizeMixin(emotion)(t.toggleBorderRadiusLarge)};\n      `;\n    },\n\n    containerDisabled(t: Theme) {\n      return emotion.css`\n        background: ${t.toggleBgDisabled};\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n      `;\n    },\n\n    focused(t: Theme) {\n      return emotion.css`\n        box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n      `;\n    },\n\n    activeBackground() {\n      return emotion.css`\n        background: inherit;\n        bottom: 0;\n        left: 0;\n        position: absolute;\n        top: 0;\n        transition: 0.2s ease-in;\n        width: 10px;\n      `;\n    },\n\n    disabledBackground(t: Theme) {\n      return emotion.css`\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n        width: 0;\n      `;\n    },\n\n    activeBackgroundLoading(t: Theme) {\n      return emotion.css`\n        background: ${t.toggleBgActive};\n      `;\n    },\n\n    isWarning(t: Theme) {\n      return emotion.css`\n        box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n      `;\n    },\n\n    isError(t: Theme) {\n      return emotion.css`\n        box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n      `;\n    },\n\n    button(t: Theme) {\n      return emotion.css`\n        position: absolute;\n        left: 0;\n        top: 0;\n        background: ${t.toggleBaseBg};\n        line-height: ${t.toggleHeight};\n      `;\n    },\n    buttonSmall(t: Theme) {\n      return emotion.css`\n        ${buttonSizeMixin(emotion)(\n          t.labGrotesqueBaselineCompensation,\n          t.toggleFontSizeSmall,\n          t.toggleHeightSmall,\n          t.toggleWidthSmall,\n          t.toggleBorderRadiusSmall,\n          t.toggleButtonOffsetY,\n        )};\n      `;\n    },\n    buttonMedium(t: Theme) {\n      return emotion.css`\n        ${buttonSizeMixin(emotion)(\n          t.labGrotesqueBaselineCompensation,\n          t.toggleFontSizeMedium,\n          t.toggleHeightMedium,\n          t.toggleWidthMedium,\n          t.toggleBorderRadiusMedium,\n          t.toggleButtonOffsetY,\n        )};\n      `;\n    },\n    buttonLarge(t: Theme) {\n      return emotion.css`\n        ${buttonSizeMixin(emotion)(\n          t.labGrotesqueBaselineCompensation,\n          t.toggleFontSizeLarge,\n          t.toggleHeightLarge,\n          t.toggleWidthLarge,\n          t.toggleBorderRadiusLarge,\n          t.toggleButtonOffsetY,\n        )};\n      `;\n    },\n\n    buttonRight() {\n      return emotion.css`\n        right: 0;\n        left: auto;\n      `;\n    },\n\n    disabled() {\n      return emotion.css`\n        cursor: default;\n      `;\n    },\n\n    rootLeft() {\n      return emotion.css`\n        flex-direction: row-reverse;\n      `;\n    },\n\n    caption(t: Theme) {\n      return emotion.css`\n        color: ${t.toggleTextColor};\n        padding: 0 0 0 ${t.toggleCaptionGap};\n      `;\n    },\n    captionSmall(t: Theme) {\n      return emotion.css`\n        ${captionSizeMixin(emotion)(t.toggleFontSizeSmall, t.toggleHeightSmall)};\n      `;\n    },\n    captionMedium(t: Theme) {\n      return emotion.css`\n        ${captionSizeMixin(emotion)(t.toggleFontSizeMedium, t.toggleHeightMedium)};\n      `;\n    },\n    captionLarge(t: Theme) {\n      return emotion.css`\n        ${captionSizeMixin(emotion)(t.toggleFontSizeLarge, t.toggleHeightLarge)};\n      `;\n    },\n\n    disabledCaption(t: Theme) {\n      return emotion.css`\n        color: ${t.textColorDisabled};\n      `;\n    },\n\n    captionLeft(t: Theme) {\n      return emotion.css`\n        color: ${t.toggleTextColor};\n        padding: 0 ${t.toggleCaptionGap} 0 0;\n      `;\n    },\n  });\n"]}

package/components/Toggle/Toggle.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Toggle/Toggle.styles.js",
+  "module": "Toggle.styles",
+  "types": "../Toggle.styles.d.ts",
+  "sideEffects": false
+}