@skbkontur/react-ui 0.0.0-c2bf15a894 → 0.0.0-c5bd33d001

package/cjs/components/Toggle/Toggle.js

@@ -1,17 +1,18 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ToggleDataTids = exports.Toggle = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 
 
 var _keyListener = require("../../lib/events/keyListener");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
+
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _currentEnvironment = require("../../lib/currentEnvironment");
 
 var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _Toggle2 = require("./Toggle.styles");var _class, _Toggle;
 
@@ -63,17 +64,6 @@ var _Toggle2 = require("./Toggle.styles");var _class, _Toggle;
 
 
 
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -95,7 +85,10 @@ var ToggleDataTids = exports.ToggleDataTids = {
 
 
 /**
- * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+ * `Toggle` переключает состояния. Например, включает или отключает уведомления в настройках.
+ * `Toggle` представляет из себя надпись + переключатель.
+ *
+ * `Toggle` нельзя использовать для выбора элементов в списке. Например, выбрать несколько писем.
  */var
 
 Toggle = exports.Toggle = (0, _rootNode.rootNode)(_class = (_Toggle = /*#__PURE__*/function (_React$Component) {
@@ -107,18 +100,6 @@ Toggle = exports.Toggle = (0, _rootNode.rootNode)(_class = (_Toggle = /*#__PURE_
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -314,11 +295,6 @@ Toggle = exports.Toggle = (0, _rootNode.rootNode)(_class = (_Toggle = /*#__PURE_
 
 
 
-
-
-
-
-
 
 
 
@@ -360,8 +336,8 @@ Toggle = exports.Toggle = (0, _rootNode.rootNode)(_class = (_Toggle = /*#__PURE_
     handleBlur = function (event) {
       _this.resetFocus();
       _this.props.onBlur == null || _this.props.onBlur(event);
-    };_this.state = { focusByTab: false, checked: props.defaultChecked };return _this;}(0, _inheritsLoose2.default)(Toggle, _React$Component);var _proto = Toggle.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_keyListener.keyListener.isTabPressed = true;this.focus();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;_this2.styles = (0, _Toggle2.getStyles)(_this2.emotion);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.getContainerSizeClassName = function getContainerSizeClassName() {var styles = this.styles;switch (this.getProps().size) {case 'large':return styles.containerLarge(this.theme);case 'medium':return styles.containerMedium(this.theme);case 'small':default:return styles.containerSmall(this.theme);}};_proto.getHandleSizeClassName = function getHandleSizeClassName() {var styles = this.styles;switch (this.getProps().size) {case 'large':return styles.handleLarge(this.theme);case 'medium':return styles.handleMedium(this.theme);case 'small':default:return styles.handleSmall(this.theme);}};_proto.getButtonSizeClassName = function getButtonSizeClassName() {var styles = this.styles;switch (this.getProps().size) {case 'large':return styles.buttonLarge(this.theme);case 'medium':return styles.buttonMedium(this.theme);case 'small':default:return styles.buttonSmall(this.theme);}};_proto.getRootSizeClassName = function getRootSizeClassName() {var styles = this.styles;switch (this.getProps().size) {case 'large':return styles.rootLarge(this.theme);case 'medium':return styles.rootMedium(this.theme);case 'small':default:return styles.rootSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {var styles = this.styles;switch (this.getProps().size) {case 'large':return styles.inputLarge(this.theme);case 'medium':return styles.inputMedium(this.theme);case 'small':default:return styles.inputSmall(this.theme);}};_proto.getCaptionSizeClassName = function getCaptionSizeClassName() {var styles = this.styles;switch (this.getProps().size) {case 'large':return styles.captionLarge(this.theme);case 'medium':return styles.captionMedium(this.theme);case 'small':default:return styles.captionSmall(this.theme);}};_proto.renderMain = function renderMain() {var _this$emotion$cx, _this$emotion$cx2, _this$emotion$cx4, _this$emotion$cx5;var _this$props = this.props,children = _this$props.children,warning = _this$props.warning,error = _this$props.error,id = _this$props.id,ariaDescribedby = _this$props['aria-describedby'],ariaLabel = _this$props['aria-label'];var _this$getProps = this.getProps(),loading = _this$getProps.loading,captionPosition = _this$getProps.captionPosition,disableAnimations = _this$getProps.disableAnimations;var disabled = this.getProps().disabled || loading;var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;var styles = this.styles;var containerClassNames = this.emotion.cx(this.getContainerSizeClassName(), (_this$emotion$cx = {}, _this$emotion$cx[styles.container(this.theme)] = true, _this$emotion$cx[styles.containerDisabled(this.theme)] = !!disabled, _this$emotion$cx[_Toggle2.globalClasses.container] = true, _this$emotion$cx[_Toggle2.globalClasses.containerDisabled] = !!disabled, _this$emotion$cx[_Toggle2.globalClasses.containerLoading] = loading, _this$emotion$cx));var labelClassNames = this.emotion.cx(this.getRootSizeClassName(), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.root(this.theme)] = true, _this$emotion$cx2[styles.rootLeft()] = captionPosition === 'left', _this$emotion$cx2[styles.disabled()] = !!disabled, _this$emotion$cx2[_Toggle2.globalClasses.disabled] = !!disabled, _this$emotion$cx2[styles.disableAnimation()] = disableAnimations, _this$emotion$cx2));var caption = null;if (children) {var _this$emotion$cx3;var captionClass = this.emotion.cx(this.getCaptionSizeClassName(), (_this$emotion$cx3 = {}, _this$emotion$cx3[styles.caption(this.theme)] = true, _this$emotion$cx3[styles.captionLeft(this.theme)] = captionPosition === 'left', _this$emotion$cx3[styles.disabledCaption(this.theme)] = !!disabled, _this$emotion$cx3));caption = /*#__PURE__*/_react.default.createElement("span", { className: captionClass }, children);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("label", { "data-tid": ToggleDataTids.root, className: labelClassNames }, /*#__PURE__*/_react.default.createElement("div", { className: this.emotion.cx(this.getButtonSizeClassName(), (_this$emotion$cx4 = {}, _this$emotion$cx4[styles.button(this.theme)] = true, _this$emotion$cx4[styles.buttonRight()] = captionPosition === 'left', _this$emotion$cx4[styles.isWarning(this.theme)] = !!warning, _this$emotion$cx4[styles.isError(this.theme)] = !!error, _this$emotion$cx4[styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _this$emotion$cx4)) }, /*#__PURE__*/_react.default.createElement(_FocusControlWrapper.FocusControlWrapper, { onBlurWhenDisabled: this.resetFocus }, /*#__PURE__*/_react.default.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: this.emotion.cx(this.getInputSizeClassName(), styles.input(this.theme)), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled, id: id, role: "switch", "aria-label": ariaLabel, "aria-describedby": ariaDescribedby })), /*#__PURE__*/_react.default.createElement("div", { className: containerClassNames }), /*#__PURE__*/_react.default.createElement("div", { className: this.emotion.cx(this.getHandleSizeClassName(), _Toggle2.globalClasses.handle, (_this$emotion$cx5 = {}, _this$emotion$cx5[styles.handle(this.theme)] = true, _this$emotion$cx5[styles.handleDisabled(this.theme)] = disabled, _this$emotion$cx5)) })), caption));};_proto.
+    };_this.state = { focusByTab: false, checked: props.defaultChecked };return _this;}(0, _inheritsLoose2.default)(Toggle, _React$Component);var _proto = Toggle.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_keyListener.keyListener.isTabPressed = true;this.focus();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getContainerSizeClassName = function getContainerSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle2.styles.containerLarge(this.theme);case 'medium':return _Toggle2.styles.containerMedium(this.theme);case 'small':default:return _Toggle2.styles.containerSmall(this.theme);}};_proto.getHandleSizeClassName = function getHandleSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle2.styles.handleLarge(this.theme);case 'medium':return _Toggle2.styles.handleMedium(this.theme);case 'small':default:return _Toggle2.styles.handleSmall(this.theme);}};_proto.getButtonSizeClassName = function getButtonSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle2.styles.buttonLarge(this.theme);case 'medium':return _Toggle2.styles.buttonMedium(this.theme);case 'small':default:return _Toggle2.styles.buttonSmall(this.theme);}};_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle2.styles.rootLarge(this.theme);case 'medium':return _Toggle2.styles.rootMedium(this.theme);case 'small':default:return _Toggle2.styles.rootSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle2.styles.inputLarge(this.theme);case 'medium':return _Toggle2.styles.inputMedium(this.theme);case 'small':default:return _Toggle2.styles.inputSmall(this.theme);}};_proto.getCaptionSizeClassName = function getCaptionSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle2.styles.captionLarge(this.theme);case 'medium':return _Toggle2.styles.captionMedium(this.theme);case 'small':default:return _Toggle2.styles.captionSmall(this.theme);}};_proto.renderMain = function renderMain() {var _cx, _cx2, _cx4, _cx5;var _this$props = this.props,children = _this$props.children,warning = _this$props.warning,error = _this$props.error,id = _this$props.id,name = _this$props.name,ariaDescribedby = _this$props['aria-describedby'],ariaLabel = _this$props['aria-label'];var _this$getProps = this.getProps(),loading = _this$getProps.loading,captionPosition = _this$getProps.captionPosition,disableAnimations = _this$getProps.disableAnimations;var disabled = this.getProps().disabled || loading;var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;var containerClassNames = (0, _Emotion.cx)(this.getContainerSizeClassName(), (_cx = {}, _cx[_Toggle2.styles.container(this.theme)] = true, _cx[_Toggle2.styles.containerDisabled(this.theme)] = !!disabled, _cx[_Toggle2.globalClasses.container] = true, _cx[_Toggle2.globalClasses.containerDisabled] = !!disabled, _cx[_Toggle2.globalClasses.containerLoading] = loading, _cx));var labelClassNames = (0, _Emotion.cx)(this.getRootSizeClassName(), (_cx2 = {}, _cx2[_Toggle2.styles.root(this.theme)] = true, _cx2[_Toggle2.styles.rootLeft()] = captionPosition === 'left', _cx2[_Toggle2.styles.disabled()] = !!disabled, _cx2[_Toggle2.globalClasses.disabled] = !!disabled, _cx2[_Toggle2.styles.disableAnimation()] = disableAnimations, _cx2));var caption = null;if (children) {var _cx3;var captionClass = (0, _Emotion.cx)(this.getCaptionSizeClassName(), (_cx3 = {}, _cx3[_Toggle2.styles.caption(this.theme)] = true, _cx3[_Toggle2.styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[_Toggle2.styles.disabledCaption(this.theme)] = !!disabled, _cx3));caption = /*#__PURE__*/_react.default.createElement("span", { className: captionClass }, children);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("label", { "data-tid": ToggleDataTids.root, className: labelClassNames }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(this.getButtonSizeClassName(), (_cx4 = {}, _cx4[_Toggle2.styles.button(this.theme)] = true, _cx4[_Toggle2.styles.buttonRight()] = captionPosition === 'left', _cx4[_Toggle2.styles.isWarning(this.theme)] = !!warning, _cx4[_Toggle2.styles.isError(this.theme)] = !!error, _cx4[_Toggle2.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4)) }, /*#__PURE__*/_react.default.createElement(_FocusControlWrapper.FocusControlWrapper, { onBlurWhenDisabled: this.resetFocus }, /*#__PURE__*/_react.default.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: (0, _Emotion.cx)(this.getInputSizeClassName(), _Toggle2.styles.input(this.theme)), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled, id: id, name: name, role: "switch", "aria-label": ariaLabel, "aria-describedby": ariaDescribedby })), /*#__PURE__*/_react.default.createElement("div", { className: containerClassNames }), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(this.getHandleSizeClassName(), _Toggle2.globalClasses.handle, (_cx5 = {}, _cx5[_Toggle2.styles.handle(this.theme)] = true, _cx5[_Toggle2.styles.handleDisabled(this.theme)] = disabled, _cx5)) })), caption));};_proto.
 
   isUncontrolled = function isUncontrolled() {
     return this.props.checked === undefined;
-  };return Toggle;}(_react.default.Component), _Toggle.__KONTUR_REACT_UI__ = 'Toggle', _Toggle.displayName = 'Toggle', _Toggle.propTypes = { checked: _propTypes.default.bool, defaultChecked: _propTypes.default.bool, disabled: _propTypes.default.bool, error: _propTypes.default.bool, loading: _propTypes.default.bool, warning: _propTypes.default.bool, onValueChange: _propTypes.default.func }, _Toggle.defaultProps = { disabled: false, loading: false, captionPosition: 'right', disableAnimations: _currentEnvironment.isTestEnv, size: 'small' }, _Toggle)) || _class;
+  };return Toggle;}(_react.default.Component), _Toggle.__KONTUR_REACT_UI__ = 'Toggle', _Toggle.displayName = 'Toggle', _Toggle.defaultProps = { disabled: false, loading: false, captionPosition: 'right', disableAnimations: _currentEnvironment.isTestEnv, size: 'small' }, _Toggle)) || _class;

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_keyListener","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_currentEnvironment","_FocusControlWrapper","_ThemeContext","_Toggle2","_class","_Toggle","ToggleDataTids","exports","root","Toggle","rootNode","_React$Component","props","_this","call","getProps","createPropsGetter","defaultProps","input","focus","keyListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","resetFocus","handleBlur","onBlur","state","defaultChecked","_inheritsLoose2","default","_proto","prototype","componentDidMount","autoFocus","render","_this2","createElement","EmotionConsumer","emotion","styles","getStyles","ThemeContext","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","_this$emotion$cx","_this$emotion$cx2","_this$emotion$cx4","_this$emotion$cx5","_this$props","children","warning","error","id","ariaDescribedby","ariaLabel","_this$getProps","loading","captionPosition","disableAnimations","disabled","containerClassNames","cx","container","containerDisabled","globalClasses","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","_this$emotion$cx3","captionClass","captionLeft","disabledCaption","className","CommonWrapper","_extends2","rootNodeRef","setRootNode","button","buttonRight","isWarning","isError","focused","FocusControlWrapper","onBlurWhenDisabled","type","ref","role","handle","handleDisabled","undefined","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","bool","func","isTestEnv"],"sources":["Toggle.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\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 { SizeProp } from '../../lib/types/props';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles, globalClasses } from './Toggle.styles';\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   * 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  };\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 styles!: ReturnType<typeof getStyles>;\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          this.styles = getStyles(this.emotion);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private getContainerSizeClassName() {\n    const styles = this.styles;\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 = this.styles;\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 = this.styles;\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 = this.styles;\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 = this.styles;\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    const styles = this.styles;\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 { children, warning, error, id, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel } = 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 = this.styles;\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(), {\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(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                role=\"switch\"\n                aria-label={ariaLabel}\n                aria-describedby={ariaDescribedby}\n              />\n            </FocusControlWrapper>\n            <div className={containerClassNames} />\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_keyListener","_ThemeContext","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_currentEnvironment","_FocusControlWrapper","_Toggle2","_class","_Toggle","ToggleDataTids","exports","root","Toggle","rootNode","_React$Component","props","_this","call","getProps","createPropsGetter","defaultProps","input","focus","keyListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","resetFocus","handleBlur","onBlur","state","defaultChecked","_inheritsLoose2","default","_proto","prototype","componentDidMount","autoFocus","render","_this2","createElement","ThemeContext","Consumer","theme","renderMain","getContainerSizeClassName","size","styles","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","cx","container","containerDisabled","globalClasses","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","_cx3","captionClass","captionLeft","disabledCaption","className","CommonWrapper","_extends2","rootNodeRef","setRootNode","button","buttonRight","isWarning","isError","focused","FocusControlWrapper","onBlurWhenDisabled","type","ref","role","handle","handleDisabled","undefined","React","Component","__KONTUR_REACT_UI__","displayName","isTestEnv"],"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 { 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  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/cjs/components/Toggle/Toggle.md

@@ -1,4 +1,4 @@
-Базовый пример тогла.
+### Базовый пример
 
 ```jsx harmony
 const [checked, setChecked] = React.useState(false);
@@ -8,7 +8,7 @@ const [checked, setChecked] = React.useState(false);
 </Toggle>
 ```
 
-Пример тогла включенного по умолчанию.
+### Тогл включенный по умолчанию
 
 ```jsx harmony
 <Toggle defaultChecked>
@@ -16,7 +16,7 @@ const [checked, setChecked] = React.useState(false);
 </Toggle>
 ```
 
-Тогл с надписью слева от переключателя.
+### Надпись слева от переключателя
 
 ```jsx harmony
 const [checked, setChecked] = React.useState(false);
@@ -26,7 +26,7 @@ const [checked, setChecked] = React.useState(false);
 </Toggle>
 ```
 
-Тогл с внешним `<label/>`.
+### Тогл с внешним `<label/>`
 
 ```jsx harmony
 import { Gapped } from '@skbkontur/react-ui';
@@ -39,7 +39,7 @@ const [checked, setChecked] = React.useState(false);
 </Gapped>
 ```
 
-Тогл получающий фокус после загрузки страницы.
+### Получение фокуса после загрузки страницы
 
 ```jsx harmony
 <Toggle autoFocus>
@@ -47,7 +47,7 @@ const [checked, setChecked] = React.useState(false);
 </Toggle>
 ```
 
-Тоглы в различных стилях.
+### Стили
 
 ```jsx harmony
 import { Gapped } from '@skbkontur/react-ui';
@@ -68,7 +68,7 @@ import { Gapped } from '@skbkontur/react-ui';
 </Gapped>
 ```
 
-У тоглов есть 3 стандартных размера.
+### Размер
 
 ```jsx harmony
 import { Gapped } from '@skbkontur/react-ui';
@@ -86,7 +86,7 @@ import { Gapped } from '@skbkontur/react-ui';
 </Gapped>
 ```
 
-Тогл с кастомным действием при получении и потере фокуса.
+### Кастомное действие при получении и потере фокуса
 
 ```jsx harmony
 import { Toast } from '@skbkontur/react-ui';
@@ -99,7 +99,7 @@ import { Toast } from '@skbkontur/react-ui';
 </Toggle>
 ```
 
-Тогл с кастомным действием при переключении.
+### Кастомное действие при переключении
 
 ```jsx harmony
 import { Toast } from '@skbkontur/react-ui';

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

@@ -1,7 +1,6 @@
-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 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/cjs/components/Toggle/Toggle.mixins.js

@@ -1,75 +1,72 @@
-"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 = 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 = 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;
 
-var toggleSizeMixin = exports.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 = exports.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);
 
 
-  };};
+};
 
-var buttonSizeMixin = exports.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 = exports.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);
 
-    });};
+};
 
-var captionSizeMixin = exports.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 = exports.captionSizeMixin = function captionSizeMixin(fontSize, toggleHeight) {
+  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    line-height: ", ";\n    font-size: ", ";\n  "])),
+  toggleHeight,
+  fontSize);
 
-  };};
+};
 
-var handleMixin = exports.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 = exports.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);
 
-  };};
+};
 
-var containerSizeMixin = exports.containerSizeMixin = function containerSizeMixin(emotion) {return function (toggleBorderRadius) {
-    return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-radius: ", ";\n  "])),
-    toggleBorderRadius);
+var containerSizeMixin = exports.containerSizeMixin = function containerSizeMixin(toggleBorderRadius) {
+  return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-radius: ", ";\n  "])),
+  toggleBorderRadius);
 
-  };};
+};
 
-var inputSizeMixin = exports.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 = exports.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);
 
 
-  };};
+};

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

@@ -1 +1 @@
-{"version":3,"names":["_client","require","_Toggle","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","toggleSizeMixin","exports","emotion","fontSize","toggleHeight","toggleWidth","css","_taggedTemplateLiteralLoose2","default","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","isChrome","captionSizeMixin","handleMixin","toggleHandleSize","toggleHandleBorderRadius","containerSizeMixin","inputSizeMixin","handleWidthWithBorders","height","globalClasses","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 = (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"],"mappings":";;AAEA,IAAAA,OAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA,oBAAgD,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEzC,IAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAIE,OAAgB,UAAK,UAACC,QAAgB,EAAEC,YAAoB,EAAEC,WAAmB,EAAK;IACpH,OAAOH,OAAO,CAACI,GAAG,CAAAZ,eAAA,KAAAA,eAAA,OAAAa,4BAAA,CAAAC,OAAA;IACDJ,YAAY;IACdD,QAAQ;;;IAGVE,WAAW;;;EAG1B,CAAC;;AAEM,IAAMI,eAAe,GAAAR,OAAA,CAAAQ,eAAA;AAC1B,SADWA,eAAeA,CACzBP,OAAgB;IACjB;IACEQ,gCAAwC;IACxCP,QAAgB;IAChBC,YAAoB;IACpBC,WAAmB;IACnBM,kBAA0B;IAC1BC,mBAA2B;IACxB;MACH,IAAMC,yBAAyB,GAAGC,QAAQ,CAACJ,gCAAgC,CAAC;MAC5E,IAAMK,cAAc,GAAGD,QAAQ,CAACX,QAAQ,CAAC;MACzC,IAAMa,oBAAoB,GAAGD,cAAc,IAAI,EAAE,IAAIE,gBAAQ,GAAG,CAACJ,yBAAyB,GAAG,CAAC;MAC9F,OAAOX,OAAO,CAACI,GAAG,CAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;MACRJ,YAAY;MACbC,WAAW;MACRA,WAAW;;MAENM,kBAAkB;MACpBP,YAAY;;MAERQ,mBAAmB,EAAMI,oBAAoB;;IAElE,CAAC;;AAEI,IAAME,gBAAgB,GAAAjB,OAAA,CAAAiB,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAIhB,OAAgB,UAAK,UAACC,QAAgB,EAAEC,YAAoB,EAAK;IAChG,OAAOF,OAAO,CAACI,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;IACDJ,YAAY;IACdD,QAAQ;;EAEzB,CAAC;;AAEM,IAAMgB,WAAW,GAAAlB,OAAA,CAAAkB,WAAA,GAAG,SAAdA,WAAWA,CAAIjB,OAAgB,UAAK,UAACkB,gBAAwB,EAAEC,wBAAgC,EAAK;IAC/G,OAAOnB,OAAO,CAACI,GAAG,CAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACCa,wBAAwB;IAC/BD,gBAAgB;IACjBA,gBAAgB;;EAE7B,CAAC;;AAEM,IAAME,kBAAkB,GAAArB,OAAA,CAAAqB,kBAAA,GAAG,SAArBA,kBAAkBA,CAAIpB,OAAgB,UAAK,UAACS,kBAA0B,EAAK;IACtF,OAAOT,OAAO,CAACI,GAAG,CAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACCG,kBAAkB;;EAEvC,CAAC;;AAEM,IAAMY,cAAc,GAAAtB,OAAA,CAAAsB,cAAA,GAAG,SAAjBA,cAAcA,CAAIrB,OAAgB,UAAK,UAACE,YAAoB,EAAEC,WAAmB,EAAK;IACjG,IAAMmB,sBAAsB,GAAGpB,YAAY;IAC3C,IAAMqB,MAAM,GAAGX,QAAQ,CAACV,YAAY,CAAC;IACrC,OAAOF,OAAO,CAACI,GAAG,CAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;IACDkB,qBAAa,CAACC,iBAAiB,EAAKD,qBAAa,CAACE,UAAU;IACxDH,MAAM,GAAG,GAAG,EAAUA,MAAM,GAAG,GAAG;;IAEtCC,qBAAa,CAACG,MAAM;IACTxB,WAAW,EAAiBmB,sBAAsB;;;EAGhF,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_client","_Toggle","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","toggleSizeMixin","exports","fontSize","toggleHeight","toggleWidth","css","_taggedTemplateLiteralLoose2","default","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","isChrome","captionSizeMixin","handleMixin","toggleHandleSize","toggleHandleBorderRadius","containerSizeMixin","inputSizeMixin","handleWidthWithBorders","height","globalClasses","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":"8ZAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;;AAEA,IAAAE,OAAA,GAAAF,OAAA,oBAAgD,IAAAG,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEzC,IAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAIE,QAAgB,EAAEC,YAAoB,EAAEC,WAAmB,EAAK;EAC9F,WAAOC,YAAG,EAAAX,eAAA,KAAAA,eAAA,OAAAY,4BAAA,CAAAC,OAAA;EACOJ,YAAY;EACdD,QAAQ;;;EAGVE,WAAW;;;AAG1B,CAAC;;AAEM,IAAMI,eAAe,GAAAP,OAAA,CAAAO,eAAA,GAAG,SAAlBA,eAAeA;AAC1BC,gCAAwC;AACxCP,QAAgB;AAChBC,YAAoB;AACpBC,WAAmB;AACnBM,kBAA0B;AAC1BC,mBAA2B;AACxB;EACH,IAAMC,yBAAyB,GAAGC,QAAQ,CAACJ,gCAAgC,CAAC;EAC5E,IAAMK,cAAc,GAAGD,QAAQ,CAACX,QAAQ,CAAC;EACzC,IAAMa,oBAAoB,GAAGD,cAAc,IAAI,EAAE,IAAIE,gBAAQ,GAAG,CAACJ,yBAAyB,GAAG,CAAC;EAC9F,WAAOP,YAAG,EAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;EACEJ,YAAY;EACbC,WAAW;EACRA,WAAW;;EAENM,kBAAkB;EACpBP,YAAY;;EAERQ,mBAAmB,EAAMI,oBAAoB;;AAEpE,CAAC;;AAEM,IAAME,gBAAgB,GAAAhB,OAAA,CAAAgB,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAIf,QAAgB,EAAEC,YAAoB,EAAK;EAC1E,WAAOE,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;EACOJ,YAAY;EACdD,QAAQ;;AAEzB,CAAC;;AAEM,IAAMgB,WAAW,GAAAjB,OAAA,CAAAiB,WAAA,GAAG,SAAdA,WAAWA,CAAIC,gBAAwB,EAAEC,wBAAgC,EAAK;EACzF,WAAOf,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;EACSa,wBAAwB;EAC/BD,gBAAgB;EACjBA,gBAAgB;;AAE7B,CAAC;;AAEM,IAAME,kBAAkB,GAAApB,OAAA,CAAAoB,kBAAA,GAAG,SAArBA,kBAAkBA,CAAIX,kBAA0B,EAAK;EAChE,WAAOL,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;EACSG,kBAAkB;;AAEvC,CAAC;;AAEM,IAAMY,cAAc,GAAArB,OAAA,CAAAqB,cAAA,GAAG,SAAjBA,cAAcA,CAAInB,YAAoB,EAAEC,WAAmB,EAAK;EAC3E,IAAMmB,sBAAsB,GAAGpB,YAAY;EAC3C,IAAMqB,MAAM,GAAGX,QAAQ,CAACV,YAAY,CAAC;EACrC,WAAOE,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;EACOkB,qBAAa,CAACC,iBAAiB,EAAKD,qBAAa,CAACE,UAAU;EACxDH,MAAM,GAAG,GAAG,EAAUA,MAAM,GAAG,GAAG;;EAEtCC,qBAAa,CAACG,MAAM;EACTxB,WAAW,EAAiBmB,sBAAsB;;;AAGhF,CAAC","ignoreList":[]}

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

@@ -1,47 +1,46 @@
-import type { Emotion } from '@emotion/css/create-instance';
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    handle: string;
-    container: string;
-    disabled: string;
-    containerDisabled: string;
-    containerLoading: string;
-    background: string;
-};
-export declare const getStyles: (emotion: Emotion) => {
-    root(t: Theme): string;
-    rootSmall(t: Theme): string;
-    rootMedium(t: Theme): string;
-    rootLarge(t: Theme): string;
-    disableAnimation(): string;
-    handle(t: Theme): string;
-    handleSmall(t: Theme): string;
-    handleMedium(t: Theme): string;
-    handleLarge(t: Theme): string;
-    handleDisabled(t: Theme): string;
-    input(t: Theme): string;
-    inputSmall(t: Theme): string;
-    inputMedium(t: Theme): string;
-    inputLarge(t: Theme): string;
-    container(t: Theme): string;
-    containerSmall(t: Theme): string;
-    containerMedium(t: Theme): string;
-    containerLarge(t: Theme): string;
-    containerDisabled(t: Theme): string;
-    focused(t: Theme): string;
-    isWarning(t: Theme): string;
-    isError(t: Theme): string;
-    button(t: Theme): string;
-    buttonSmall(t: Theme): string;
-    buttonMedium(t: Theme): string;
-    buttonLarge(t: Theme): string;
-    buttonRight(): string;
-    disabled(): string;
-    rootLeft(): string;
-    caption(t: Theme): string;
-    captionSmall(t: Theme): string;
-    captionMedium(t: Theme): string;
-    captionLarge(t: Theme): string;
-    disabledCaption(t: Theme): string;
-    captionLeft(t: Theme): string;
-};
+import type { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    handle: string;
+    container: string;
+    disabled: string;
+    containerDisabled: string;
+    containerLoading: string;
+    background: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    disableAnimation(): string;
+    handle(t: Theme): string;
+    handleSmall(t: Theme): string;
+    handleMedium(t: Theme): string;
+    handleLarge(t: Theme): string;
+    handleDisabled(t: Theme): string;
+    input(t: Theme): string;
+    inputSmall(t: Theme): string;
+    inputMedium(t: Theme): string;
+    inputLarge(t: Theme): string;
+    container(t: Theme): string;
+    containerSmall(t: Theme): string;
+    containerMedium(t: Theme): string;
+    containerLarge(t: Theme): string;
+    containerDisabled(t: Theme): string;
+    focused(t: Theme): string;
+    isWarning(t: Theme): string;
+    isError(t: Theme): string;
+    button(t: Theme): string;
+    buttonSmall(t: Theme): string;
+    buttonMedium(t: Theme): string;
+    buttonLarge(t: Theme): string;
+    buttonRight(): string;
+    disabled(): string;
+    rootLeft(): string;
+    caption(t: Theme): string;
+    captionSmall(t: Theme): string;
+    captionMedium(t: Theme): string;
+    captionLarge(t: Theme): string;
+    disabledCaption(t: Theme): string;
+    captionLeft(t: Theme): string;
+};