@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

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

@@ -1 +1 @@
-{"version":3,"names":["React","RenderEnvironmentContext","KeyListener","ThemeContext","CommonWrapper","rootNode","createPropsGetter","isTestEnv","FocusControlWrapper","getStyles","globalClasses","ToggleDataTids","root","Toggle","_class","_Toggle","_React$Component","props","_this","call","getProps","defaultProps","input","focus","keyListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","resetFocus","handleBlur","onBlur","state","defaultChecked","_inheritsLoose","_proto","prototype","componentDidMount","globalObject","autoFocus","render","_this2","createElement","Consumer","_ref","emotion","cx","styles","theme","renderMain","getContainerSizeClassName","size","containerLarge","containerMedium","containerSmall","getHandleSizeClassName","handleLarge","handleMedium","handleSmall","getButtonSizeClassName","buttonLarge","buttonMedium","buttonSmall","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getInputSizeClassName","inputLarge","inputMedium","inputSmall","getCaptionSizeClassName","captionLarge","captionMedium","captionSmall","_this$cx","_this$cx2","_this$cx4","_this$cx5","_this$props","children","warning","error","id","name","ariaDescribedby","ariaLabel","_this$getProps","loading","captionPosition","disableAnimations","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","_this$cx3","captionClass","captionLeft","disabledCaption","className","_extends","rootNodeRef","setRootNode","button","buttonRight","isWarning","isError","focused","onBlurWhenDisabled","type","ref","role","handle","handleDisabled","undefined","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport type { AriaAttributes, InputHTMLAttributes } from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport type { GlobalObject } from '../../lib/globalObject';\nimport { KeyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport type { SizeProp } from '../../lib/types/props';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper';\n\nimport { getStyles, globalClasses } from './Toggle.styles';\n\nexport interface ToggleProps\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n    Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'>,\n    CommonProps {\n  /** @ignore */\n  children?: React.ReactNode;\n\n  /** Задает положение `children` относительно переключателя.\n   * @default 'right' */\n  captionPosition?: 'left' | 'right';\n\n  /** Включает тогл.\n   * @default false */\n  checked?: boolean;\n\n  /** Делает `тогл` включенным по умолчанию. Не работает при заданном пропе `checked`. */\n  defaultChecked?: boolean;\n\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Задает функцию, вызывающуюся при изменении значения. */\n  onValueChange?: (value: boolean) => void;\n\n  /** Задает функцию, которая вызывается при клике на `тогл`. */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\".\n   * @default false */\n  warning?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\".\n   * @default false */\n  error?: boolean;\n\n  /** Переводит тогл в состояние загрузки: добавляет стили для состояния `loading` и отключает `тогл`.*/\n  loading?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\".\n   * @default false */\n  autoFocus?: boolean;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** Задает функцию, которая вызывается, когда `тогл` получает фокус.*/\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n\n  /** Задает функцию, которая вызывается, когда `тогл` теряет фокус. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n  root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>\n>;\n\n/**\n * `Toggle` переключает состояния. Например, включает или отключает уведомления в настройках.\n * `Toggle` представляет из себя надпись + переключатель.\n *\n * `Toggle` нельзя использовать для выбора элементов в списке. Например, выбрать несколько писем.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n  public static displayName = 'Toggle';\n\n  public static defaultProps: DefaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n    disableAnimations: isTestEnv,\n    size: 'small',\n  };\n\n  private getProps = createPropsGetter(Toggle.defaultProps);\n\n  private styles!: ReturnType<typeof getStyles>;\n  private cx!: Emotion['cx'];\n  private globalObject!: GlobalObject;\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private keyListener!: KeyListener;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    this.keyListener = new KeyListener(this.globalObject);\n    if (this.props.autoFocus) {\n      this.keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\n    return (\n      <RenderEnvironmentContext.Consumer>\n        {({ globalObject, emotion }) => {\n          this.globalObject = globalObject;\n          this.cx = emotion.cx;\n          this.styles = getStyles(emotion);\n\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </RenderEnvironmentContext.Consumer>\n    );\n  }\n\n  private getContainerSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return this.styles.containerLarge(this.theme);\n      case 'medium':\n        return this.styles.containerMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.containerSmall(this.theme);\n    }\n  }\n\n  private getHandleSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return this.styles.handleLarge(this.theme);\n      case 'medium':\n        return this.styles.handleMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.handleSmall(this.theme);\n    }\n  }\n\n  private getButtonSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return this.styles.buttonLarge(this.theme);\n      case 'medium':\n        return this.styles.buttonMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.buttonSmall(this.theme);\n    }\n  }\n\n  private getRootSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return this.styles.rootLarge(this.theme);\n      case 'medium':\n        return this.styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.rootSmall(this.theme);\n    }\n  }\n\n  private getInputSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return this.styles.inputLarge(this.theme);\n      case 'medium':\n        return this.styles.inputMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.inputSmall(this.theme);\n    }\n  }\n\n  private getCaptionSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return this.styles.captionLarge(this.theme);\n      case 'medium':\n        return this.styles.captionMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.captionSmall(this.theme);\n    }\n  }\n\n  private renderMain() {\n    const {\n      children,\n      warning,\n      error,\n      id,\n      name,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n    const { loading, captionPosition, disableAnimations } = this.getProps();\n    const disabled = this.getProps().disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = this.cx(this.getContainerSizeClassName(), {\n      [this.styles.container(this.theme)]: true,\n      [this.styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = this.cx(this.getRootSizeClassName(), {\n      [this.styles.root(this.theme)]: true,\n      [this.styles.rootLeft()]: captionPosition === 'left',\n      [this.styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n      [this.styles.disableAnimation()]: disableAnimations,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = this.cx(this.getCaptionSizeClassName(), {\n        [this.styles.caption(this.theme)]: true,\n        [this.styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [this.styles.disabledCaption(this.theme)]: !!disabled,\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n          <div\n            className={this.cx(this.getButtonSizeClassName(), {\n              [this.styles.button(this.theme)]: true,\n              [this.styles.buttonRight()]: captionPosition === 'left',\n              [this.styles.isWarning(this.theme)]: !!warning,\n              [this.styles.isError(this.theme)]: !!error,\n              [this.styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n              <input\n                type=\"checkbox\"\n                checked={checked}\n                onChange={this.handleChange}\n                className={this.cx(this.getInputSizeClassName(), this.styles.input(this.theme))}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                ref={this.inputRef}\n                disabled={disabled}\n                id={id}\n                name={name}\n                role=\"switch\"\n                aria-label={ariaLabel}\n                aria-describedby={ariaDescribedby}\n              />\n            </FocusControlWrapper>\n            <div className={containerClassNames} />\n            <div\n              className={this.cx(this.getHandleSizeClassName(), globalClasses.handle, {\n                [this.styles.handle(this.theme)]: true,\n                [this.styles.handleDisabled(this.theme)]: disabled,\n              })}\n            />\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (this.keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private resetFocus = () => this.setState({ focusByTab: false });\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    this.resetFocus();\n    this.props.onBlur?.(event);\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","keyListener","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","isTestEnv","FocusControlWrapper","styles","globalClasses","ToggleDataTids","root","Toggle","_class","_Toggle","_React$Component","props","_this","call","getProps","defaultProps","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","resetFocus","handleBlur","onBlur","state","defaultChecked","_inheritsLoose","_proto","prototype","componentDidMount","autoFocus","render","_this2","createElement","Consumer","theme","renderMain","getContainerSizeClassName","size","containerLarge","containerMedium","containerSmall","getHandleSizeClassName","handleLarge","handleMedium","handleSmall","getButtonSizeClassName","buttonLarge","buttonMedium","buttonSmall","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getInputSizeClassName","inputLarge","inputMedium","inputSmall","getCaptionSizeClassName","captionLarge","captionMedium","captionSmall","_cx","_cx2","_cx4","_cx5","_this$props","children","warning","error","id","name","ariaDescribedby","ariaLabel","_this$getProps","loading","captionPosition","disableAnimations","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","_cx3","captionClass","captionLeft","disabledCaption","className","_extends","rootNodeRef","setRootNode","button","buttonRight","isWarning","isError","focused","onBlurWhenDisabled","type","ref","role","handle","handleDisabled","undefined","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport type { AriaAttributes, InputHTMLAttributes } from 'react';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport type { SizeProp } from '../../lib/types/props';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nexport interface ToggleProps\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n    Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'>,\n    CommonProps {\n  /** @ignore */\n  children?: React.ReactNode;\n\n  /** Задает положение `children` относительно переключателя.\n   * @default 'right' */\n  captionPosition?: 'left' | 'right';\n\n  /** Включает тогл.\n   * @default false */\n  checked?: boolean;\n\n  /** Делает `тогл` включенным по умолчанию. Не работает при заданном пропе `checked`. */\n  defaultChecked?: boolean;\n\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Задает функцию, вызывающуюся при изменении значения. */\n  onValueChange?: (value: boolean) => void;\n\n  /** Задает функцию, которая вызывается при клике на `тогл`. */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\".\n   * @default false */\n  warning?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\".\n   * @default false */\n  error?: boolean;\n\n  /** Переводит тогл в состояние загрузки: добавляет стили для состояния `loading` и отключает `тогл`.*/\n  loading?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\".\n   * @default false */\n  autoFocus?: boolean;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** Задает функцию, которая вызывается, когда `тогл` получает фокус.*/\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n\n  /** Задает функцию, которая вызывается, когда `тогл` теряет фокус. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n  root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>\n>;\n\n/**\n * `Toggle` переключает состояния. Например, включает или отключает уведомления в настройках.\n * `Toggle` представляет из себя надпись + переключатель.\n *\n * `Toggle` нельзя использовать для выбора элементов в списке. Например, выбрать несколько писем.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n  public static displayName = 'Toggle';\n\n  public static defaultProps: DefaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n    disableAnimations: isTestEnv,\n    size: 'small',\n  };\n\n  private getProps = createPropsGetter(Toggle.defaultProps);\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private getContainerSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.containerLarge(this.theme);\n      case 'medium':\n        return styles.containerMedium(this.theme);\n      case 'small':\n      default:\n        return styles.containerSmall(this.theme);\n    }\n  }\n\n  private getHandleSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.handleLarge(this.theme);\n      case 'medium':\n        return styles.handleMedium(this.theme);\n      case 'small':\n      default:\n        return styles.handleSmall(this.theme);\n    }\n  }\n\n  private getButtonSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.buttonLarge(this.theme);\n      case 'medium':\n        return styles.buttonMedium(this.theme);\n      case 'small':\n      default:\n        return styles.buttonSmall(this.theme);\n    }\n  }\n\n  private getRootSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.rootLarge(this.theme);\n      case 'medium':\n        return styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return styles.rootSmall(this.theme);\n    }\n  }\n\n  private getInputSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.inputLarge(this.theme);\n      case 'medium':\n        return styles.inputMedium(this.theme);\n      case 'small':\n      default:\n        return styles.inputSmall(this.theme);\n    }\n  }\n\n  private getCaptionSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.captionLarge(this.theme);\n      case 'medium':\n        return styles.captionMedium(this.theme);\n      case 'small':\n      default:\n        return styles.captionSmall(this.theme);\n    }\n  }\n\n  private renderMain() {\n    const {\n      children,\n      warning,\n      error,\n      id,\n      name,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n    const { loading, captionPosition, disableAnimations } = this.getProps();\n    const disabled = this.getProps().disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(this.getContainerSizeClassName(), {\n      [styles.container(this.theme)]: true,\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(this.getRootSizeClassName(), {\n      [styles.root(this.theme)]: true,\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n      [globalClasses.disabled]: !!disabled,\n      [styles.disableAnimation()]: disableAnimations,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(this.getCaptionSizeClassName(), {\n        [styles.caption(this.theme)]: true,\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n        [styles.disabledCaption(this.theme)]: !!disabled,\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n          <div\n            className={cx(this.getButtonSizeClassName(), {\n              [styles.button(this.theme)]: true,\n              [styles.buttonRight()]: captionPosition === 'left',\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n              <input\n                type=\"checkbox\"\n                checked={checked}\n                onChange={this.handleChange}\n                className={cx(this.getInputSizeClassName(), styles.input(this.theme))}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                ref={this.inputRef}\n                disabled={disabled}\n                id={id}\n                name={name}\n                role=\"switch\"\n                aria-label={ariaLabel}\n                aria-describedby={ariaDescribedby}\n              />\n            </FocusControlWrapper>\n            <div className={containerClassNames} />\n            <div\n              className={cx(this.getHandleSizeClassName(), globalClasses.handle, {\n                [styles.handle(this.theme)]: true,\n                [styles.handleDisabled(this.theme)]: disabled,\n              })}\n            />\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private resetFocus = () => this.setState({ focusByTab: false });\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    this.resetFocus();\n    this.props.onBlur?.(event);\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Toggle/Toggle.d.ts

@@ -59,14 +59,10 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
-    private styles;
-    private cx;
-    private globalObject;
     private theme;
     private input;
     getRootNode: TGetRootNode;
     private setRootNode;
-    private keyListener;
     constructor(props: ToggleProps);
     componentDidMount(): void;
     /**

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>
+```
+
+### Размер
+
+```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

@@ -1,27 +1,28 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import { css } from "../../../lib/theming/Emotion";
 import { isChrome } from "../../../lib/client";
 import { globalClasses } from "../Toggle.styles";
-export var toggleSizeMixin = function toggleSizeMixin(fontSize, toggleHeight, toggleWidth, emotion) {
-  return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n\n    &::before {\n      width: ", ";\n    }\n  "])), toggleHeight, fontSize, toggleWidth);
+export var toggleSizeMixin = function toggleSizeMixin(fontSize, toggleHeight, toggleWidth) {
+  return 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(labGrotesqueBaselineCompensation, fontSize, toggleHeight, toggleWidth, toggleBorderRadius, toggleButtonOffsetY, emotion) {
+export var buttonSizeMixin = function buttonSizeMixin(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);
+  return 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(fontSize, toggleHeight, emotion) {
-  return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n  "])), toggleHeight, fontSize);
+export var captionSizeMixin = function captionSizeMixin(fontSize, toggleHeight) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n  "])), toggleHeight, fontSize);
 };
-export var handleMixin = function handleMixin(toggleHandleSize, toggleHandleBorderRadius, emotion) {
-  return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "])), toggleHandleBorderRadius, toggleHandleSize, toggleHandleSize);
+export var handleMixin = function handleMixin(toggleHandleSize, toggleHandleBorderRadius) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "])), toggleHandleBorderRadius, toggleHandleSize, toggleHandleSize);
 };
-export var containerSizeMixin = function containerSizeMixin(toggleBorderRadius, emotion) {
-  return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n  "])), toggleBorderRadius);
+export var containerSizeMixin = function containerSizeMixin(toggleBorderRadius) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n  "])), toggleBorderRadius);
 };
-export var inputSizeMixin = function inputSizeMixin(toggleHeight, toggleWidth, emotion) {
+export var inputSizeMixin = function inputSizeMixin(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);
+  return 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);
 };

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

@@ -1 +1 @@
-{"version":3,"names":["isChrome","globalClasses","toggleSizeMixin","fontSize","toggleHeight","toggleWidth","emotion","css","_templateObject","_taggedTemplateLiteralLoose","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","_templateObject2","captionSizeMixin","_templateObject3","handleMixin","toggleHandleSize","toggleHandleBorderRadius","_templateObject4","containerSizeMixin","_templateObject5","inputSizeMixin","handleWidthWithBorders","height","_templateObject6","containerDisabled","background","handle"],"sources":["Toggle.mixins.ts"],"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 = (fontSize: string, toggleHeight: string, toggleWidth: string, emotion: Emotion) => {\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  labGrotesqueBaselineCompensation: string,\n  fontSize: string,\n  toggleHeight: string,\n  toggleWidth: string,\n  toggleBorderRadius: string,\n  toggleButtonOffsetY: string,\n  emotion: Emotion,\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 = (fontSize: string, toggleHeight: string, emotion: Emotion) => {\n  return emotion.css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n  `;\n};\n\nexport const handleMixin = (toggleHandleSize: string, toggleHandleBorderRadius: string, emotion: Emotion) => {\n  return emotion.css`\n    border-radius: ${toggleHandleBorderRadius};\n    height: ${toggleHandleSize};\n    width: ${toggleHandleSize};\n  `;\n};\n\nexport const containerSizeMixin = (toggleBorderRadius: string, emotion: Emotion) => {\n  return emotion.css`\n    border-radius: ${toggleBorderRadius};\n  `;\n};\n\nexport const inputSizeMixin = (toggleHeight: string, toggleWidth: string, emotion: Emotion) => {\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"],"mappings":";;AAEA,SAASA,QAAQ,QAAQ,kBAAkB;;AAE3C,SAASC,aAAa,QAAQ,iBAAiB;;AAE/C,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,QAAgB,EAAEC,YAAoB,EAAEC,WAAmB,EAAEC,OAAgB,EAAK;EAChH,OAAOA,OAAO,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACDL,YAAY;EACdD,QAAQ;;;EAGVE,WAAW;;;AAG1B,CAAC;;AAED,OAAO,IAAMK,eAAe,GAAG,SAAlBA,eAAeA;AAC1BC,gCAAwC;AACxCR,QAAgB;AAChBC,YAAoB;AACpBC,WAAmB;AACnBO,kBAA0B;AAC1BC,mBAA2B;AAC3BP,OAAgB;AACb;EACH,IAAMQ,yBAAyB,GAAGC,QAAQ,CAACJ,gCAAgC,CAAC;EAC5E,IAAMK,cAAc,GAAGD,QAAQ,CAACZ,QAAQ,CAAC;EACzC,IAAMc,oBAAoB,GAAGD,cAAc,IAAI,EAAE,IAAIhB,QAAQ,GAAG,CAACc,yBAAyB,GAAG,CAAC;EAC9F,OAAOR,OAAO,CAACC,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;EACNL,YAAY;EACbC,WAAW;EACRA,WAAW;;EAENO,kBAAkB;EACpBR,YAAY;;EAERS,mBAAmB,EAAMI,oBAAoB;;AAEpE,CAAC;;AAED,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIhB,QAAgB,EAAEC,YAAoB,EAAEE,OAAgB,EAAK;EAC5F,OAAOA,OAAO,CAACC,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;EACDL,YAAY;EACdD,QAAQ;;AAEzB,CAAC;;AAED,OAAO,IAAMkB,WAAW,GAAG,SAAdA,WAAWA,CAAIC,gBAAwB,EAAEC,wBAAgC,EAAEjB,OAAgB,EAAK;EAC3G,OAAOA,OAAO,CAACC,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;EACCc,wBAAwB;EAC/BD,gBAAgB;EACjBA,gBAAgB;;AAE7B,CAAC;;AAED,OAAO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIb,kBAA0B,EAAEN,OAAgB,EAAK;EAClF,OAAOA,OAAO,CAACC,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,2BAAA;EACCG,kBAAkB;;AAEvC,CAAC;;AAED,OAAO,IAAMe,cAAc,GAAG,SAAjBA,cAAcA,CAAIvB,YAAoB,EAAEC,WAAmB,EAAEC,OAAgB,EAAK;EAC7F,IAAMsB,sBAAsB,GAAGxB,YAAY;EAC3C,IAAMyB,MAAM,GAAGd,QAAQ,CAACX,YAAY,CAAC;EACrC,OAAOE,OAAO,CAACC,GAAG,CAAAuB,gBAAA,KAAAA,gBAAA,GAAArB,2BAAA;EACDR,aAAa,CAAC8B,iBAAiB,EAAK9B,aAAa,CAAC+B,UAAU;EACxDH,MAAM,GAAG,GAAG,EAAUA,MAAM,GAAG,GAAG;;EAEtC5B,aAAa,CAACgC,MAAM;EACT5B,WAAW,EAAiBuB,sBAAsB;;;AAGhF,CAAC","ignoreList":[]}
+{"version":3,"names":["css","isChrome","globalClasses","toggleSizeMixin","fontSize","toggleHeight","toggleWidth","_templateObject","_taggedTemplateLiteralLoose","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","_templateObject2","captionSizeMixin","_templateObject3","handleMixin","toggleHandleSize","toggleHandleBorderRadius","_templateObject4","containerSizeMixin","_templateObject5","inputSizeMixin","handleWidthWithBorders","height","_templateObject6","containerDisabled","background","handle"],"sources":["Toggle.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { isChrome } from '../../lib/client';\n\nimport { globalClasses } from './Toggle.styles';\n\nexport const toggleSizeMixin = (fontSize: string, toggleHeight: string, toggleWidth: string) => {\n  return css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n\n    &::before {\n      width: ${toggleWidth};\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\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 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 = (fontSize: string, toggleHeight: string) => {\n  return css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n  `;\n};\n\nexport const handleMixin = (toggleHandleSize: string, toggleHandleBorderRadius: string) => {\n  return css`\n    border-radius: ${toggleHandleBorderRadius};\n    height: ${toggleHandleSize};\n    width: ${toggleHandleSize};\n  `;\n};\n\nexport const containerSizeMixin = (toggleBorderRadius: string) => {\n  return css`\n    border-radius: ${toggleBorderRadius};\n  `;\n};\n\nexport const inputSizeMixin = (toggleHeight: string, toggleWidth: string) => {\n  const handleWidthWithBorders = toggleHeight;\n  const height = parseInt(toggleHeight);\n  return 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"],"mappings":"8MAAA,SAASA,GAAG,QAAQ,2BAA2B;AAC/C,SAASC,QAAQ,QAAQ,kBAAkB;;AAE3C,SAASC,aAAa,QAAQ,iBAAiB;;AAE/C,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,QAAgB,EAAEC,YAAoB,EAAEC,WAAmB,EAAK;EAC9F,OAAON,GAAG,CAAAO,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACOH,YAAY;EACdD,QAAQ;;;EAGVE,WAAW;;;AAG1B,CAAC;;AAED,OAAO,IAAMG,eAAe,GAAG,SAAlBA,eAAeA;AAC1BC,gCAAwC;AACxCN,QAAgB;AAChBC,YAAoB;AACpBC,WAAmB;AACnBK,kBAA0B;AAC1BC,mBAA2B;AACxB;EACH,IAAMC,yBAAyB,GAAGC,QAAQ,CAACJ,gCAAgC,CAAC;EAC5E,IAAMK,cAAc,GAAGD,QAAQ,CAACV,QAAQ,CAAC;EACzC,IAAMY,oBAAoB,GAAGD,cAAc,IAAI,EAAE,IAAId,QAAQ,GAAG,CAACY,yBAAyB,GAAG,CAAC;EAC9F,OAAOb,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;EACEH,YAAY;EACbC,WAAW;EACRA,WAAW;;EAENK,kBAAkB;EACpBN,YAAY;;EAERO,mBAAmB,EAAMI,oBAAoB;;AAEpE,CAAC;;AAED,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAId,QAAgB,EAAEC,YAAoB,EAAK;EAC1E,OAAOL,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;EACOH,YAAY;EACdD,QAAQ;;AAEzB,CAAC;;AAED,OAAO,IAAMgB,WAAW,GAAG,SAAdA,WAAWA,CAAIC,gBAAwB,EAAEC,wBAAgC,EAAK;EACzF,OAAOtB,GAAG,CAAAuB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;EACSc,wBAAwB;EAC/BD,gBAAgB;EACjBA,gBAAgB;;AAE7B,CAAC;;AAED,OAAO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIb,kBAA0B,EAAK;EAChE,OAAOX,GAAG,CAAAyB,gBAAA,KAAAA,gBAAA,GAAAjB,2BAAA;EACSG,kBAAkB;;AAEvC,CAAC;;AAED,OAAO,IAAMe,cAAc,GAAG,SAAjBA,cAAcA,CAAIrB,YAAoB,EAAEC,WAAmB,EAAK;EAC3E,IAAMqB,sBAAsB,GAAGtB,YAAY;EAC3C,IAAMuB,MAAM,GAAGd,QAAQ,CAACT,YAAY,CAAC;EACrC,OAAOL,GAAG,CAAA6B,gBAAA,KAAAA,gBAAA,GAAArB,2BAAA;EACON,aAAa,CAAC4B,iBAAiB,EAAK5B,aAAa,CAAC6B,UAAU;EACxDH,MAAM,GAAG,GAAG,EAAUA,MAAM,GAAG,GAAG;;EAEtC1B,aAAa,CAAC8B,MAAM;EACT1B,WAAW,EAAiBqB,sBAAsB;;;AAGhF,CAAC","ignoreList":[]}

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

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

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

@@ -1,6 +1,6 @@
 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;
-import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { buttonSizeMixin, captionSizeMixin, containerSizeMixin, handleMixin, inputSizeMixin, toggleSizeMixin } from "../Toggle.mixins";
 export var globalClasses = prefix('toggle')({
   handle: 'handle',
@@ -10,112 +10,110 @@ export var globalClasses = prefix('toggle')({
   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(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall, emotion));
-    },
-    rootMedium: function rootMedium(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), toggleSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium, emotion));
-    },
-    rootLarge: function rootLarge(t) {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), toggleSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge, emotion));
-    },
-    disableAnimation: function disableAnimation() {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        &,\n        * {\n          transition: none !important;\n        }\n      "])));
-    },
-    handle: function handle(t) {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        bottom: ", ";\n        left: ", ";\n        position: absolute;\n        top: ", ";\n      "])), t.toggleBorderWidth, t.toggleHandleLeft, t.toggleHandleTop);
-    },
-    handleSmall: function handleSmall(t) {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), handleMixin(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall, emotion));
-    },
-    handleMedium: function handleMedium(t) {
-      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), handleMixin(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium, emotion));
-    },
-    handleLarge: function handleLarge(t) {
-      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), handleMixin(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge, emotion));
-    },
-    handleDisabled: function handleDisabled(t) {
-      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        background: ", " !important; // override root hover/active styles\n      "])), t.toggleDisabledHandleBg);
-    },
-    input: function input(t) {
-      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        position: absolute;\n        opacity: 0;\n\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);
-    },
-    inputSmall: function inputSmall(t) {
-      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(t.toggleHeightSmall, t.toggleWidthSmall, emotion));
-    },
-    inputMedium: function inputMedium(t) {
-      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(t.toggleHeightMedium, t.toggleWidthMedium, emotion));
-    },
-    inputLarge: function inputLarge(t) {
-      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(t.toggleHeightLarge, t.toggleWidthLarge, emotion));
-    },
-    container: function container(t) {
-      return emotion.css(_templateObject15 || (_templateObject15 = _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(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), containerSizeMixin(t.toggleBorderRadiusSmall, emotion));
-    },
-    containerMedium: function containerMedium(t) {
-      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), containerSizeMixin(t.toggleBorderRadiusMedium, emotion));
-    },
-    containerLarge: function containerLarge(t) {
-      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), containerSizeMixin(t.toggleBorderRadiusLarge, emotion));
-    },
-    containerDisabled: function containerDisabled(t) {
-      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        box-shadow: inset 0 0 0 1px ", ";\n      "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
-    },
-    focused: function focused(t) {
-      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        box-shadow:\n          0 0 0 1px ", ",\n          0 0 0 ", " ", ";\n      "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
-    },
-    isWarning: function isWarning(t) {
-      return emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        box-shadow:\n          0 0 0 1px ", ",\n          0 0 0 ", " ", ";\n      "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
-    },
-    isError: function isError(t) {
-      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        box-shadow:\n          0 0 0 1px ", ",\n          0 0 0 ", " ", ";\n      "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
-    },
-    button: function button(t) {
-      return emotion.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        position: absolute;\n        left: 0;\n        top: 0;\n        background: ", ";\n        line-height: ", ";\n      "])), t.toggleBaseBg, t.toggleHeightSmall);
-    },
-    buttonSmall: function buttonSmall(t) {
-      return emotion.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall, t.toggleBorderRadiusSmall, t.toggleButtonOffsetY, emotion));
-    },
-    buttonMedium: function buttonMedium(t) {
-      return emotion.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium, t.toggleBorderRadiusMedium, t.toggleButtonOffsetY, emotion));
-    },
-    buttonLarge: function buttonLarge(t) {
-      return emotion.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge, t.toggleBorderRadiusLarge, t.toggleButtonOffsetY, emotion));
-    },
-    buttonRight: function buttonRight() {
-      return emotion.css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n        right: 0;\n        left: auto;\n      "])));
-    },
-    disabled: function disabled() {
-      return emotion.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n      "])));
-    },
-    rootLeft: function rootLeft() {
-      return emotion.css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n        flex-direction: row-reverse;\n      "])));
-    },
-    caption: function caption(t) {
-      return emotion.css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        padding: 0 0 0 ", ";\n      "])), t.toggleTextColor, t.toggleCaptionGap);
-    },
-    captionSmall: function captionSmall(t) {
-      return emotion.css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), captionSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall, emotion));
-    },
-    captionMedium: function captionMedium(t) {
-      return emotion.css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), captionSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium, emotion));
-    },
-    captionLarge: function captionLarge(t) {
-      return emotion.css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), captionSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge, emotion));
-    },
-    disabledCaption: function disabledCaption(t) {
-      return emotion.css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.textColorDisabled);
-    },
-    captionLeft: function captionLeft(t) {
-      return emotion.css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        padding: 0 ", " 0 0;\n      "])), t.toggleTextColor, t.toggleCaptionGap);
-    }
-  });
-};
+export var styles = memoizeStyle({
+  root: function root(t) {
+    return 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 css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), toggleSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall));
+  },
+  rootMedium: function rootMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), toggleSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium));
+  },
+  rootLarge: function rootLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), toggleSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge));
+  },
+  disableAnimation: function disableAnimation() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &,\n      * {\n        transition: none !important;\n      }\n    "])));
+  },
+  handle: function handle(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      bottom: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n    "])), t.toggleBorderWidth, t.toggleHandleLeft, t.toggleHandleTop);
+  },
+  handleSmall: function handleSmall(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), handleMixin(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall));
+  },
+  handleMedium: function handleMedium(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), handleMixin(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium));
+  },
+  handleLarge: function handleLarge(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), handleMixin(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge));
+  },
+  handleDisabled: function handleDisabled(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
+  },
+  input: function input(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\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);
+  },
+  inputSmall: function inputSmall(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.toggleHeightSmall, t.toggleWidthSmall));
+  },
+  inputMedium: function inputMedium(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.toggleHeightMedium, t.toggleWidthMedium));
+  },
+  inputLarge: function inputLarge(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.toggleHeightLarge, t.toggleWidthLarge));
+  },
+  container: function container(t) {
+    return css(_templateObject15 || (_templateObject15 = _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 css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), containerSizeMixin(t.toggleBorderRadiusSmall));
+  },
+  containerMedium: function containerMedium(t) {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), containerSizeMixin(t.toggleBorderRadiusMedium));
+  },
+  containerLarge: function containerLarge(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), containerSizeMixin(t.toggleBorderRadiusLarge));
+  },
+  containerDisabled: function containerDisabled(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
+  },
+  focused: function focused(t) {
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      box-shadow:\n        0 0 0 1px ", ",\n        0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+  },
+  isWarning: function isWarning(t) {
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      box-shadow:\n        0 0 0 1px ", ",\n        0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+  },
+  isError: function isError(t) {
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      box-shadow:\n        0 0 0 1px ", ",\n        0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+  },
+  button: function button(t) {
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      background: ", ";\n      line-height: ", ";\n    "])), t.toggleBaseBg, t.toggleHeightSmall);
+  },
+  buttonSmall: function buttonSmall(t) {
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall, t.toggleBorderRadiusSmall, t.toggleButtonOffsetY));
+  },
+  buttonMedium: function buttonMedium(t) {
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium, t.toggleBorderRadiusMedium, t.toggleButtonOffsetY));
+  },
+  buttonLarge: function buttonLarge(t) {
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge, t.toggleBorderRadiusLarge, t.toggleButtonOffsetY));
+  },
+  buttonRight: function buttonRight() {
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      left: auto;\n    "])));
+  },
+  disabled: function disabled() {
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+  },
+  rootLeft: function rootLeft() {
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
+  },
+  caption: function caption(t) {
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap);
+  },
+  captionSmall: function captionSmall(t) {
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), captionSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall));
+  },
+  captionMedium: function captionMedium(t) {
+    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), captionSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium));
+  },
+  captionLarge: function captionLarge(t) {
+    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), captionSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge));
+  },
+  disabledCaption: function disabledCaption(t) {
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
+  },
+  captionLeft: function captionLeft(t) {
+    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
+  }
+});