@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

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

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.tsx"],"names":["colorWarningShown","ToggleDataTids","root","Toggle","rootNode","props","getProps","defaultProps","input","focus","keyListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","resetFocus","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","emotion","theme","renderMain","getContainerSizeClassName","styles","size","containerLarge","containerMedium","containerSmall","getHandleSizeClassName","handleLarge","handleMedium","handleSmall","getButtonSizeClassName","buttonLarge","buttonMedium","buttonSmall","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getInputSizeClassName","inputLarge","inputMedium","inputSmall","getActiveHandleSizeClassName","activeHandleLarge","activeHandleMedium","activeHandleSmall","getCaptionSizeClassName","captionLarge","captionMedium","captionSmall","children","warning","error","color","id","ariaDescribedby","ariaLabel","loading","captionPosition","disableAnimations","disabled","containerClassNames","cx","container","containerDisabled","globalClasses","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","bool","func","isTestEnv"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { SizeProp } from '../../lib/types/props';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { getStyles, globalClasses } from './Toggle.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type ToggleSize = SizeProp;\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение `children` относительно переключателя.\n   * @default 'right'\n   */\n  captionPosition?: 'left' | 'right';\n  /**\n   * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n   * @default false\n   */\n  checked?: boolean;\n  /**\n   * Делает `тогл` включенным по умолчанию.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Отключает `тогл`.\n   */\n  disabled?: boolean;\n  /**\n   * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n   */\n  onValueChange?: (value: boolean) => void;\n  /**\n   * Событие вызывающееся при клике на `тогл`.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Состояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /** Размер */\n  size?: SizeProp;\n  /**\n   * Событие вызывающееся, когда `тогл` получает фокус.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Событие вызывающееся, когда `тогл` теряет фокус.\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n   */\n  color?: React.CSSProperties['color'];\n  /**\n   * HTML-атрибут `id` для передачи во внутренний `<input />`.\n   */\n  id?: string;\n  /**\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 * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\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 propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color: (props: ToggleProps) => {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\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 emotion!: Emotion;\n  private input: HTMLInputElement | null = null;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private getContainerSizeClassName() {\n    const styles = getStyles(this.emotion);\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    const styles = getStyles(this.emotion);\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    const styles = getStyles(this.emotion);\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    const styles = getStyles(this.emotion);\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    const styles = getStyles(this.emotion);\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 getActiveHandleSizeClassName() {\n    if (isTheme2022(this.theme)) {\n      return '';\n    }\n    const styles = getStyles(this.emotion);\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.activeHandleLarge(this.theme);\n      case 'medium':\n        return styles.activeHandleMedium(this.theme);\n      case 'small':\n      default:\n        return styles.activeHandleSmall(this.theme);\n    }\n  }\n\n  private getCaptionSizeClassName() {\n    const styles = getStyles(this.emotion);\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      color,\n      id,\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    const styles = getStyles(this.emotion);\n    const containerClassNames = this.emotion.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 = this.emotion.cx(this.getRootSizeClassName(), this.getActiveHandleSizeClassName(), {\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 = this.emotion.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={this.emotion.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={this.emotion.cx(\n                  this.getInputSizeClassName(),\n                  isTheme2022(this.theme) && styles.input2022(this.theme),\n                  {\n                    [styles.input(this.theme)]: true,\n                  },\n                )}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                ref={this.inputRef}\n                disabled={disabled}\n                id={id}\n                role=\"switch\"\n                aria-label={ariaLabel}\n                aria-describedby={ariaDescribedby}\n              />\n            </FocusControlWrapper>\n            <div\n              className={containerClassNames}\n              style={\n                checked && color && !disabled\n                  ? {\n                      backgroundColor: color,\n                      boxShadow: `inset 0 0 0 1px ${color}`,\n                    }\n                  : undefined\n              }\n            >\n              {!isTheme2022(this.theme) && (\n                <div\n                  className={this.emotion.cx(styles.activeBackground(), globalClasses.background, {\n                    [styles.activeBackgroundLoading(this.theme)]: loading,\n                    [styles.disabledBackground(this.theme)]: disabled,\n                  })}\n                  style={\n                    checked && color && !disabled\n                      ? {\n                          backgroundColor: color,\n                          boxShadow: `inset 0 0 0 1px ${color}`,\n                        }\n                      : undefined\n                  }\n                />\n              )}\n            </div>\n            <div\n              className={this.emotion.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"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["colorWarningShown","ToggleDataTids","root","Toggle","rootNode","props","getProps","defaultProps","input","focus","keyListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","resetFocus","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","getContainerSizeClassName","size","styles","containerLarge","containerMedium","containerSmall","getHandleSizeClassName","handleLarge","handleMedium","handleSmall","getButtonSizeClassName","buttonLarge","buttonMedium","buttonSmall","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getInputSizeClassName","inputLarge","inputMedium","inputSmall","getActiveHandleSizeClassName","activeHandleLarge","activeHandleMedium","activeHandleSmall","getCaptionSizeClassName","captionLarge","captionMedium","captionSmall","children","warning","error","color","id","ariaDescribedby","ariaLabel","loading","captionPosition","disableAnimations","disabled","containerClassNames","container","containerDisabled","globalClasses","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","bool","func","isTestEnv"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { SizeProp } from '../../lib/types/props';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type ToggleSize = SizeProp;\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение `children` относительно переключателя.\n   * @default 'right'\n   */\n  captionPosition?: 'left' | 'right';\n  /**\n   * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n   * @default false\n   */\n  checked?: boolean;\n  /**\n   * Делает `тогл` включенным по умолчанию.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Отключает `тогл`.\n   */\n  disabled?: boolean;\n  /**\n   * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n   */\n  onValueChange?: (value: boolean) => void;\n  /**\n   * Событие вызывающееся при клике на `тогл`.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Состояние валидации при предупреждении.\n   * @default false\n   */\n  warning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Добавляет стили для состояния `loading` и отключает `тогл`.\n   */\n  loading?: boolean;\n  /**\n   * Если true, выставляет фокус на `тогле` после загрузки страницы.\n   */\n  autoFocus?: boolean;\n  /** Размер */\n  size?: SizeProp;\n  /**\n   * Событие вызывающееся, когда `тогл` получает фокус.\n   */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Событие вызывающееся, когда `тогл` теряет фокус.\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n   */\n  color?: React.CSSProperties['color'];\n  /**\n   * HTML-атрибут `id` для передачи во внутренний `<input />`.\n   */\n  id?: string;\n  /**\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 * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\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 propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color: (props: ToggleProps) => {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\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  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 getActiveHandleSizeClassName() {\n    if (isTheme2022(this.theme)) {\n      return '';\n    }\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.activeHandleLarge(this.theme);\n      case 'medium':\n        return styles.activeHandleMedium(this.theme);\n      case 'small':\n      default:\n        return styles.activeHandleSmall(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      color,\n      id,\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(), this.getActiveHandleSizeClassName(), {\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(), isTheme2022(this.theme) && styles.input2022(this.theme), {\n                  [styles.input(this.theme)]: true,\n                })}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                ref={this.inputRef}\n                disabled={disabled}\n                id={id}\n                role=\"switch\"\n                aria-label={ariaLabel}\n                aria-describedby={ariaDescribedby}\n              />\n            </FocusControlWrapper>\n            <div\n              className={containerClassNames}\n              style={\n                checked && color && !disabled\n                  ? {\n                      backgroundColor: color,\n                      boxShadow: `inset 0 0 0 1px ${color}`,\n                    }\n                  : undefined\n              }\n            >\n              {!isTheme2022(this.theme) && (\n                <div\n                  className={cx(styles.activeBackground(), globalClasses.background, {\n                    [styles.activeBackgroundLoading(this.theme)]: loading,\n                    [styles.disabledBackground(this.theme)]: disabled,\n                  })}\n                  style={\n                    checked && color && !disabled\n                      ? {\n                          backgroundColor: color,\n                          boxShadow: `inset 0 0 0 1px ${color}`,\n                        }\n                      : undefined\n                  }\n                />\n              )}\n            </div>\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"]}

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

@@ -1,8 +1,7 @@
-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;
+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;
+export declare const activeHandleSizeMixin: (toggleHandleSize: string, toggleBorderWidth: string, toggleHandleActiveWidthIncrement: string, toggleWidth: string) => string;

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

@@ -1,95 +1,90 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.toggleSizeMixin = exports.inputSizeMixin = exports.handleMixin = exports.containerSizeMixin = exports.captionSizeMixin = exports.buttonSizeMixin = exports.activeHandleSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.toggleSizeMixin = exports.inputSizeMixin = exports.handleMixin = exports.containerSizeMixin = exports.captionSizeMixin = exports.buttonSizeMixin = exports.activeHandleSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 var _client = require("../../lib/client");
 
 var _Toggle = require("./Toggle.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-var toggleSizeMixin = function toggleSizeMixin(emotion) {return function (fontSize, toggleHeight, toggleWidth) {
-    return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    line-height: ", ";\n    font-size: ", ";\n\n    &::before {\n      width: ", ";\n    }\n  "])),
-    toggleHeight,
-    fontSize,
+var toggleSizeMixin = function toggleSizeMixin(fontSize, toggleHeight, toggleWidth) {
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    line-height: ", ";\n    font-size: ", ";\n\n    &::before {\n      width: ", ";\n    }\n  "])),
+  toggleHeight,
+  fontSize,
 
 
-    toggleWidth);
+  toggleWidth);
 
 
-  };};exports.toggleSizeMixin = toggleSizeMixin;
+};exports.toggleSizeMixin = toggleSizeMixin;
 
-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 && _client.isChrome ? -labGrotesqueCompenstation : 0;
-      return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
+var buttonSizeMixin = function buttonSizeMixin(
+labGrotesqueBaselineCompensation,
+fontSize,
+toggleHeight,
+toggleWidth,
+toggleBorderRadius,
+toggleButtonOffsetY)
+{
+  var labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);
+  var buttonFontSize = parseInt(fontSize);
+  var baselineCompensation = buttonFontSize <= 16 && _client.isChrome ? -labGrotesqueCompenstation : 0;
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
+  toggleBorderRadius,
+  toggleHeight,
 
-      toggleButtonOffsetY, baselineCompensation);
+  toggleButtonOffsetY, baselineCompensation);
 
-    });};exports.buttonSizeMixin = buttonSizeMixin;
+};exports.buttonSizeMixin = buttonSizeMixin;
 
-var captionSizeMixin = function captionSizeMixin(emotion) {return function (fontSize, toggleHeight) {
-    return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    line-height: ", ";\n    font-size: ", ";\n  "])),
-    toggleHeight,
-    fontSize);
+var captionSizeMixin = function captionSizeMixin(fontSize, toggleHeight) {
+  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    line-height: ", ";\n    font-size: ", ";\n  "])),
+  toggleHeight,
+  fontSize);
 
-  };};exports.captionSizeMixin = captionSizeMixin;
+};exports.captionSizeMixin = captionSizeMixin;
 
-var handleMixin = function handleMixin(emotion) {return function (toggleHandleSize, toggleHandleBorderRadius) {
-    return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "])),
-    toggleHandleBorderRadius,
-    toggleHandleSize,
-    toggleHandleSize);
+var handleMixin = function handleMixin(toggleHandleSize, toggleHandleBorderRadius) {
+  return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "])),
+  toggleHandleBorderRadius,
+  toggleHandleSize,
+  toggleHandleSize);
 
-  };};exports.handleMixin = handleMixin;
+};exports.handleMixin = handleMixin;
 
-var containerSizeMixin = function containerSizeMixin(emotion) {return function (toggleBorderRadius) {
-    return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-radius: ", ";\n  "])),
-    toggleBorderRadius);
+var containerSizeMixin = function containerSizeMixin(toggleBorderRadius) {
+  return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-radius: ", ";\n  "])),
+  toggleBorderRadius);
 
-  };};exports.containerSizeMixin = containerSizeMixin;
+};exports.containerSizeMixin = containerSizeMixin;
 
-var inputSizeMixin = function inputSizeMixin(emotion) {return function (toggleHeight, toggleWidth) {
-    var handleWidthWithBorders = toggleHeight;
-    var height = parseInt(toggleHeight);
-    return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:checked ~ .", " .", " {\n      border-radius: ", "px 0 0 ", "px;\n    }\n    &:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ");\n    }\n  "])),
-    _Toggle.globalClasses.containerDisabled, _Toggle.globalClasses.background,
-    height * 0.5, height * 0.5,
+var inputSizeMixin = function inputSizeMixin(toggleHeight, toggleWidth) {
+  var handleWidthWithBorders = toggleHeight;
+  var height = parseInt(toggleHeight);
+  return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:checked ~ .", " .", " {\n      border-radius: ", "px 0 0 ", "px;\n    }\n    &:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ");\n    }\n  "])),
+  _Toggle.globalClasses.containerDisabled, _Toggle.globalClasses.background,
+  height * 0.5, height * 0.5,
 
-    _Toggle.globalClasses.handle,
-    toggleWidth, handleWidthWithBorders);
+  _Toggle.globalClasses.handle,
+  toggleWidth, handleWidthWithBorders);
 
 
-  };};exports.inputSizeMixin = inputSizeMixin;
+};exports.inputSizeMixin = inputSizeMixin;
 
-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 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:active:not(.", ") .", " {\n      width: ", ";\n    }\n    &:active:not(.", ") input:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ") translateX(-4px);\n    }\n  "])),
-      _Toggle.globalClasses.disabled, _Toggle.globalClasses.handle,
-      handleActiveWidth,
+var activeHandleSizeMixin = function activeHandleSizeMixin(
+toggleHandleSize,
+toggleBorderWidth,
+toggleHandleActiveWidthIncrement,
+toggleWidth)
+{
+  var handleWidthWithBorders = toggleHandleSize;
+  var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + toggleBorderWidth + " + " + toggleHandleActiveWidthIncrement + ")";
+  return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:active:not(.", ") .", " {\n      width: ", ";\n    }\n    &:active:not(.", ") input:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ") translateX(-4px);\n    }\n  "])),
+  _Toggle.globalClasses.disabled, _Toggle.globalClasses.handle,
+  handleActiveWidth,
 
-      _Toggle.globalClasses.disabled, _Toggle.globalClasses.handle,
-      toggleWidth, handleWidthWithBorders);
+  _Toggle.globalClasses.disabled, _Toggle.globalClasses.handle,
+  toggleWidth, handleWidthWithBorders);
 
 
-    });};exports.activeHandleSizeMixin = activeHandleSizeMixin;
+};exports.activeHandleSizeMixin = activeHandleSizeMixin;

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

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.mixins.ts"],"names":["toggleSizeMixin","emotion","fontSize","toggleHeight","toggleWidth","css","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","isChrome","captionSizeMixin","handleMixin","toggleHandleSize","toggleHandleBorderRadius","containerSizeMixin","inputSizeMixin","handleWidthWithBorders","height","globalClasses","containerDisabled","background","handle","activeHandleSizeMixin","toggleBorderWidth","toggleHandleActiveWidthIncrement","handleActiveWidth","disabled"],"mappings":";;AAEA;;AAEA,yC;;AAEO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,OAAD,UAAsB,UAACC,QAAD,EAAmBC,YAAnB,EAAyCC,WAAzC,EAAiE;AACpH,WAAOH,OAAO,CAACI,GAAf;AACiBF,IAAAA,YADjB;AAEeD,IAAAA,QAFf;;;AAKaE,IAAAA,WALb;;;AAQD,GAT8B,EAAxB,C;;AAWA,IAAME,eAAe;AAC1B,SADWA,eACX,CAACL,OAAD;AACA;AACEM,IAAAA,gCADF;AAEEL,IAAAA,QAFF;AAGEC,IAAAA,YAHF;AAIEC,IAAAA,WAJF;AAKEI,IAAAA,kBALF;AAMEC,IAAAA,mBANF;AAOK;AACH,UAAMC,yBAAyB,GAAGC,QAAQ,CAACJ,gCAAD,CAA1C;AACA,UAAMK,cAAc,GAAGD,QAAQ,CAACT,QAAD,CAA/B;AACA,UAAMW,oBAAoB,GAAGD,cAAc,IAAI,EAAlB,IAAwBE,gBAAxB,GAAmC,CAACJ,yBAApC,GAAgE,CAA7F;AACA,aAAOT,OAAO,CAACI,GAAf;AACUF,MAAAA,YADV;AAESC,MAAAA,WAFT;AAGYA,MAAAA,WAHZ;;AAKiBI,MAAAA,kBALjB;AAMeL,MAAAA,YANf;;AAQmBM,MAAAA,mBARnB,EAQ4CI,oBAR5C;;AAUD,KAtBD,GADK,C;;AAyBA,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACd,OAAD,UAAsB,UAACC,QAAD,EAAmBC,YAAnB,EAA4C;AAChG,WAAOF,OAAO,CAACI,GAAf;AACiBF,IAAAA,YADjB;AAEeD,IAAAA,QAFf;;AAID,GAL+B,EAAzB,C;;AAOA,IAAMc,WAAW,GAAG,SAAdA,WAAc,CAACf,OAAD,UAAsB,UAACgB,gBAAD,EAA2BC,wBAA3B,EAAgE;AAC/G,WAAOjB,OAAO,CAACI,GAAf;AACmBa,IAAAA,wBADnB;AAEYD,IAAAA,gBAFZ;AAGWA,IAAAA,gBAHX;;AAKD,GAN0B,EAApB,C;;AAQA,IAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAAClB,OAAD,UAAsB,UAACO,kBAAD,EAAgC;AACtF,WAAOP,OAAO,CAACI,GAAf;AACmBG,IAAAA,kBADnB;;AAGD,GAJiC,EAA3B,C;;AAMA,IAAMY,cAAc,GAAG,SAAjBA,cAAiB,CAACnB,OAAD,UAAsB,UAACE,YAAD,EAAuBC,WAAvB,EAA+C;AACjG,QAAMiB,sBAAsB,GAAGlB,YAA/B;AACA,QAAMmB,MAAM,GAAGX,QAAQ,CAACR,YAAD,CAAvB;AACA,WAAOF,OAAO,CAACI,GAAf;AACiBkB,0BAAcC,iBAD/B,EACqDD,sBAAcE,UADnE;AAEqBH,IAAAA,MAAM,GAAG,GAF9B,EAE2CA,MAAM,GAAG,GAFpD;;AAIiBC,0BAAcG,MAJ/B;AAK4BtB,IAAAA,WAL5B,EAKwDiB,sBALxD;;;AAQD,GAX6B,EAAvB,C;;AAaA,IAAMM,qBAAqB;AAChC,SADWA,qBACX,CAAC1B,OAAD;AACA;AACEgB,IAAAA,gBADF;AAEEW,IAAAA,iBAFF;AAGEC,IAAAA,gCAHF;AAIEzB,IAAAA,WAJF;AAKK;AACH,UAAMiB,sBAAsB,GAAGJ,gBAA/B;AACA,UAAMa,iBAAiB,aAAWT,sBAAX,eAA2CO,iBAA3C,WAAkEC,gCAAlE,MAAvB;AACA,aAAO5B,OAAO,CAACI,GAAf;AACgBkB,4BAAcQ,QAD9B,EAC4CR,sBAAcG,MAD1D;AAEWI,MAAAA,iBAFX;;AAIgBP,4BAAcQ,QAJ9B,EAI4DR,sBAAcG,MAJ1E;AAK0BtB,MAAAA,WAL1B,EAKsDiB,sBALtD;;;AAQD,KAjBD,GADK,C","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"]}
+{"version":3,"sources":["Toggle.mixins.ts"],"names":["toggleSizeMixin","fontSize","toggleHeight","toggleWidth","css","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","isChrome","captionSizeMixin","handleMixin","toggleHandleSize","toggleHandleBorderRadius","containerSizeMixin","inputSizeMixin","handleWidthWithBorders","height","globalClasses","containerDisabled","background","handle","activeHandleSizeMixin","toggleBorderWidth","toggleHandleActiveWidthIncrement","handleActiveWidth","disabled"],"mappings":"8bAAA;AACA;;AAEA,yC;;AAEO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,QAAD,EAAmBC,YAAnB,EAAyCC,WAAzC,EAAiE;AAC9F,aAAOC,YAAP;AACiBF,EAAAA,YADjB;AAEeD,EAAAA,QAFf;;;AAKaE,EAAAA,WALb;;;AAQD,CATM,C;;AAWA,IAAME,eAAe,GAAG,SAAlBA,eAAkB;AAC7BC,gCAD6B;AAE7BL,QAF6B;AAG7BC,YAH6B;AAI7BC,WAJ6B;AAK7BI,kBAL6B;AAM7BC,mBAN6B;AAO1B;AACH,MAAMC,yBAAyB,GAAGC,QAAQ,CAACJ,gCAAD,CAA1C;AACA,MAAMK,cAAc,GAAGD,QAAQ,CAACT,QAAD,CAA/B;AACA,MAAMW,oBAAoB,GAAGD,cAAc,IAAI,EAAlB,IAAwBE,gBAAxB,GAAmC,CAACJ,yBAApC,GAAgE,CAA7F;AACA,aAAOL,YAAP;AACYF,EAAAA,YADZ;AAEWC,EAAAA,WAFX;AAGcA,EAAAA,WAHd;;AAKmBI,EAAAA,kBALnB;AAMiBL,EAAAA,YANjB;;AAQqBM,EAAAA,mBARrB,EAQ8CI,oBAR9C;;AAUD,CArBM,C;;AAuBA,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACb,QAAD,EAAmBC,YAAnB,EAA4C;AAC1E,aAAOE,YAAP;AACiBF,EAAAA,YADjB;AAEeD,EAAAA,QAFf;;AAID,CALM,C;;AAOA,IAAMc,WAAW,GAAG,SAAdA,WAAc,CAACC,gBAAD,EAA2BC,wBAA3B,EAAgE;AACzF,aAAOb,YAAP;AACmBa,EAAAA,wBADnB;AAEYD,EAAAA,gBAFZ;AAGWA,EAAAA,gBAHX;;AAKD,CANM,C;;AAQA,IAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACX,kBAAD,EAAgC;AAChE,aAAOH,YAAP;AACmBG,EAAAA,kBADnB;;AAGD,CAJM,C;;AAMA,IAAMY,cAAc,GAAG,SAAjBA,cAAiB,CAACjB,YAAD,EAAuBC,WAAvB,EAA+C;AAC3E,MAAMiB,sBAAsB,GAAGlB,YAA/B;AACA,MAAMmB,MAAM,GAAGX,QAAQ,CAACR,YAAD,CAAvB;AACA,aAAOE,YAAP;AACiBkB,wBAAcC,iBAD/B,EACqDD,sBAAcE,UADnE;AAEqBH,EAAAA,MAAM,GAAG,GAF9B,EAE2CA,MAAM,GAAG,GAFpD;;AAIiBC,wBAAcG,MAJ/B;AAK4BtB,EAAAA,WAL5B,EAKwDiB,sBALxD;;;AAQD,CAXM,C;;AAaA,IAAMM,qBAAqB,GAAG,SAAxBA,qBAAwB;AACnCV,gBADmC;AAEnCW,iBAFmC;AAGnCC,gCAHmC;AAInCzB,WAJmC;AAKhC;AACH,MAAMiB,sBAAsB,GAAGJ,gBAA/B;AACA,MAAMa,iBAAiB,aAAWT,sBAAX,eAA2CO,iBAA3C,WAAkEC,gCAAlE,MAAvB;AACA,aAAOxB,YAAP;AACkBkB,wBAAcQ,QADhC,EAC8CR,sBAAcG,MAD5D;AAEaI,EAAAA,iBAFb;;AAIkBP,wBAAcQ,QAJhC,EAI8DR,sBAAcG,MAJ5E;AAK4BtB,EAAAA,WAL5B,EAKwDiB,sBALxD;;;AAQD,CAhBM,C","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\nexport const activeHandleSizeMixin = (\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 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/cjs/components/Toggle/Toggle.styles.d.ts

@@ -1,4 +1,3 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     handle: string;
@@ -8,7 +7,7 @@ export declare const globalClasses: {
     containerLoading: string;
     background: string;
 };
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;